HTML 이미지 배열로 슬라이드쇼를 만듭니다. HTML5 캔버스 요소를 사용한 슬라이드쇼. Cincopa의 스킨 HTML 슬라이드 쇼
HTML 사진 슬라이드쇼는 귀하의 페이지에 쉽게 빛을 더해 방문자와 방문자 모두의 관심을 끌 것입니다. 검색 엔진. Cincopa는 서버 할당량을 사용하지 않고 상대적으로 작은 공간에서 수많은 사진이나 비디오를 표시할 수 있는 놀랍고 빠르게 사용자 정의 가능한 스킨을 제공합니다. 무료 호스팅및 배송 (특정 비용으로 패키지를 늘릴 수 있음). 슬라이드 생성 및 삽입에 대한 전체 과정 HTML 쇼몇 분 정도 걸리며 프로그래밍 지식이 전혀 없어도 완료하기가 매우 쉽습니다.
Cincopa의 HTML 사진 슬라이더는 놀랍도록 효율적이고 안정적이며 매력적입니다. 기술 요구 사항슬라이드쇼 제작자가 자동으로 수행하며, HTML 슬라이드쇼를 만들기 위해 실제로 해야 할 일은 고품질의 슬라이드쇼를 업로드하는 것뿐입니다. 멀티미디어 파일. 이 파일은 귀하의 모든 장치 또는 다음에서 다운로드할 수 있습니다. 소셜 네트워크, 예를 들어 Facebook이나 Instagram과 같습니다.
Cincopa의 SKINS HTML 슬라이드 쇼 작동 방식1 놀라운 스킨 중 하나를 선택하세요
2 파일을 클라우드에 업로드하세요” Cincopa
3 간단한 코드를 받아 웹사이트에 붙여넣으세요.
스킨 HTML 슬라이드쇼를 선택하세요HTML 지원 스킨의 슬라이드쇼에서 선택하고 위치 제어판, 위치 제어, Cooliris 보기, 셔플, 자동 재생 등과 같은 설정을 사용자 정의합니다. 그런 다음 별도의 창에서 스킨을 봅니다. 결정을 내리기 전에 반드시 여러 가지 스킨을 사용해 보십시오.
미디어 파일 업로드데스크탑에서 원하는 만큼 파일을 다운로드할 수 있습니다. 휴대용 장치또는 웹캠은 물론 외부 웹 소스에서도 직접 사용할 수 있습니다. 클라우드에서 파일을 정리하세요” Cincopa; Cincopa는 사진 변환, 크기 조정 및 기타 조정 작업을 처리합니다. HTML 슬라이드쇼 디자인은 나중에 귀하가 소유한 모든 장치에서 변경할 수 있습니다.
생성된 코드를 삽입하세요단순한 단계별 인터페이스 Cincopa는 방법을 선택하라는 메시지를 표시합니다. 즉, 웹사이트를 운영하고 있다면 HTML 기반"HTML 슬라이드쇼" 옵션을 선택해야 합니다. 애플리케이션에서 생성된 코드 줄을 복사하여 사이트의 아무 곳에나 붙여넣습니다.
이 프로그램을 사용하는 이유 HTML 생성 Cincopa 슬라이드쇼?Cincopa는 웹사이트의 HTML 슬라이더에서 발생할 수 있는 모든 요구 사항에 응답하도록 설계된 독점적이고 미디어가 풍부한 제품 및 서비스 패키지를 제공합니다. 슬라이드 쇼 제작 도구에는 생성 및 관리 프로세스를 안내하는 간단한 단계별 인터페이스가 있습니다. 소프트웨어 상류층안정적이고 원활한 서비스를 제공하는 전용 서버를 통해 빠른 성능그리고 진보적 시스템보안을 통해 파일을 완벽하게 보호합니다.
Cincopa를 사용하면 다음을 수행할 수 있습니다. 창의적인 솔루션하지만 당신을 모든 사람으로부터 해방시켜줍니다 기술적 문제. 거의 모든 소스에서 파일을 무제한으로 업로드할 수 있으며 원하는 수의 사이트와 소셜 채널에 HTML 슬라이드쇼를 표시할 수 있습니다.
HTML 슬라이드쇼의 주요 기능:이번 강의에서는 다음을 위한 프로그램을 살펴보겠습니다. 자동 생성 HTML5 기술을 사용한 슬라이드쇼.
JavaScript, CSS 및 html에 대한 지식이 없어도 슬라이드쇼를 직접 만들 수 없는 경우에도 Hislider 프로그램을 사용하여 이 작업을 수행할 수 있습니다. Hislider.com 링크에서 다운로드할 수 있습니다. 이 사이트에는 무료 버전과 유료 버전이 모두 있습니다. 모든 동작을 보여드리겠습니다 무료 버전. 프로그램이 마음에 드시면 구매하실 수 있습니다 유료 버전. 테스트 슬라이드쇼를 만들었습니다. 다음 링크를 사용하여 볼 수 있습니다.
다운로드Hislider를 사용하여 첫 번째 슬라이드쇼를 만드는 방법프로그램을 설치하고 실행하면 프로그램을 시작하라는 프로그램 창이 나타납니다. 슬라이드쇼 만들기. "새로 만들기" 버튼을 클릭하세요:
슬라이드쇼의 필수 너비(width) 및 높이(height)를 지정합니다.
그런 다음 이미지를 추가해야 합니다. 창 중앙에 있는 링크를 클릭하거나 버튼 표시줄에 있는 버튼을 클릭하면 됩니다.
이미지가 추가되면 전환 패널이 활성화됩니다. "전송" 탭으로 이동합니다.
원하는 전환을 추가하세요.
“확인”을 클릭하면 슬라이드쇼 편집기로 이동됩니다. 우리는 필요한 변경을 수행합니다. 상단에는 세 개의 버튼이 있습니다.
이러한 변경 사항을 보려면 변경 후 슬라이드쇼를 새로 고치려면 첫 번째 "새로 고침" 버튼이 필요합니다.
브라우저에서 슬라이드 쇼를 미리 보려면 두 번째 버튼 "미리보기"가 필요합니다.
그리고 마지막 버튼인 "PUBLISH"는 슬라이드 쇼를 만드는 데 사용됩니다.
충분한 흥미로운 프로그램. 특히 시간이나 기술이 없다면 이 프로그램귀하의 웹사이트를 위한 썰매 쇼를 개발하는 데 걸리는 시간이 단축될 것입니다. 또는 메뉴를 만든 다음 필요에 따라 코드를 편집하면 슬라이드 쇼가 준비됩니다.
아마도 새로운 HTML5 요소에 대해 이미 들어보셨을 것입니다. 캔버스. 이것 특수 요소, 그래픽을 생성하고 수정할 수 있습니다. 또한 페이지의 다른 요소처럼 사용할 수 있습니다. jQuery 애니메이션을 적용하고, 이벤트를 처리하고, 템플릿에 통합할 수 있습니다.
일반적으로 요소의 사용 캔버스게임 및 컨셉 데모로 제한됩니다. 안에 이번 수업우리는 그것을 실제로 사용할 것입니다 - 우리는 오래된 브라우저에서 작동할 훌륭한 전환 효과를 가진 슬라이드쇼를 만들 것입니다.
와 함께 자바스크립트를 사용하여해보자 특수 필터슬라이드쇼의 각 이미지에 대해 우리는 만들 것입니다 새로운 버전대비가 더 높은 이미지 밝은 색, 캔버스 요소에 저장합니다.
사용자가 다음 슬라이드로 이동하고 싶을 때 해당 요소는 캔버스애니메이션을 사용하여 화면에 표시 점점 뚜렷해지다, 부드러운 전환 효과를 생성합니다.
HTMLHTML 마크업을 생성하는 것부터 시작해 보겠습니다.
html5-슬라이드쇼.htmlHTML5 캔버스 요소와 jQuery를 기반으로 한 슬라이드 쇼 | 사이트 웹 사이트 데모
슬라이드쇼의 레이아웃은 매우 간단합니다. 주요 요소 div#slideshow에는 순서가 지정되지 않은 목록과 다음 및 이전 슬라이드에 대한 화살표가 포함되어 있습니다. 순서가 지정되지 않은 목록에는 요소로 정의된 슬라이드가 포함됩니다. 리. 위 그림은 요소가 캔버스수정된 이미지가 여기에 삽입됩니다.
마지막에는 jQuery와 파일이 포함됩니다. script.js에 대해서는 이 강의의 뒷부분에서 설명하겠습니다.
CSS모든 슬라이드쇼 스타일이 파일에 포함되어 있습니다. 스타일.css. 기본 #slideshow 요소의 ID를 네임스페이스 정의로 사용하므로 이름 충돌 위험 없이 이러한 스타일을 프로젝트에 간단히 추가할 수 있습니다.
스타일.css#slideshow( 배경색:#F5F5F5; 테두리: 1px 단색 #FFFFFF; 높이:340px; 여백:150px 자동 0; 위치: 상대; 너비:640px; -moz-box-shadow:0 0 22px #111; -webkit -box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; ) #slideshow ul( 높이:320px; 왼쪽:10px; 목록 스타일: 없음 외부 없음; 오버플로: 숨김; 위치: 절대; 상단:10px; 너비:620px; ) #슬라이드쇼 li( 위치:절대; 디스플레이: 없음; z-index:10; ) #슬라이드쇼 li:first-child( 디스플레이:블록; z-index:1000; ) #슬라이드쇼 . SlideActive(z-index:1000; ) #slideshow canvas(display:none; position:absolute; z-index:100; ) #slideshow .arrow( height:86px; width:60px; position:absolute; background:url(" img/arrows.png") 반복 없음; 상단:50%; 여백-상단:-43px; 커서:포인터; z-index:5000; ) #slideshow .previous( 배경 위치: 왼쪽 상단; 왼쪽:0; ) #slideshow .previous:hover( 배경 위치: 왼쪽 하단;) #slideshow .next( 배경 위치: 오른쪽 상단; 오른쪽:0;) #slideshow .next:hover( 배경 위치: 오른쪽 하단;)
슬라이드쇼와 상호 작용할 방문자를 세 그룹으로 나눌 수 있습니다.
- JavaScript가 비활성화된 사용자. 이러한 사용자는 첫 번째 슬라이드만 볼 수 있으며 다른 슬라이드로 전환할 수 없습니다.
- JavaScript가 활성화되어 있지만 요소 지원이 없는 분 캔버스. 이러한 방문자의 경우 전환 효과 없이 슬라이드가 즉시 전환됩니다.
- 활성화하신 분들은 자바스크립트 지원요소가 지원됩니다 캔버스. 이 그룹은 최신 버전파이어폭스, 사파리, 크롬, 오페라. 그들은 슬라이드쇼의 모든 영광을 보게 될 것입니다.
규칙은 처음 두 그룹을 고려하여 개발되었습니다. 선택기 사용 첫째 아이기본적으로 첫 번째 슬라이드만 표시됩니다.
우리는 슬라이드쇼가 어떻게 작동하는지에 대한 기본 원리를 이미 논의했습니다. 이제 실제 구현을 살펴보겠습니다.
script.js - 1부$(window).load(function())( // 우리는 window.load 이벤트를 사용하고 있으므로 // 슬라이드쇼 이미지오류 없이 로드되었습니다. // 현재 브라우저가 캔버스 요소를 지원하는지 확인합니다. var supportCanvas = "getContext" in document.createElement("canvas"); // 캔버스 요소를 조작하는 것은 CPU를 많이 사용하므로 // setTimeout을 사용하여 비동기화하고 페이지 응답 시간을 향상시킵니다. // 페이지 응답 시간 var Slides = $("#slideshow li"), current = 0, Slideshow = (width : 0, 높이:0); setTimeout(function())( window.console && window.console.time && console.time("생성 위치:"); if(supportCanvas)( $("#slideshow img").each(function())( if (!lideshow.width)( // 첫 번째 이미지의 크기를 가져옵니다. Slideshow.width = this.width; Slideshow.height = this.height; ) // 출력 수정된 버전이미지 createCanvasOverlay(this); ))); ) window.console && window.console.timeEnd && console.timeEnd("생성 위치:"); $("#slideshow .arrow").click(function())( var li = Slides.eq(current), canvas = li.find("canvas"), nextIndex = 0; // 누른 화살표에 따라 다름 , // 인덱스 계산 다음 슬라이드 if($(this).hasClass("next"))( nextIndex = current >= Slides.length-1 ? 0: current+1; ) else ( nextIndex = 현재
-
쿠거 -
라이온스 -
스노우워커 -
짖는 -
일광욕
사업부 ID="슬라이더"
이것은 주요 슬라이더 컨테이너입니다. 그는 가지고 있지 않습니다 특정 기능, 하지만 애니메이션을 일시 중지하려면 필요합니다.
사업부 ID="마스크"
이 블록을 사용하여 슬라이더 외부에서 발생하는 모든 것을 숨깁니다. 이 외에도 마스크를 사용하면 슬라이더의 내용을 표시할 수 있습니다.
Li id="첫 번째" 클래스="첫 번째 애니메이션"
각 목록 요소에는 ID와 클래스가 있습니다. ID는 툴팁을 표시하고 클래스는 곧 일어날 애니메이션과 연결됩니다.
Div 클래스="도구 설명"
이 블록은 이미지의 제목을 표시합니다. 예를 들어 클릭 가능하게 만들거나 간단한 설명을 추가하는 등 필요에 따라 변경할 수 있습니다.
Div 클래스="진행 표시줄"
이 블록에는 애니메이션 진행 상황을 보여주는 기능이 포함되어 있습니다.
이제 CSS 파일을 생성할 차례입니다.
3. CSS 스타일을 만들어보자 기본 구조슬라이더. 이미지와 같은 크기가 됩니다. border 속성은 이미지 주위에 테두리를 만드는 데 유용합니다./* 슬라이더 구조 */ #slider ( 배경: #000; 테두리: 5px 단색 #eaeaea; 상자 그림자: 1px 1px 5px rgba(0,0,0,0.7); 높이: 320px; 너비: 680px; 여백: 40px 자동 0; 위치: 상대)
"마스크" 클래스는 슬라이더 외부에 있는 모든 요소를 숨깁니다. 높이는 슬라이더의 높이와 같아야 합니다.
/* 슬라이더 외부의 모든 항목 숨기기 */ #mask (overflow: Hidden; height: 320px; )
마지막으로 이미지 목록을 정렬하기 위해 "위치: 절대" 및 "위쪽: -325px"를 사용하여 모든 이미지가 슬라이더 외부에 배치되도록 하겠습니다.
/* 이미지 목록 */ #slider ul ( 여백: 0; 패딩: 0; 위치: 상대; ) #slider li ( width: 680px; /* 이미지 너비 */ height: 320px; /* 이미지 높이 */ position: 절대값: -325px /* 초기 위치(슬라이더 외부) */ list-style: none; )
이 몇 줄의 코드를 사용하여 슬라이더 마크업을 만들었습니다. 이제 애니메이션을 추가하기만 하면 됩니다.
4. CSS3 키프레임 애니메이션
애니메이션을 시작하기 전에 올바른 애니메이션을 얻기 위해 몇 가지 매개변수를 정의해야 합니다.
아시다시피 애니메이션의 총 지속 시간은 25초이지만 1초에 몇 개의 키프레임이 있는지 알아야 합니다.
정확한 키 프레임 수와 애니메이션의 총 지속 시간을 제공하는 일련의 작업을 해결해 보겠습니다. 계산은 다음과 같습니다.
슬라이더의 총 이미지 수는 5개로 결정됩니다.
우리는 각 이미지의 애니메이션 지속 시간을 결정합니다: 5초;
총 이미지 수에 각 이미지의 지속 시간을 곱하여 애니메이션의 총 지속 시간을 결정합니다. 이미지 5개 × 5초 = 25초;
1초에 몇 개의 키 프레임(백분율)이 있는지 계산합니다.
총 키프레임 수를 애니메이션의 전체 지속 시간으로 나눕니다: 100%/25 = 4%,
1초에는 4개의 키 프레임이 있습니다. 즉 1초는 애니메이션의 4%와 같습니다.
이 모든 계산이 완료되면 이제 CSS 애니메이션을 슬라이더에 적용할 수 있습니다. 애니메이션을 넣을 수 있습니다 끝없는 순환, 왜냐하면 각 이미지에 대해 다른 이미지와는 별개로 별도의 애니메이션이 설정됩니다.
#slider li.firstanimation ( 애니메이션: 사이클 25s 선형 무한; ) #slider li.secondanimation ( 애니메이션: 사이클 2 25s 선형 무한; ) #slider li.thirdanimation ( 애니메이션: 사이클 3 25s 선형 무한; ) #slider li.fourthanimation ( 애니메이션: 사이클 4 25초 선형 무한; ) #slider li.fifthanimation (애니메이션: 사이클 5 25초 선형 무한; )
애니메이션 속성이 할당되면 다음을 사용해야 합니다. 키 프레임애니메이션을 움직이게 설정합니다.
이 원칙에 따라 모든 애니메이션이 서로 독립적이더라도 서로 연결할 수 있습니다. 이것은 우리에게 무한 루프를 제공할 것입니다.
한 이미지에서 다음 이미지로의 전환을 더욱 매력적으로 만들기 위해 "불투명도" 및 "z-index" 속성을 추가했습니다.
코드에서 볼 수 있듯이 첫 번째 애니메이션에는 다른 애니메이션보다 더 많은 키프레임이 있습니다. 그 이유는 슬라이더가 시작될 때 첫 번째 이미지가 두 번째 이미지를 위한 공간을 만들지 만 마지막 이미지가 애니메이션을 마치면 애니메이션 루프 사이에 중단이 발생하지 않도록 첫 번째 이미지에 추가 키프레임이 있어야 하기 때문입니다.
애니메이션의 모든 코드는 다음과 같습니다.
/* 애니메이션 */ @keyframes 사이클 ( 0% ( top: 0px; ) /* 슬라이더가 시작되면 첫 번째 이미지가 이미 표시됩니다 */ 4% ( top: 0px; ) /* 시작 위치 */ 16% ( top : 0px; opacity:1; z-index:0; ) /* 4%에서 16%(3초)까지 이미지가 표시됩니다. */ 20% ( top: 325px; opacity: 0; z-index: 0; ) /* 16%에서 20%(1초) 이미지 출력 */ 21% ( top: -325px; opacity: 0; z-index: -1; ) /* 마스크 외부의 원래 위치로 돌아갑니다 */ 92 % ( 상단: -325px; 불투명도: 0; z-index: 0; ) 96% ( 상단: -325px; 불투명도: 0; ) /* 96% ~ 100% (1초) – 입력 */ 100%( 상단: 0px; 불투명도: 1 ; ) ) @keyframes Cycletwo ( 0% ( 상단: -325px; 불투명도: 0; ) /* 마스크 외부의 시작 위치 */ 16% ( 상단: -325px; 불투명도: 0; ) / * 16%에서 이동 시작 * / 20% ( 위쪽: 0px; 불투명도: 1; ) 24% ( 위쪽: 0px; 불투명도: 1; ) /* 20% ~ 24% (1 초 이내) - 입력 */ 36%( 상단: 0px; 불투명도: 1; z-index: 0; ) /* 24%에서 36%(3초)까지 이미지가 표시됩니다. */ 40%( 상단: 325px; 불투명도: 0; z-index : 0; ) /* 36%에서 40%까지(1초) - 종료 */ 41% ( top: -325px; 불투명도: 0; Z-색인: -1; ) /* 원래 위치로 돌아가기 */ 100%( top: -325px; 불투명도: 0; z-index: -1; ) ) @keyframes 사이클3 ( 0% ( top: -325px; 불투명도: 0; ) 36% ( 상단: -325px; 불투명도: 0; ) 40%( 상단: 0px; 불투명도: 1; ) 44%( 상단: 0px; 불투명도: 1; ) 56%( 상단: 0px; 불투명도: 1; ) : 325px; 불투명도: 0; z-색인: 0; ) 61%(상단: -325px; 불투명도: 0; z-색인: -1; ) 100%(상단: -325px; 불투명도: 0; z-색인: -1; ) ) @keyframes 사이클4 ( 0% ( 상단: -325px; 불투명도: 0; ) 56% ( 상단: -325px; 불투명도: 0; ) 60% ( 상단: 0px; 불투명도: 1; ) 64% ( 상단: 0px; 불투명도: 1; ) 76%( 상단: 0px; 불투명도: 1; z-색인: 0; ) 80%( 상단: 325px; 불투명도: 0; z-색인: 0; ) 81%( 상단: -325px; 불투명도: 0; Z-색인: -1; ) 100%( 상단: -325px; 불투명도: 0; Z-색인: -1; ) ) @keyframes Cyclefive ( 0%( 상단: -325px; 불투명도: 0; ) 76%( 상단: -325px; 불투명도: 0; ) 80%( 상단: 0px; 불투명도: 1; ) 84%( 상단: 0px; 불투명도: 1; ) 96%( 상단: 0px; 불투명도: 1 ; Z-색인: 0; ) 100%( 상단: 325px; 불투명도: 0; Z-색인: 0; ) )
애니메이션을 만든 후에는 각 애니메이션의 지속 시간을 표시하기 위해 진행률 표시줄을 추가해야 합니다.
진행률 표시줄의 애니메이션 프로세스는 슬라이더의 애니메이션 프로세스와 동일합니다. 진행률 표시줄 자체를 만들어 보겠습니다.
/* 진행률 표시줄 */ .progress-bar ( 위치: 상대; 상단: -5px; 너비: 680px; 높이: 5px; 배경: #000; 애니메이션: 전체 확장 25초 완화 무한; )
구문을 두려워하지 마십시오. "from to"와 동일한 기능이 있습니다. 키프레임이 각 이미지의 모양과 사라짐을 설정하는 것을 볼 수 있습니다.
/* 애니메이션 상태 표시줄 */ @keyframes fullexpand ( /* 애니메이션은 이 키프레임에서 고정되어 있습니다 */ 0%, 20%, 40%, 60%, 80%, 100% ( width: 0%; opacity: 0; ) / * 여기 - 생생하게 나타납니다 */ 4%, 24%, 44%, 64%, 84% ( 너비: 0%; 불투명도: 0.3; ) /* 여기 - 부드럽게 채워집니다 */ 16%, 36 %, 56%, 76%, 96% ( 너비: 100%; 불투명도: 0.7; ) /* 이 키프레임에서 진행률 표시줄이 경로를 완료했습니다 */ 17%, 37%, 57%, 77%, 97% ( width: 100%; opacity : 0.3; ) /* 이 키프레임에서는 진행률 표시줄이 사라진 다음 반복을 다시 시작합니다. */ 18%, 38%, 58%, 78%, 98% ( width: 100%; opacity: 0; ) )
슬라이더가 어느 정도 완성되었습니다. 좀 더 기능적으로 만들기 위해 몇 가지 세부 사항을 추가해 보겠습니다. 마우스를 올리면 표시되는 이미지 제목에 대한 도구 설명을 삽입합니다.
도구 설명 스타일:
#slider .tooltip ( 배경: rgba(0,0,0,0.7); 너비: 300px; 높이: 60px; 위치: 상대; 하단: 75px; 왼쪽: -320px; ) #slider .tooltip h1 ( 색상: #fff ; 글꼴 크기: 24px; 줄 높이: 60px;
여기서는 이미지 제목만 표시되도록 설정했지만 텍스트, 링크 또는 원하는 모든 항목에 대해 동일한 작업을 수행할 수 있습니다.
7. CSS3 전환
CSS3 전환을 요소에 적용하는 방법을 살펴봤으니 이제 도구 설명용으로 만들어 보겠습니다.
기억하신다면 각 목록("첫 번째", "두 번째" 등)에 ID를 추가하여 마우스를 올리면 각 도구 설명이 다음과 연결됩니다. 별도의 이미지, 그러나 모든 프롬프트가 한 번에 나타나지 않았습니다.
#slider .tooltip ( … 전환: 모든 0.3초 easy-in-out; ) #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip ( 왼쪽: 0px; )
8. 일시 중지 및 다시 시작
사용자가 슬라이더를 중지하여 콘텐츠를 볼 수 있도록 하려면 마우스 오버 시 애니메이션을 중지해야 합니다. 또한 진행률 표시줄 애니메이션도 중지해야 합니다.
#slider: hover li, #slider: hover .progress-bar ( animation-play-state: Paused; )
9. 시연 드디어 수업이 끝났습니다. 이제 슬라이더가 100% 준비되었습니다!(). Firefox 5+, Safari 4+ 및 구글 크롬, iPhone 및 iPad도 마찬가지입니다. 아카이브()를 다운로드할 수도 있습니다.
이미지를 제공해 주신 Massimo Righi에게 감사드립니다.10. 결론 효과는 인상적이지만 이 슬라이더는 다재다능하지 않습니다. 예를 들어 이미지를 더 추가하려면 모든 키프레임을 편집해야 합니다. CSS3에는 큰 잠재력, 그러나 한계가 있으며 때로는 대상 고객에 따라 JavaScript가 선호되는 경우도 있습니다.
이 슬라이더에는 몇 가지 흥미로운 기능, 일시 중지(호버 위) 및 사용자가 슬라이더와 상호 작용할 수 있는 고유한 이미지 링크 등이 있습니다. 필요하다면 전폭적인 지원모든 브라우저에서는 CSS3 사용이 불가능하므로 JavaScript를 권장합니다. 불행하게도 CSS3 애니메이션에는 많은 한계가 있습니다. ~에 이 순간, 유연성이 부족하여 널리 사용할 수 없습니다. 이 기사를 통해 CSS3를 더 깊이 탐구할 수 있기를 바랍니다.
댓글로 여러분의 생각을 자유롭게 공유해 주세요.
번역자로부터:
번역 오류가 발견되면 구독을 취소해 주세요. 개인 메시지. 감사합니다.
태그: 태그 추가
생성을 위한 플러그인 가장 아름다운 슬라이더- 아이뷰. 다양한 설정, 탐색, 타이머, API, 지원 터치 장치, 비디오 삽입 및 적응성.
04.03.2013 1 692
웹사이트에 마이크로 갤러리를 생성하기 위한 플러그인입니다. 자동 표시, 각 이미지에 대한 설명을 추가하는 기능, 원형 스크롤 모드 등이 있습니다. 루핑.
01.02.2013 1 153
jQuery.popeye 플러그인은 페이지를 떠나지 않고도 이미지 갤러리를 표시할 수 있는 우아하고 아름다운 솔루션입니다. 페이지에 사진 한 장만 표시됩니다. 마우스를 가져가면 모든 이미지를 스크롤하거나 확대할 수 있습니다. 이 세트. 이 플러그인은 설치 및 구성이 쉽고 모달 창을 사용하는 일반적으로 사용되는 lightbox2, fancybox 또는 colorbox의 대안으로 개발되었습니다.
23.11.2012 7 286
적응력이 뛰어나다 jQuery 슬라이더- 플렉스슬라이더. 글머리 기호(점)로 탐색하는 기능, 탐색과 함께 썸네일 사용 가능, 동영상을 슬라이드로 삽입하는 기능, 회전식 슬라이드 옵션이 포함되어 있으며 플러그인에는 작은 API도 있습니다.
12.09.2012 4 667
Mobilyslider는 무게가 5Kb에 불과하지만 미니멀하고 세련된 느낌을 주는 간단한 jQuery 플러그인입니다. 몇 가지가 있습니다 추가 옵션, 탐색 활성화/비활성화, 앞으로/뒤로 화살표, 자동 슬라이드쇼, 전환 유형 선택 등을 포함합니다.
07.06.2012 1 403
다음 또는 이전 슬라이드로 이동할 때 현재 열려 있는 슬라이드를 잘라내는 것이 주요 아이디어인 전체 화면 슬라이드쇼를 만들어 보겠습니다. jQuery를 사용하여 CSS 애니메이션, 슬라이드 간에 고유한 전환을 얻을 수 있습니다.
09.05.2012 778
크로스 플랫폼 jPlayer 라이브러리를 사용하여 음악이 포함된 jQuery의 슬라이드쇼입니다. 슬라이드는 음악 구성에서 지정된 간격으로 변경됩니다.
04.05.2012 892
Rhinoslider는 매우 유연한 jQuery 슬라이드쇼 플러그인입니다. 제공될 뿐만 아니라 다양한 효과, 그러나 추가하는 것도 가능합니다 자신의 스타일, 효과 및 기능을 슬라이더에 추가합니다. ~에 공식 페이지플러그인에는 편리한 효과 생성기(생성기)가 있습니다. 일단 선택하면 생성된 작업 예제를 즉시 다운로드할 수 있습니다.
03.05.2012 2 061
jQuery를 기반으로 한 슬라이드쇼 플러그인과 이징 플러그인입니다. 마우스 휠을 사용하여 슬라이드를 스크롤하는 기능을 추가했습니다. 데모 페이지는 다음과 같습니다 다양한 옵션슬라이드 탐색을 사용합니다.
12.04.2012 1 387
jmpress를 사용하여 해보자 제이쿼리 플러그인을 위한 슬라이드쇼 만들기슬라이드에 흥미로운 3D 효과를 제공합니다.