시간은 멈추지 않고 계속 진행됩니다. 이것은 인터넷에도 영향을 미쳤습니다. 사이트의 모양이 어떻게 변하고 있는지 이미 알 수 있습니다. 특히 인기가 있습니다. 적응형 디자인. 그리고 그 결과 많은 새로운 반응형 jQuery 슬라이더, 갤러리, 회전 목마 또는 이와 유사한 플러그인.
1. 반응형 수평 포스트 슬라이더

반응형 수평 캐러셀 자세한 지시설치로. 심플한 스타일로 제작되었지만 자신에게 맞게 스타일링 할 수 있습니다.

2. Glide.js의 슬라이더

이 슬라이더는 모든 사이트에 적합합니다. 이것은 Glide.js를 사용합니다. 오픈 소스. 슬라이더 색상은 쉽게 변경할 수 있습니다.

3. 기울어진 콘텐츠 슬라이드쇼

반응형 콘텐츠 슬라이더. 이 슬라이더의 하이라이트는 이미지의 3D 효과와 다양한 무작위 모양 애니메이션입니다.

4. HTML5 캔버스를 사용한 슬라이더

대화형 입자가 있는 매우 아름답고 인상적인 슬라이더입니다. HTML5 캔버스로 제작

5. 이미지 모핑 슬라이더

모핑 효과가 있는 슬라이더(한 개체에서 다른 개체로의 부드러운 변환). 에 이 예슬라이더는 포트폴리오 형태의 웹 개발자 또는 웹 스튜디오의 포트폴리오에 적합합니다.

6. 원형 슬라이더

이미지를 뒤집는 효과가 있는 원 형태의 슬라이더입니다.

7. 흐린 배경 슬라이더

전환 및 배경 흐림 기능이 있는 반응형 슬라이더.

8. 반응형 패션 슬라이더

간단하고 가볍고 반응이 빠른 웹사이트 슬라이더.

9. Slicebox - jQuery 3D 이미지 슬라이더(업데이트됨)

수정 사항 및 새로운 기능이 포함된 Slicebox 슬라이더 버전이 업데이트되었습니다.

10.무료 애니메이션 반응형 이미지 그리드

다양한 애니메이션과 타이밍을 사용하여 샷을 전환하는 유연한 이미지 그리드를 만들기 위한 jQuery 플러그인입니다. 이것은 우리가 새로운 이미지와 그 전환의 선택적 모양을 설정할 수 있기 때문에 사이트의 배경이나 장식 요소로 좋아 보일 수 있습니다. 플러그인은 여러 버전으로 만들어집니다.

11.플렉스 슬라이더

귀하의 웹사이트를 위한 범용 무료 플러그인. 이 플러그인은 여러 슬라이더 및 캐러셀 옵션으로 제공됩니다.

12. 포토 프레임

사진범용 플러그인입니다. 많은 설정이 있으며 모든 것이 빠르고 쉽게 작동하며 전체 화면에서 슬라이드를 볼 수 있습니다. 슬라이더는 고정 크기와 적응형, 썸네일 유무에 관계없이, 원형 스크롤 유무에 관계없이 사용할 수 있습니다.

추신슬라이더를 몇 번이나 넣었는데 그 중 최고라고 생각합니다

13. 무료 반응형 3D 썸네일 갤러리 슬라이더.

실험 슬라이더 갤러리 3D패널레이아웃그리드와 흥미로운 애니메이션 효과.

14. CSS3의 슬라이더

css3를 사용하여 제작한 반응형 슬라이더로, 콘텐츠의 매끄러운 외관과 가벼운 애니메이션을 제공합니다.

15. 와우 슬라이더

와우 슬라이더놀라운 시각 효과가 있는 이미지 슬라이더입니다.

17.탄력

완전한 응답성과 슬라이드 썸네일이 있는 탄력 있는 슬라이더.

18. 슬릿

css3 애니메이션을 사용한 전체화면 반응형 슬라이더입니다. 슬라이더는 두 가지 버전으로 만들어집니다. 애니메이션은 매우 비정상적이고 아름답게 이루어집니다.

19. 반응형 사진 갤러리 플러스

단순한 자유 슬라이더-이미지를 업로드하는 갤러리.

20. WordPress용 반응형 슬라이더

WP용 반응형 무료 슬라이더.

21. 시차 콘텐츠 슬라이더

시차 효과가 있는 슬라이더와 CSS3로 각 요소를 제어합니다.

22. 음악 바인딩 슬라이더

오픈 소스 JPlayer를 사용하는 슬라이더. 이 슬라이더는 음악이 있는 프레젠테이션과 유사합니다.

23. jmpress.js가 있는 슬라이더

반응형 슬라이더는 jmpress.js를 기반으로 하므로 흥미로운 3D 효과를 슬라이드에 적용할 수 있습니다.

24. 빠른 호버 슬라이드쇼

슬라이드 쇼 빠른 스위칭슬라이드. 슬라이드는 마우스 오버 시 전환됩니다.

25. CSS3를 사용한 이미지 아코디언

CSS3를 사용한 이미지 아코디언.

26. 터치에 최적화된 갤러리 플러그인

터치 기기에 최적화된 반응형 갤러리입니다.

27. 3D 갤러리

3D 월 갤러리- 3D 효과가 표시되는 Safari 브라우저용으로 제작되었습니다. 다른 브라우저에서 보면 기능은 괜찮지만 3D 효과는 보이지 않습니다.

28. 페이지 매김이 있는 슬라이더

jQuery UI 슬라이더가 있는 반응형 페이지 매김 슬라이더. 아이디어는 간단한 탐색 개념을 사용하는 것입니다. 모든 이미지를 되감거나 슬라이드 간에 전환할 수 있습니다.

29. jQuery를 사용한 이미지 몽타주

화면 너비에 따라 이미지를 자동으로 정렬합니다. 포트폴리오 웹사이트를 개발할 때 매우 유용한 것입니다.

30. 3D 갤러리

CSS3 및 jQuery의 간단한 3D 원형 슬라이더.

31. css3 및 jQuery에 3D 효과가 있는 전체 화면 모드

아름다운 전환으로 전체 화면 이미지를 볼 수 있는 기능이 있는 슬라이더.

유능하게 구성되고 시각적으로 디자인 된 우리의 경우 이것은 별도의 페이지이며 개인 웹 사이트 또는 블로그의 중요한 요소이며 특정 수준의 기술에 도달 한 전문가의 전문적인 활동.
포트폴리오 페이지는 일종의 보고서 또는 시각적 요약으로, 사이트/블로그의 독자와 방문자에게 사진, 기사, 출판물 등 가장 성공적인 완성 작품 세트를 명확하게 보여줄 수 있습니다. , 디자인 요소 등
나는 그러한 페이지가 없으며, 내 입장에서는 이것이 실제로 무엇에 대해 가능한 한 빨리 수정되어야 하는 불행한 누락입니다. 이 순간그리고 나는 일한다.
광활한 글로벌 네트워크에서 엄청난 숫자를 찾을 수 있습니다. 기성품 템플릿포트폴리오 구성을 위한 페이지, 그리고 이러한 페이지의 다양성은 정말 인상적입니다. 따라서 웹 디자인 및 개발의 모든 복잡성에 관심이 있는 사람은 항상 자신에게 적합한 옵션을 찾을 수 있습니다. 글쎄, 웹 사이트 구축에 대한 지식으로 고통받는 사람들을 위해 애니메이션 요소를 사용하여 카테고리별로 수행되는 작업 필터링, 제작, 매력적인 전환 효과로 희석된 적응형 레이아웃의 예를 분석할 것을 제안합니다.

페이지 레이아웃, 실행 가능한 자바스크립트 및 일부 디자인 요소는 훌륭한 웹 디자이너이자 개발자인 Kevin Liew(queness.com)인 "to the mountain"을 제공했습니다. 최적의 솔루션을 선택할 때 실행의 용이성, jQuery 플러그인의 기능, 모든 최신 브라우저에서 올바른 작동, 인터넷 서핑을 위해 다양한 모바일 장치를 사용하는 것에 대한 계속 증가하는 인기를 감안할 때, 적응성이 중요했습니다. 페이지의 디자인입니다. 허세를 부리는 디자이너의 종소리와 휘파람과 무거운 플러그인이 없습니다.

기본 레이아웃은 두 가지 주요 요소로 구성됩니다. 사용자 인터페이스우리가 구축해야 하는 것은 제출된 작업의 범주를 필터링하기 위한 탭 탐색과 마우스 오버 시 팝업 캡션 효과가 있는 썸네일 그리드 자체입니다.
우선 모든 것이 결국 작동하려면 jQuery 버전 1.7.0 이상이 필요합니다. 아직 연결하지 않은 경우 태그 앞에 다음 줄을 추가하십시오. :

MixItUp 플러그인을 실행하고 위의 파일 뒤에 이 코드를 붙여넣습니다.

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] ) , 완화 : "snap" , // 호버 효과 호출 onMixEnd: filterList. hoverEffect() ) ; ) , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find(".label" ) .stop() .animate(( 하단: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( 상단: - 30 ) , 500 , "easeOutQuad" ) ; ) , 함수 () ( $(this) . find(".label" ) . stop() . animate(( 하단: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

모든 플러그인 옵션을 별도로 고려하는 것은 의미가 없으며 기본값이 가장 좋은 옵션입니다. 글쎄, 누군가가 매개 변수로 실험에 참여한다면 모든 것이 당신의 힘에 달려 있습니다.

페이지 레이아웃과 요소의 모양을 형성하려면 두 개의 파일을 문서에 연결하십시오. . , 하나는 기본 스타일에 대한 것으로, 더 나은 브라우저 일관성을 위해 layout.css 및 또 다른 작은 CSS 파일 normalize.css라고 합시다. 표준 디자인집단:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

이제 우리는 가능하면 불필요한 물 없이 접근 가능하고 이해할 수 있는 방식으로 모국어, 오래 참는 언어로 모든 것을 순서대로 분석할 것입니다.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >모두 < li>< span class = "filter" data- filter= "app" >애플리케이션 < li>< span class = "filter" data- filter= "card" >명함 < li>< span class = "filter" data- filter= "icon" >아이콘 < li>< span class = "filter" data- filter= "logo" >심벌 마크 < li>< span class = "filter" data- filter= "web" >웹 디자인

  • 모두
  • 애플리케이션
  • 명함
  • 아이콘
  • 심벌 마크
  • 웹 디자인

탐색 패널에서 전체 작품 목록을 범주로 구분하여 배치합니다. data-filter 속성의 값에 따라 하나 이상의 탐색 모음 항목과 data-cat 속성을 통해 각 포트폴리오 범주를 연결해야 합니다. data-filter 값을 data-cat 과 일치시키면 포트폴리오 항목이 범주별로 필터링됩니다.
또한, 당분간 숨겨져 있는 썸네일에는 이미지 위에 마우스를 올려 놓았을 때만 팝업되는 작품명과 카테고리 제목이 있는 작은 패널을 추가할 예정입니다. 그리고 CSS에서 이 전체 구조의 모양을 쉽게 형성할 수 있도록 해당 클래스를 요소에 작성합니다.

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >호스팅 Beget. 루 < span class = "text-category" >심벌 마크 < div class = "label-bg" > .........

.........

사용자가 전체 작업을 볼 수 있도록 사진에 링크를 추가하거나 서명에 직접 링크를 추가할 수 있습니다.

CSS

이제 조용히 글랜더, 가장 흥미로운 부분으로 넘어가겠습니다. 우리 포트폴리오 페이지의 사용자 인터페이스의 일반 스타일과 적응형 버전의 CSS 형성에 대해 알아보겠습니다. 이 기사에서는 기본(기본값) 값만 표시합니다. 배경 사진그리고 연결된 글꼴, 이 모든 것이 필요한 사람은 데모에서 보거나 소스 아카이브에서 찾을 수 있습니다.

.container(위치:상대적;너비:960px;여백:0 자동; /* 브라우저 창의 크기를 조정하면 탐색 체인을 볼 수 있습니다. */-webkit-transition: 모든 1의 용이함; -moz-transition: 모두 1의 용이함; -o-전환: 모두 1의 용이성; 전환: 모두 1의 용이성; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* 텍스트에 그림자 추가 */텍스트 그림자 : 1px 1px #FFFFFF ; 커서 : 포인터 ; ) /* 마우스 오버 시 카테고리 배경 변경 */#filters li span: hover ( background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* 활성 카테고리 항목의 배경 */#filters li span.active ( background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; 너비: 23% ; 여백: 1% ; 표시: 없음 ; float: 왼쪽 ; overflow: 숨김 ; ) .portfolio-wrapper ( 오버플로 : 숨김 ; 위치 : 상대 ! 중요 ; 배경 : #666 ; 커서 : 포인터 ; ) .portfolio img ( 최대 너비 : 100% ; 위치 : 상대 ; ) /* 캡션은 기본적으로 숨겨져 있습니다 */.portfolio .label ( 위치 : 절대 ; 폭 : 100% ; 높이 : 40px ; 하단 : -40px ; ) % ; 위치 : 절대 ; 상단 : 0 ; 왼쪽 : 0 ; ) .portfolio .label-text ( 색상 : #fff ; 위치: 상대 ; Z-인덱스: 500 ; 패딩: 5px 8px ; ) 디스플레이: 블록 ; 글꼴 크기: 9px ; )

Container ( position: relative; width: 960px; margin: 0 auto; /* 브라우저 창의 크기를 조정할 때 전환 체인을 볼 수 있습니다. */ -webkit-transition: all 1s easy; -moz-transition: all 1s easy; -o- transition: 모두 1s easy; transition: 모두 1s easy; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* 텍스트에 그림자 추가 */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* 카테고리 배경 변경 on hover */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* 활성 카테고리 항목의 배경 */ #filters li span.active ( background: rgb(62, 151, 221 ); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- 상자; -o-box- 크기 조정: 테두리 상자; 너비:23%; 여백:1%; 표시: 없음; 부동: 왼쪽; 오버플로: 숨김; ) .po rtfolio-wrapper(오버플로:숨김; 위치: 상대 !중요; 배경: #666; 커서:포인터; ) .portfolio img ( max-width:100%; position: relative; ) /* 레이블은 기본적으로 숨겨져 있습니다. */ .portfolio .label ( position: absolute; width: 100%; height:40px; bottom:-40px; ) . 포트폴리오 .label-bg ( 배경: rgb(62, 151, 221); 너비: 100%; 높이:100%; 위치: 절대; 상단:0; 왼쪽:0; ) .portfolio .label-text ( 색상: # fff; 위치: 상대; Z-색인:500; 패딩:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

두 번째 부분에서는 동일한 스타일 시트에서 여러 미디어 쿼리를 사용하여 대체 CSS 섹션을 만듭니다. 다양한 모바일 장치의 화면에 페이지 레이아웃이 올바르게 표시되도록 하기 위해 이 섹션에 다른 화면에 대한 대체 CSS 규칙을 추가합니다. 따라서 일반 브라우저에 대해 CSS 테이블에 이전에 설정한 규칙을 쉽게 무시하고 원하는 적응성을 얻을 수 있습니다.

/* 태블릿 */ @media only screen and (min-width: 768px ) and (max-width: 959px ) ( .container ( width : 768px ; ) ) /* 모바일 - 참고: 320px 너비로 디자인*/@미디어 전용 화면 및 (최대 너비: 767px ) ( .container ( 너비 : 95% ; ) #portfoliolist .portfolio ( 너비 : 48% ; 여백 : 1% ; ) ) /* 모바일 - 참고: 480px 너비에 맞게 디자인 */@미디어 전용 화면 및 (최소 너비: 480px) 및 (최대 너비: 767px) ( .container ( 너비 : 70% ; ) )

/* 태블릿 */ @media only screen and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* 모바일 - 참고: 320px 너비를 위한 디자인*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* 모바일 - 참고: 480px 너비용으로 설계 */ @media 화면 및 (최소 너비: 480px) 및 (최대 너비: 767px) ( .container ( 너비: 70%; ) )

그게 다야. "포트폴리오"라는 이름의 멋진 페이지가 준비되었습니다. 귀하의 훌륭하고 뛰어난 작품으로 채우고 전 세계에 전시하는 일만 남았습니다. 당신은 여전히 ​​조용히 겸손하게 자신을 자랑스러워할 수 있습니다. 가장 중요한 것은이 문제에서 과용하지 않는 것입니다.
예제를 다시 보고 필요한 경우 소스 코드를 가져와 조용한 가정 환경에서 이 작업을 완벽하게 수행할 수 있습니다.

수업을 만들 때 사용된 자료는 다음과 같습니다. 저자의 펜에서 가져온 원본 그대로의 포트폴리오 페이지가 그곳에 있습니다.

모두의 행운을 빕니다. 몸의 유익과 함께 남은 짧은 여름을 보내십시오!

현재 캐러셀 슬라이더는 비즈니스 웹사이트, 포트폴리오 웹사이트 또는 기타 리소스에 있어야 하는 기능입니다. 전체 화면 이미지 슬라이더와 함께 수평 캐러셀 슬라이더는 모든 웹 디자인에 잘 맞습니다.

때때로 슬라이더는 사이트 페이지의 1/3을 차지해야 합니다. 여기에서 캐러셀 슬라이더는 전환 효과 및 반응형 레이아웃과 함께 사용됩니다. 전자 상거래 사이트는 회전식 슬라이더를 사용하여 여러 사진을 별도의 게시물이나 페이지에 표시합니다. 슬라이더 코드는 자유롭게 사용하고 필요에 따라 변경할 수 있습니다.

jQuery를 HTML5 및 CSS3와 함께 사용하면 고유한 효과로 페이지를 더 흥미롭게 만들고 방문자의 관심을 사이트의 특정 영역으로 끌 수 있습니다.

Slick - 현대적인 회전 목마 슬라이더 플러그인

Slick은 개발자가 자신의 솔루션이 모든 슬라이더 요구 사항을 충족한다고 주장하는 무료 jQuery 플러그인입니다. 반응형 슬라이더 - 캐러셀은 모바일 장치의 경우 "타일" 모드에서 작동하고 데스크톱 버전의 경우 "드래그 앤 드롭" 모드에서 작동할 수 있습니다.

페이드 전환 효과, 흥미로운 "중앙 모드" 기능, 자동 스크롤을 통한 이미지 지연 로딩이 포함되어 있습니다. 업데이트된 기능에는 슬라이드 및 슬라이드 필터 추가가 포함됩니다. 요구 사항에 따라 플러그인을 사용자 정의할 수 있는 모든 것.

데모 모드 | 다운로드

Owl Carousel 2.0 - 터치 장치용 jQuery 플러그인

이 플러그인에는 초보자와 숙련된 개발자 모두에게 적합한 다양한 기능이 있습니다. 이것은 회전 목마 슬라이더의 업데이트된 버전입니다. 그의 전임자는 같은 이름을 가졌습니다.

슬라이더에는 전체 기능을 향상시키는 몇 가지 내장 플러그인이 있습니다. 애니메이션, 비디오 재생, 슬라이더 자동 재생, 지연 로딩, 자동 높이 조절 - Owl Carousel 2.0의 주요 기능.

플러그인을 보다 편리하게 사용할 수 있도록 드래그 앤 드롭 지원이 포함되어 있습니다. 모바일 기기.
플러그인은 모바일 장치의 작은 화면에서도 큰 이미지를 표시하는 데 적합합니다.

예 | 다운로드

jQuery 실버 트랙 플러그인

페이지에 캐러셀 슬라이더를 배치할 수 있는 작지만 풍부한 jquery 플러그인으로, 코어가 작고 사이트 리소스를 많이 사용하지 않습니다. 플러그인을 사용하여 애니메이션과 함께 수직 및 수평 슬라이더를 표시하고 갤러리에서 이미지 세트를 생성할 수 있습니다.

예 | 다운로드

AnoSlide - 초소형 반응형 jQuery 슬라이더

초소형 jQuery 슬라이더는 일반 슬라이더보다 훨씬 더 많은 기능을 가진 회전식 슬라이드입니다. 그것은 포함한다 시사단일 이미지, 제목에 따라 캐러셀 및 슬라이더에 여러 이미지 표시

예 | 다운로드

올빼미 회전 목마 - jquery 슬라이더 - 회전 목마

올빼미 회전 목마는 터치 스크린을 지원하는 슬라이더이며 드래그 기술및 drop , HTML 코드에 쉽게 포함됩니다. 플러그인은 특별히 준비된 마크업 없이 아름다운 회전 목마를 만들 수 있는 최고의 슬라이더 중 하나입니다.

예 | 다운로드

3D 갤러리 - 회전 목마

CSS 스타일 및 일부 Javascript 코드를 기반으로 하는 3D 전환을 사용합니다.

예 | 다운로드

TweenMax.js 및 jQuery를 사용한 3D 캐러셀

멋진 3D 회전 목마. 방금 몇 가지 문제를 발견했기 때문에 아직 베타 버전인 것 같습니다. 슬라이더를 테스트하고 만드는 데 관심이 있다면 이 회전 목마가 큰 도움이 될 것입니다.

예 | 다운로드

부트스트랩을 사용한 캐러셀

새 웹사이트에 적합한 부트스트랩 기술을 사용하는 반응형 캐러셀 슬라이더입니다.

예 | 다운로드

부트스트랩 기반 슬라이더 - 이동 상자 캐러셀

포트폴리오 및 비즈니스 웹사이트에서 가장 많이 찾는 항목입니다. 유사한 유형의 슬라이더 - 회전 목마는 모든 유형의 사이트에서 종종 발견됩니다.

예 | 다운로드

작은 원슬라이더

이 작은 크기의 슬라이더는 모든 화면 해상도의 장치에서 작동할 준비가 되어 있습니다. 슬라이더는 원형 및 회전식 모드에서 모두 작동할 수 있습니다. 이 유형의 다른 슬라이더에 대한 대안으로 작은 원이 표시됩니다. 내장 지원 있음 운영체제 IOS와 안드로이드.

원형 모드에서 슬라이더는 매우 흥미롭게 보입니다. 끌어서 놓기 방식에 대한 지원과 자동 슬라이드 스크롤 시스템이 잘 구현되어 있습니다.

예 | 다운로드

Thumbelina 콘텐츠 슬라이더

강력하고 적응력이 뛰어난 회전식 슬라이드 슬라이더는 현대적인 사이트에 적합합니다. 모든 장치에서 올바르게 작동합니다. 수평 및 수직 모드가 있습니다. 크기는 1KB로 최소화됩니다. 초소형 플러그인은 탁월한 부드러운 전환을 제공합니다.

예 | 다운로드

와우 슬라이더 회전 목마

웹 사이트에 대한 원본 슬라이더를 만드는 데 도움이 되는 50개 이상의 효과가 포함되어 있습니다.

예 | 다운로드

반응형 jQuery 콘텐츠 슬라이더 bxSlider

브라우저 창의 크기를 조정하여 슬라이더가 어떻게 조정되는지 확인합니다. Bxslider는 50개 이상의 사용자 지정 옵션과 함께 제공되며 다양한 전환 효과로 기능을 보여줍니다.

예 | 다운로드

jCarousel

jCarousel은 이미지 보기를 구성하는 데 도움이 되는 jQuery 플러그인입니다. 예제에 표시된 프레임워크에서 사용자 정의 이미지 캐러셀을 쉽게 만들 수 있습니다. 슬라이더는 반응이 빠르고 모바일 플랫폼에 최적화되어 있습니다.

예 | 다운로드

ScrollBox - jQuery 플러그인

Scrollbox는 슬라이더(회전 목마 또는 텍스트 실행 라인)를 만들기 위한 컴팩트 플러그인입니다. 주요 기능에는 마우스를 가져갈 때 일시 중지되는 수직 및 수평 스크롤 효과가 있습니다.

예 | 다운로드

dbpas 회전 목마

간단한 회전 목마 슬라이더. 빠른 플러그인이 필요한 경우 이 플러그인이 100% 적합합니다. 슬라이더를 작동시키는 데 필요한 기본 기능만 제공됩니다.

예 | 다운로드

Flexisel: 반응형 JQuery 회전 목마 슬라이더 플러그인

Flexisel의 제작자는 구식 jCarousel 플러그인에서 영감을 받아 모바일 및 태블릿 장치에서 슬라이더의 올바른 작동에 초점을 맞춘 복사본을 만들었습니다.

Flexisel의 반응형 레이아웃은 모바일 장치에서 실행될 때 브라우저 창 크기 지향 레이아웃과 다릅니다. Flexisel은 저해상도 및 고해상도 화면 모두에서 작동하도록 완벽하게 조정되었습니다.

예 | 다운로드

Elastislide - 반응형 캐러셀 슬라이더

Elastislide는 장치의 화면 크기에 완벽하게 적응합니다. 특정 해상도에서 표시할 최소 이미지 수를 설정할 수 있습니다. 수직 스크롤 효과와 함께 고정 래퍼를 사용하는 이미지 갤러리가 있는 회전식 슬라이더로 잘 작동합니다.

예 | 다운로드

플렉스 슬라이더 2

Woothemes의 프리웨어 슬라이더. 가장 반응이 좋은 슬라이더 중 하나로 당연히 간주됩니다. 플러그인에는 여러 템플릿이 포함되어 있으며 초보자와 전문가 모두에게 유용합니다.

예 | 다운로드

놀라운 회전 목마

Amazing Carousel은 반응형 jQuery 이미지 슬라이더입니다. WordPress, Drupal 및 Joomla와 같은 많은 콘텐츠 관리 시스템을 지원합니다. 또한 호환성 문제 없이 Android 및 IOS 및 데스크톱 버전의 운영 체제를 지원합니다. 내장된 놀라운 회전 목마 템플릿을 사용하면 슬라이더를 수직, 수평 및 원형 모드로 사용할 수 있습니다.

예 | 다운로드

이 튜토리얼에서는 jQuery, CSS3 및 Timeline 플러그인을 사용하여 아름다운 포트폴리오를 작성합니다. 타임라인은 이벤트 타임라인 표시를 전문으로 하는 jquery 플러그인입니다. 이 포트폴리오에는 다음을 포함할 수 있습니다. 다른 유형미디어 데이터: 트윗, 동영상, 지도, 사진, 기록을 저장하고 날짜별로 정렬합니다. 디자인 작업을 하면 관심사와 작업을 반영하는 아름다운 포트폴리오를 얻을 수 있습니다.

HTML

기본적으로 타임라인 플러그인에는 밝은 색 구성표가 포함되어 있습니다. 이것은 대부분의 경우 매우 편리하고 필요합니다. 우리 포트폴리오의 경우 어두운 디자인이 더 우아합니다. 따라서 우리는 우리가 원하는 방식으로 최적화합니다.

먼저 페이지의 기본 html 마크업을 살펴보겠습니다.

인덱스.HTML

타임라인 포트폴리오 | 튜토리얼진 데모

헤드 섹션에는 디자인 선택 사항이 포함될 플러그인 스타일(timeline.css 및 styles.css)이 있습니다. 페이지 끝에 jQuery 라이브러리, 타임라인 플러그인 및 플러그인을 초기화할 scripts.js가 포함됩니다.

플러그인을 호출하면 ID=timeline인 DIV 블록을 찾습니다. 블록 내부에서 html 마크업을 마운트한 후 페이지는 다음과 같이 됩니다.

조니 비 구드

디자이너 & 개발자

2009년 3월

타임랩스 사진에 대한 나의 첫 번째 실험

이 비디오에서 가장 아름다운 자연.

2010년 3월
애완 동물 가게 로고 디자인
2009년 6월
또 다른 타임랩스 실험

우리는 CSS 스타일을 변경할 것이기 때문에 위의 코드는 포트폴리오가 어떻게 구성되어 있는지에 대한 더 나은 아이디어를 제공합니다. 플러그인의 기본 스타일은 변경하지 않고 자체 CSS 파일의 일부 속성만 덮어씁니다. 이는 향후 포트폴리오 디자인 변경 시 이점을 제공합니다.

CSS 작성에 대해 자세히 논의할 것이지만 조금 뒤에 하겠습니다. 유일한 것은 기존 지침 위에 모든 지침을 다시 작성해야 하지만 나중에 다룰 것입니다.

제이쿼리

플러그인을 초기화하려면 VMM.Timeline() 메서드를 호출해야 합니다.

$(함수()( var 타임라인 = 새로운 VMM.Timeline();timeline.init("data.json"); ));

init 메소드는 데이터 자원인 간단한 인수를 취합니다. 위의 코드와 같은 json 파일이나 Google 스프레드시트가 될 수 있습니다.

작동 방식에 대해 자세히 알아보려면데이터.json, 강의 소스를 다운로드합니다. 여기에 복잡한 것은 없으며 이 파일의 구조를 설명할 필요가 없습니다.

CSS

Firebug HTML Inspector를 사용하면 HTML 요소에 대한 선택기를 정의할 수 있으며 이는 HTML 요소에 정의되어 있습니다. 그런 다음 동일한 선택기를 사용하여 styles.css 파일에 스타일을 할당할 수 있습니다. 어떤 경우에는 ! 중요한자신의 스타일을 우선시합니다.

아래에 표시되는 모든 변경 사항은 다음을 사용하여 수동으로 추가됩니다. CSS 스타일. 나머지 스타일 요소는 기본적으로 플러그인에 의해 설정됩니다.

먼저 페이지의 전반적인 스타일을 지정한 후 포트폴리오의 배경을 변경합니다.

#timeline( background:none; ) /* 슬라이더의 개별 이벤트 */ .slider .slider-container-mask .slider-container( background:none; ) /* 사용자 정의 배경 이미지 설정 */ #timeline div.navigation ( 배경: url("../img/timeline_bg.jpg") 반복; 테두리 상단:없음; )

3D 효과를 만들려면 탐색 블록, 우리는 사용해야합니다. :after 요소는 어두운 상단 부분이며 선형 그라데이션을 사용하여 3D 효과를 제공합니다.

#timeline div.navigation:before( position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repeat; ) #timeline div.navigation:after( position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear- gradient(하단, #434446 0%, #363839 100%); background-image: -o-linear-gradient(하단, #434446 0%, #363839 100%); background-image: -moz-linear-gradient( 하단, #434446 0%, #363839 100%); 배경 이미지: -webkit-linear-gradient(하단, #434446 0%, #363839 100%); 배경 이미지: -ms-linear-gradient(하단, #434446 0%, #363839 100%); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -highlight( 배경색:투명 !중요; )

도구 모음의 확대 및 축소 버튼 스타일 지정:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

하단의 스케일 스타일:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

이전 및 다음 이벤트에 대한 화살표:

슬라이더 .nav-previous .icon ( 배경: url("timeline.png") 반복 없음 스크롤 0 -293px 투명; ) .slider .nav-previous,.slider .nav-next( font-family:"Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( background: url("timeline.png") 반복되지 않는 스크롤 72px -221px transparent; 너비: 70px !important; ) .slider .nav-next:hover . icon( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( color: #666; cursor: pointer; ) #timeline .thumbnail ( 테두리: 중간 없음; )

로드 배경:

#timeline .feedback ( background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; ) #timeline .feedback div( color: #AAAAAA; font-size : 14px !중요, 글꼴 두께: 보통; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # 타임라인 .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

결국 우리는 덮개를 바꿀 것입니다. nth-child(1)를 사용하여 포트폴리오의 제목과 설명이 포함된 첫 번째 슬라이드(표지)에만 연결했습니다. 이 데이터는 JSON 파일에 저장됩니다.

/* 첫 번째 슬라이드 사용자 지정 - 표지 */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); 공백: nowrap; 패딩:10px 5px 5px 20px; 위치:상대적; 오른쪽:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( 왼쪽: -30px; 위치: 상대; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( 텍스트 정렬: 가운데; )

플러그인 파일에 첨부된 타임라인.psd를 열어 일부 아이콘의 색상을 변경하는 일만 남았다. 이 튜토리얼의 소스에 필요한 모든 파일을 추가했습니다. 이것으로 CSS3 스타일링으로 jQuery 포트폴리오 생성이 완료되었습니다!

무엇을 할 것인가?

이 포트폴리오를 사용하여 최신 프로젝트를 표시할 뿐만 아니라 흥미롭고 흥미로운 중요한 포인트당신의 경력. 그것은 당신의 인생의 미니 다이어리와 같습니다! 이 튜토리얼을 즐겼기를 바랍니다. 아래 의견에 귀하의 생각을 공유하십시오.

Long은 오늘의 주제로 주제를 선택했습니다. 결과적으로 아직 선택하지 않은 것으로 나타났습니다. 이미지 갤러리. 좋은 주제라고 생각하기 때문에 갤러리많은 사이트에 존재합니다. 솔직히 그들 중 누구도 그다지 매력적이지 않습니다. 현재의 개발 동향을 고려하여 제이쿼리, html5등등. 내가 전에 만났던 것보다 훨씬 더 매력적인 해결책이 이미 있을 것이기 때문에 나는 생각했다. 그래서. 하루를 보낸 후 발견한 엄청난 양스크립트. 이 모든 산에서 이미 이전 게시물에서 알 수 있듯이 사랑하기 때문에 선택하기로 결정했습니다.
이미지 갤러리에만 적용되는 것이 아니라 사진 앨범과 함께. 스크립트를 사용할 수 있으며, 다음과 같이 훨씬 더 정확할 것이라고 생각합니다. 사진가, 디자이너를 위한 포트폴리오등. 제이쿼리 효과방문자의 관심을 끌고 사이트에 우아함을 더하는 데 도움이 됩니다.
그래서. 당신의 관심을 위한 컬렉션 웹 사이트용 jquery 이미지 갤러리 플러그인.
댓글을 달고 기억하는 것을 잊지 마십시오. 이 컬렉션을 잃지 않도록 기사 하단의 별표를 클릭하여 즐겨찾기에 추가할 수 있습니다.

포토박스
가볍고 반응이 빠른 무료 이미지 갤러리, 모든 효과, 전환은 css3을 사용하여 이루어집니다. 사진가를 위한 포트폴리오 웹사이트를 만드는 데 이상적입니다.

에스갤러리
매력적인 jquery 이미지 갤러리 플러그인. 애니메이션은 css3에서 작동합니다.

DIAMONDS.JS
원래의 이미지 갤러리 플러그인. 미니어처는 모양 마름모현재 매우 인기가 있습니다. 이 양식은 css3로 만들어졌습니다. 이 갤러리의 유일한 단점은 사진을 전체 크기로 열 수 있는 라이트박스가 없다는 것입니다. 즉, 가재로 라이트박스 플러그인을 고정해야 합니다. 이 스크립트는 적응형 다이아몬드 모양의 이미지 그리드를 생성합니다.

슈퍼박스
현대 이미지 갤러리 사용 jQuery, CSS3 및 html5. 미리보기를 클릭하면 전체 이미지라이트박스(팝업 창)에서 열립니다. 이 플러그인의 개발자는 라이트박스가 이미 그 유용성보다 오래되었다고 결정했습니다. 이 갤러리의 이미지는 미리보기 아래에 열립니다. 데모를 확인하고 이 솔루션이 어떻게 훨씬 더 현대적으로 보이는지 확인하십시오.
|
부드러운 대각선 페이드 갤러리
현대 이미지 갤러리 미리보기는 전체 화면 공간에 배포됩니다.. 스크립트는 서버에서 사진이 있는 폴더를 스캔할 수 있습니다. 즉, 각 이미지를 별도로 삽입할 필요가 없습니다. 서버의 폴더에 사진을 업로드하고 설정에서 디렉토리 경로를 지정하면 충분합니다. 그러면 스크립트가 모든 작업을 스스로 수행합니다.

감마 갤러리
현재 매우 인기 있는 Pinterest 스타일 그리드가 있는 세련되고 가벼운 반응형 이미지 갤러리입니다. 스크립트는 다음과 같이 잘 작동합니다. 고정 컴퓨터, 곧 모바일 기기모든 화면 해상도로. 웹 디자이너 포트폴리오를 만들기 위한 훌륭한 솔루션입니다.

확장 미리보기가 있는 썸네일 그리드
플러그인은 적응형 이미지 그리드. 아래를 클릭하면 더 큰 사진과 설명이 표시됩니다. 포트폴리오 구축에 좋습니다.

제이갤러리
제이갤러리는 전체 화면, 반응형 이미지 갤러리. 효과, 전환 및 스타일도 쉽게 조정할 수 있습니다.

글리세.js
간단하지만 매우 효과적인 이미지 갤러리 플러그인입니다. 사진 앨범을 만들어야 할 때 이것이 바로 솔루션입니다. 플러그인은 앨범을 지원하며 매우 멋진 뒤집기 효과가 있습니다.

모자이크 흐름
단순, 적응 Pinterest 스타일 격자가 있는 이미지 갤러리.

갤러리
카테고리 필터가 있는 또 다른 세련된 Pinterest 스타일 그리드 갤러리입니다. 브라우저에서 작동: Chrome, Safari, Firefox, Opera, IE7+, Android 브라우저, Chrome 모바일, Firefox 모바일.

최소.js
훌륭한 무료 갤러리이미지와 함께 JQUERY 사용, 5 및 CSS3. 그것은 매우 매력적인 외관을 가지고 있으며 반드시 방문자의 관심을 끌 것입니다.

플립라이트박스
간단한 이미지 갤러리입니다. 미리보기를 클릭하면 전체 이미지가 라이트박스에서 열립니다.

블루림프 갤러리
유연한 갤러리. 출력 가능 모달 창사진 뿐만 아니라 동영상. 에서 잘 작동합니다. 터치 장치. 쉽게 사용자 정의할 수 있으며 추가 플러그인으로 기능을 확장할 수 있습니다(다음 플러그인 참조).