이것은 매우 멋진 효과를 가진 다양한 스타일의 페이지 레이아웃 슬라이드 쇼의 특수 효과입니다. 이 특수 효과에서 슬라이드 쇼는 전면 및 후면 탐색 버튼을 통해 전환되며 각 슬라이드의 그림마다 다른 레이아웃 효과가 있습니다.
이 슬라이드 효과는 Anime.js를 사용하여 슬라이드에 대한 애니메이션 효과를 만들고 많은 CSS3 속성을 사용합니다. 최신 버전의 최신 브라우저가 효과를 확인해야합니다. IE 브라우저의 경우 이전 효과는 IE11 이상의 브라우저에서 볼 수 있습니다. IE 브라우저가 SVG 클립 경로 속성을 지원하지 않기 때문에 마지막 효과는 볼 수 없습니다.
사용 방법
HTML 구조
이 슬라이드의 기본 HTML 구조는 다음과 같습니다. 각 슬라이드에는 고유 한 레이아웃 클래스 클래스와 자체 애니메이션 효과를 생성하기위한 데이터 레이아웃 속성이 있습니다.
<div> <div data-layout = "layout1"> <div> <div> <div style = "background-image : url (img/1.jpg);"> </div> </div> <div> <div style = "background-image : url (img/2.jpg);"> </div> <div> <div- 스타일 = "Background-Image : url (img/3.jpg); "> </div> </div> </div> <div> <h3> 지금 또는 절대 </h3> <p> ... <a href ="#"> 더 읽기 </a> </p> </div> </div> <!-/slide-> <div data-layout ="layout2 ">-...-> </div> ---------------- </div. /슬라이드 쇼 ->
CSS 스타일
레이아웃 중 하나에 대한 CSS 스타일은 다음과 같습니다.
/ * 레이아웃 1 : 3 그리드 이미지 */. 슬라이드-layout-1 .Slide__img {위치 : 절대; 너비 : calc (50% -1em); } .slide-layout-1 .slide__img : 1 차 자녀 {왼쪽 : 0.5em; 높이 : 100%; } .slide--layout-1 .slide__img : nth-Child (n + 2) {왼쪽 : calc (50% + 0.5em); 높이 : calc (50% -0.5em); } .Slide-- Layout-1 .Slide__img : nth-Child (3) {Top : calc (50% + 0.5em);}결과는 아래 그림에 나와 있습니다.
자바 스크립트
각 슬라이드 레이아웃의 애니메이션 효과는 JS 파일에 정의됩니다. 구조는 : [레이아웃 이름] : {out : {속성 탐색}, in : {속성}}. 슬라이드에 들어가고 떠나기 위해 다양한 애니메이션 효과를 설정할 수 있습니다. 다음 코드는 첫 번째 레이아웃의 샘플 코드입니다.
mlslideshow.prototype.options = {// 시작 위치. startIdx : 0, // 레이아웃 구성. // [레이아웃 이름] : {out : {속성 탐색}, in : {속성을 탐색}} layoutconfig : {layout1 : {on out : {다음 : '-100%', prev : '100%'}, rotatez : {el, index) {return.random (-15, 0); }, prev : function (el, index) {return anime.random (0, 15); }}, 불투명도 : 0, 지속 시간 : 1200, 완화 : 'EaseOutquint', ItemsDelay : 80}, in : {resetProps : {TranslateX : {다음 : '100%', '-100%'}, Rotatez : {next : function (el, index) {반환 애니. 랜덤 (0, 15); }, prev : function (el, index) {return anime.random (-15, 0); }}, 불투명도 : 0,}, translatex : '0%', rotatez : 0, 불투명도 : 1, 지속 시간 : 700, 완화 : 'easeoutquint', itemsdelay : 80}}, layout2 : { / * ... * /}, layout3 : { / * ... * /}, / * ... * /}};위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.