웹 사이트 개발자의 경우 디스플레이 컨텐츠에 슬라이딩 또는 회전식 효과를 추가하는 것이 매우 일반적입니다. 많은 유료 및 무료 회전 목마 플러그인이 있습니다. 그들 중 다수는 많은 유용한 구성 옵션과 동적 효과를 제공합니다.
프로젝트에 가벼운 회전 목마가 필요한 경우 많은 기능이 필요하지 않습니다. 동시에 프로젝트는 부트 스트랩 (가장 인기있는 오픈 소스 프론트 엔드 프레임 워크)을 사용하는 것입니다. 공식 부트 스트랩 구성 요소를 참조 할 수 있습니다.
이 기사에서는 부트 스트랩 회전식에 흥미로운 애니메이션 효과를 추가하는 방법을 보여줍니다. 동시에이 JS 구성 요소가 자유롭게 확장되고 빠르게 시작되었는지 확인하십시오.
Animate.css 소개
애니메이션 효과를 칭찬 할 가치가있는 애니메이션 효과를 만들기 위해 나는 매우 유명한 오픈 소스 CSS3 애니메이션 라이브러리를 사용했는데, 이는 animate.css라고 불립니다. Dan Eden에 의해 작성되었습니다.
이것은 CSS3 애니메이션을 설명하기보다는 당면한 작업에 집중할 수있는 코드입니다.
ANIMET.CSS 사용은 두 단계가 필요합니다.
1. HTML 문서에 Animate.min.css를 소개합니다.
2. 웹 페이지에서 애니메이션 yourchosenanimation 클래스를 요소에 추가하십시오.
다음으로 ANIMET.CSS 웹 사이트에서 볼 수있는 애니메이션에 대한 클래스 이름을 사용하여 yourchosenAnimation을 대체합니다.
부트 스트랩 회전식 구성 요소 소개
부트 스트랩 회전식 구성 요소에는 세 가지 주요 부분이 있습니다.
--- 회전 목마는 슬라이드에 표시된 페이지 수를 나타내며 , 사용자에게 시각적 단서를 제공하고 슬라이딩 탐색을 제공합니다.
--- Carousel Entry , .carousel-inner라는 클래스, 외부 테두리에 포함되어 있습니다. 각 독립 슬라이더를 나타냅니다. 사진은 각 그림에 배치 할 수 있습니다. 제목을 추가 할 수도 있습니다. HTML 요소에 Carousel-Caption 클래스 이름을 추가 할 수도 있습니다. 부트 스트랩은 고유 한 스타일을 갖습니다. 이 요소를 통해 애니메이션을 추가 할 수 있습니다.
--- 마지막으로, 회전식 컨트롤 화살표가 있는데, 이는 사용자가 앞뒤로 슬라이드 할 수있는 기능입니다.
단순히 데모를 표시하기 위해 사진이 추가되지 않습니다. 먼저 애니메이션으로 회전 목마 프레임에 중점을 둡니다.
HTML 구조 구조
프로젝트에 인용해야 할 사항은 다음과 같습니다.
jQuery
부트 스트랩의 CSS 및 JavaScript
animate.css
스타일 시트 및 JS 문서.
개발 프로세스 속도를 높이기 위해 템플릿과 필요한 파일은 공식 부트 스트랩 웹 사이트에서 참조됩니다.
아래는 부트 스트랩 회전식 코드 입니다.
<div id = "carousel-example-generic"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-slide to = "1"> <li> Data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-슬라이드 용 래퍼-> <div role = "listbox"> <!-첫 번째 슬라이드-> <div> <div> <h3 데이터-애니메이션 = "애니메이션 바운스 앤인 플로트"> 이것은 슬라이드의 캡션입니다. 슬라이드 1 </h3> <버튼 데이터-애니메이션 = "애니메이션 Zoominup"> 버튼 </button> </div> </div> <!-/item-> <!-두 번째 슬라이드-> <div> <div> <h3 데이터-애니메이션 = "애니메이션 바운스 </span </h3> <hatinimation"> bounceindown "> bounceindown"> 이것은 슬라이드 2 </h3> <버튼 데이터-애니메이션 = "애니메이션 Zoominright"> 버튼 </button> </div> </div> <!-/.Item-> <!-세 번째 슬라이드-> <div> <div> <h3 데이터-애니메이션 = "애니메이션 Zoominleft"> <span> </h3> <h3 animation = "h3 animation ="h3 animation = "h3 animation ="h3 animation = "animated Zoominleft"> 슬라이드 3 </h3> <버튼 데이터-애니메이션 = "애니메이션 라이트 스피드"> 버튼 </button> </div> </div> <!-/.item-> </div> <!-/.carousel-inner-> <!-컨트롤-> <a href = "#carousel-example-generic"roblide "<prev <prev"> <prev "> aria-hidden = "true"> </span> <span> previous </span> </a> </a> <a href = "#carousel-example-generic"lole = "button"data-slide = "next"> <span aria-hidden = "true"> </span> </span> </a> </dive <!-/.carousel->.
위의 코드가 잘못되지 않으면 브라우저에서 열 때 실행할 수있는 회전 목마가 표시됩니다. 위의 모든 것에는 JavaScript 코드 라인이 포함되어 있지 않습니다. 이미지를 추가하지 않으면
CSS 문서의 .carousel .item 클래스 블록에 Min-Height 값을 추가하여 회전식 붕괴를 방지하십시오.
이 특수 애니메이션 라이브러리를 값으로 사용하여 회전식 제목의 요소에 애니메이션 속성 데이터 애니메이션을 추가하십시오.
Animate.css 라이브러리에서 다른 애니메이션을 경험하려면 데이터 애니메이션 속성 값 대신 선택한 애니메이션 클래스 이름을 사용하십시오.
JavaScript 코드에서 데이터 애니메이션 속성 값을 사용합니다.
경우에 따라 간단한 자동 회전 목마를 찾을 수 있지만이 경우를 더 많이 제어 할 수 있습니다.
이 방향의 첫 번째 단계에서는 요소에서 Data-Ride = "Carousel"값을 제거하고 코드를 작성하지 않고 데이터 리더 속성 값을 초기화하십시오. 그러나 우리는 회전 목마를 제어하기 위해 JS 코드를 사용하려고 하므로이 데이터 리드 속성은 불필요합니다.
회전 목마에 CSS 스타일을 추가하십시오
이제 창의성을 사용하여 선호도에 따라 회전식 제목에 스타일을 추가하십시오. 내가 쓸 스타일 규칙은 순조롭게 작동하는 데모입니다.
보다 구체적으로, 우리는 애니메이션 지연 속성의 제어를 증가시킵니다. 각 애니메이션이 시작될 때 정의하십시오 (간단한 데모의 경우 브라우저 접두사가 생략 됨).
.Carousel-Caption H3 : First-Child {Animation-Delay : 1S;}. Carousel-Caption H3 : Nth-Child (2) {Animation-Delay : 2S;}. Carousel-Caption 버튼 {Animation-Delay : 3S;}위의 코드 스 니펫에서 요소 애니메이션이 순서대로 시작되는지 확인하십시오. 다른 효과를 수행 할 수 있습니다. 예를 들어, 처음 두 타이틀을 동시에 선택할 수 있습니다. 그런 다음 버튼 버튼이 있습니다. 당신은 스스로 결정하고 재미를 가질 수 있습니다.
jQuery 코드 작성 :
우리는이 회전 목마를 초기화하기 시작하고 사용자 정의 자바 스크립트 파일에 코드를 추가합니다.
var $ mycarousel = $ ( '#carousel-example-generic'); // carousel 초기화 $ mycarousel.carousel ();
우리는 회전 목마를 동적으로 설정했으며 다음 에이 애니메이션을 해결해 봅시다.
첫 번째 슬라이드의 제목을 애니메이션하려면 페이지가 브라우저에로드 된 후 스크립트가 실행되어야합니다. 후속 슬라이드 쇼는 애니메이션에서 시야 필드로 들어가고 코드는 Slide.bs.carousel 이벤트에서 실행됩니다. 동일한 코드가 두 번 실행됨을 의미합니다.
우리는 비 반복의 원칙을 따르기를 좋아하기 때문에 코드를 함수로 캡슐화하고 적절한 경우 참조하려고합니다.
암호:
함수 doanimations (elems) {var animendev = 'webkitanimationend animationend'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ( 'animation'); // animate.css 클래스 추가 // 애니메이션 요소에 // animate.css 클래스를 제거하십시오. $ this.removeClass ($ animationType);};}; functionDoanimations ($ firstAnimatingElems); // carousel $ mycarousel.carousel ( 'pause'); // doanimations () 함수를 // carousel 's slide.bs.carousel 이벤트 $ mycarousel.on에 첨부합니다. $ (e.relatedTarget) .find ( "[data-animation ^= 'animated']");위의 코드를 분석하겠습니다.
doanimations () 함수를보십시오
이 doanimations () 함수에 의해 수행되는 작업은 다음과 같습니다.
변수의 애니메이션 이벤트 이름이 포함 된 캐시 문자열로 시작합니다. 이 이벤트는 각 애니메이션이 끝날 때 추측했을 수도 있음을 알려줍니다. 각 애니메이션이 끝나면 Animate.css 클래스를 제거하기 때문에이 시점에 대한 정보가 필요합니다. 우리가 제거를하지 않으면, 회전 목마의 제목에는 애니메이션이 한 번만 있습니다. 즉, 첫 번째 회전 목마에 특정 슬라이드 만 표시됩니다.
var animationendev = 'WebKitanimationEnd AnimationEnd';
다음으로, 우리의 기능은 각 요소를 통해 애니메이션을 갖고 데이터 애니메이션의 속성 값을 얻으려고합니다. 위에서 언급 한 내용을 생각해보십시오.이 값에는 애니메이션 효과가 있도록 요소에 추가하려는 Animate.css 클래스가 포함됩니다.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.Data ( 'animation'); // etc ...});마지막으로, doanimations () 함수는 애니메이션을 실행하기 위해 Animate.css 클래스의 각 요소에 동적으로 추가됩니다. 애니메이션이 끝나면 이벤트 청취도 첨부됩니다. 애니메이션이 끝나면 Animate.css에서 추가 된 클래스를 제거합니다. 이렇게하면 다음 회전 목마가 현재 영역으로 돌아갑니다. (이 코드를 삭제하고 무슨 일이 일어나는지 확인하려고합니다)
$ this.AddClass ($ animationType) .One (animendev, function () {$ this.RemoveClass ($ animationType);});첫 번째 타이틀 애니메이션
페이지가 브라우저에로드되면 첫 번째 슬라이드의 내용을 애니메이션합니다.
var $ firstAnimatingElems = $ myCarousel.Find ( '. 항목 : First') .find ( "[[data-animation ^= 'animated']]; doanimations ($ FirstAnimatingElems);
이 코드에서 첫 번째 조명을 찾으십시오. 데이터 애니메이션을 사용하여 애니메이션 제목에서 애니메이션 속성의 값을 얻고 싶습니다. 그런 다음 변수 $ firstAnimatingElems를 doanimations () 함수로 매개 변수로 전달한 다음 함수를 실행합니다.
회전식 정지 기능
첫 번째 화면 내용이 실행되면이 회전 목마 기능을 중지합니다.
$ myCarousel.carousel ( 'pause');
이것은 부트 스트랩 회전식 구성 요소가 일정한 회전을 방지하는 기능입니다. 끊임없는 회전은 방문객을 불행하게 만들 수 있습니다.
이 경우 모든 애니메이션이 실행될 때까지 회전 목마가 다음 조명으로 직접 루프하지 않도록하는 것이 좋습니다. 초기화 코드에서 "간격"옵션을 설정하여 제어 할 수 있습니다.
$ myCarousel.carousel ({interal : 4000});내 생각에, 무한 루프 회전 목마 타이틀은 슬라이드가 시야가 이상적 일 때마다 점프됩니다.
회전 목마 슬라이드 제목 애니메이션
아래에 설명 된 단계는 각 슬라이드의 애니메이션 회전 목마 제목에 대해 볼 수 있도록해야합니다.
먼저 Slide.bs.carousel에 이벤트 리스너를 추가합니다.
슬라이드 인스턴스 메소드가 호출되면 즉시 이벤트가 발생합니다.
$ myCarousel.on ( 'slide.bs.carousel', function (e) {// 물건 ...});다음으로 현재 조명을 선택하고 애니메이션을 추가하려는 요소를 찾습니다. 다음 코드는 Slide.bs.carousel 이벤트의 .RelatedTarget 속성을 사용하여 애니메이션을 바인딩합니다.
var $ animatingElems = $ (e.relatedTarget) .find ( "[data-animation ^= 'animated']");
마지막으로, 우리는 doanimations () 함수를 호출하고 $ animatingelems를 매개 변수로 전달합니다.
doanimations ($ animatingelems);
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.