swiper.js-全屏動畫切換效果實現
針對swiper.js的全屏動畫切換，咱們已經簡單分析和介紹過一次：css
http://my.oschina.net/u/2352644/blog/487902 這個裏面很是簡單的分析瞭如何加入咱們的動畫效果，swiper如今已經出現了3.0版本，咱們這裏就是使用swiper3.0去開發咱們的更貼近真實的項目。html
下載swiper3.0 http://www.swiper.com.cn/download/index.html 推薦下載演示包，這樣咱們能夠充分了解swiper均可以實現什麼！css3
一，原理簡單分析web
1.加入動畫api
上一個博客只是分析了在active類名下加入咱們的動畫樣式就可完成咱們的效果呈現，這裏咱們二次的分析其中的更多知識，瞭解別人的原理咱們在構建相似效果就能夠本身動手了。瀏覽器
首先打開demo文件下，預覽這個html頁面，和複製此html頁面：app
而後打開dist文件夾，把這個html從新命名本身喜歡的名稱，個人是demo2框架
demo2.html就是咱們的實戰頁面，咱們打開頁面，把css和js的引入路徑從全局改成dist下的css和js上：dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div>
<div id="aa">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
<div>Slide 6</div>
<div>Slide 7</div>
<div>Slide 8</div>
<div>Slide 9</div>
<div>Slide 10</div>
</div>
<!-- Add Pagination -->
<div></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
</script>
</body>
</html>
咱們預覽測試，pc就能夠查看，保證沒有任何問題，咱們firebug查看是否是當前所在位置有active的類名：ide
2.顯示切換
同上次分析結果吻合，3.0一樣是這個加入動畫原理，咱們進一步分析每次滑動是如何顯示當前div（這一屏內容）的：
咱們利用firebug進一步分析：
分別切換到1 2 3屏咱們發如今父容器.swiper-wrapper 上改變的是transform: translate3d(0px, -618px, 0px);的屬性值，
變化3d效果中移動處理y軸在發上變化，從0到-309到-618，咱們試想一下這個原理方式：
上面是初始狀態，默認變化3d的位移y軸值是0。
當咱們向下切換時，y軸值就會變成-1*一屏高度，這樣就利用變化移動顯示了第二屏：
其實作過tab切換的就知道這個切換原理，不過之前是利用定位處理去改變left或者top的值實現切換，這裏使用的是css3變換位移處理，咱們把最外層父容器定好寬高和設置超出隱藏，那麼就能夠去切換咱們的顯示內容了，咱們firebug這個.swiper-container能夠查看是否是有超出隱藏。
3.方向判斷
咱們預覽頁面，從按下到擡起，會識別出咱們是向上或者向下，而後去切換咱們的顯示內容，
咱們事件觸發的過程就是
1.按下
2.移動/沒有移動
3.擡起
咱們針對這三個事件能夠分別獲取event的pagex和pagey，咱們根據擡起的x和y與按下的x與y去比較就可分析出操做方向：
咱們針對擡起和按下的座標，構造三角形能夠去分析出移動的方位：
咱們算數x1 x2的差值取整和y1 y2差值取整，若是x的差值/y差值大於1說明方向不是左就是右，固然跟具體的分析咱們能夠去具體研究。
4.彈性下拉分析
咱們在第一屏，向下拖拽：
這個效果咱們在app裏面很是常見，在app就會刷新頁面，這裏只是單純的彈動！
這個實現和咱們的切換相似，也是改變3d變化位移處理y值，不過這個y值不是在根據屏幕高度就處理，而是帶有極限和時時改變的。
1.當前是第一屏（辦法不少，好比一個全局變量，根據y值改變而變化）
2.記住mousedown事件event的pagey
3.在mousemove中不斷獲取event的pagey和down的pagey作差值，而後複製到3d變換位移出的y上
4.設置一個極限值好比100，差值和100比較若是大於100了3d位移y一直賦值爲100。
5.全屏css樣式
這個說的話太繞了，咱們一張圖表示：
綠色表明瀏覽器窗口，也就是window
黃色就是html標籤，咱們寬度設置爲100%就等於窗口寬度，高度設置爲100%就是窗口高度
橘黃色是body標籤，這個同html的設置，都設置爲100%，寬高等於了窗口寬高
藍色就是咱們做於切換容器的div，在寬高100%等於窗口基礎上，設置超出隱藏，首先保證了滾動條的不出現，而後裏面的元素在這個div預覽時，這個div就起到了窗戶的做用，咱們改變窗戶裏面內容位置就能夠看到不一樣的內容了。
使用百分比設置寬高是全局切換的方法。
6.pc和移動端的事件
咱們上面一直說到，切換的觸發是在mousedown move up組合事件中產生的，在手機登移動設備上，dom提供了移動設備的一套處理，
touchstat對應mousedown
touchmove對應mousemove
touchend對應mouseup
咱們針對蘋果和安卓系統這種兼容處理是沒有問題的，不過在wp8上，也就是微軟手機是不被支持的，要用另外一套事件作兼容處理，咱們查看swiper.js源碼，看這個位置：
pointer和mspointer是對ie瀏覽器的支持，能力監測來實現不一樣移動設備支持。
二，搭建全屏切換動畫
1.簡單使用
爲何要簡單分析原理，第一就是學習這種方法，用來咱們本身開發；第二就是更好的使用這個框架，第三就是基於swiper更好的擴展開發。
咱們修改demo2.html，加入咱們一些簡單動畫配置，先動起來：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
position:relative;
}
/*real css*/
.swiper-slide:nth-child(1) {
background:#FCC;
}
.swiper-slide:nth-child(2) {
background:#6CC;
}
.swiper-slide:nth-child(3) {
background:#0CF;
}
.swiper-slide:nth-child(4) {
background:#996;
}
.swiper-slide:nth-child(5) {
background:#CCF;
}
.anima1{ position:absolute; width:300px; height:300px; text-align:center; line-height:300px; font-size:30px; color:#0CF; border-radius:150px; top:50%; left:50%; margin-top:-150px; margin-left:-150px; background:#FFF;}
.anima2{position:absolute; width:300px; height:300px; text-align:center; line-height:300px; font-size:30px; color:#0CF; border-radius:150px; top:50%; left:50%; margin-top:-150px; margin-left:-150px; background:#FFF;}
.anima3{position:absolute; width:300px; height:300px; text-align:center; line-height:300px; font-size:30px; color:#0CF; border-radius:150px; top:50%; left:50%; margin-top:-150px; margin-left:-150px; background:#FFF;}
.anima4{position:absolute; width:300px; height:300px; text-align:center; line-height:300px; font-size:30px; color:#0CF; border-radius:150px; top:50%; left:50%; margin-top:-150px; margin-left:-150px; background:#FFF;}
.anima5{position:absolute; width:300px; height:300px; text-align:center; line-height:300px; font-size:30px; color:#0CF; border-radius:150px; top:50%; left:50%; margin-top:-150px; margin-left:-150px; background:#FFF;}
.swiper-slide-active .anima1{animation:animations1 2s linear 0s infinite forwards;transform-origin:center center;}
.swiper-slide-active .anima2{animation:animations2 2s ease-out 0s infinite backwards;transform-origin:center center;}
.swiper-slide-active .anima3{animation:animations3 2s ease-out 0.5s 1 forwards;transform-origin:center center;}
.swiper-slide-active .anima4{animation:animations4 2s ease-out 0s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
.swiper-slide-active .anima5{animation:animations5 2s linear 0s infinite forwards;transform-origin:center center;}
@keyframes animations1{
0%{transform:scale(1);}
50%{transform:scale(0.8);}
100%{transform:scale(1);}
}
@keyframes animations2{
0%{transform:skew(-5deg);}
50%{transform:skew(-30deg);}
100%{transform:skew(-5deg);}
}
@keyframes animations3{
0%{transform:translate(0px);opacity:0.8;}
50%{transform:translate(100px);opacity:1;}
100%{transform:translate(0px);opacity:0.8;}
}
@keyframes animations4{
0%{transform:rotatey(0deg);}
100%{transform:rotatey(360deg);}
}
@keyframes animations5{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<!-- Swiper -->
<div>
<div id="aa">
<div>
<div>動畫1</div>
</div>
<div>
<div>動畫2</div>
</div>
<div>
<div>動畫3</div>
</div>
<div>
<div>動畫4</div>
</div>
<div>
<div>動畫5</div>
</div>
</div>
<!-- Add Pagination -->
<div></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
</script>
</body>
</html>
咱們只留下5屏， 儘量的使用css3的變化效果來演示處理。
2.實踐應用
動畫好看與否，與設計稿直接掛鉤。
我在pc上找到了一個切換全屏的網站 http://mp.toutiao.com/login/ 這個網站效果相對比較簡單，咱們能夠模擬實現。
我針對第一屏寫了盤牌效果的模擬：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
position:relative;
}
/*real css*/
.swiper-slide:nth-child(1) {
background:#fff;
}
.swiper-slide:nth-child(2) {
background:#6CC;
}
.swiper-slide:nth-child(3) {
background:#0CF;
}
.swiper-slide:nth-child(4) {
background:#996;
}
.swiper-slide:nth-child(5) {
background:#CCF;
}
.pai{ position:absolute; width:200px; height:300px; text-align:center; line-height:300px; font-size:100px; color:#0CF; border-radius:30px; background:#FFF; top:50%; margin-top:-100px; border:2px solid #0CF;}
.pai1{left:140px; z-index:10;}
.pai2{left:110px;z-index:9;}
.pai3{left:80px;z-index:8;}
.swiper-slide-active .pai1{animation:pai1 3s linear 0s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai1{
0%{left:140px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:1000px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai2{animation:pai2 3s linear 0.5s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai2{
0%{left:110pxtransform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:750px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai3{animation:pai3 3s linear 1s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai3{
0%{left:80px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:500px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
</style>
</head>
<body>
<!-- Swiper -->
<div>
<div id="aa">
<div>
<div class="pai pai1">2</div>
<div class="pai pai2">3</div>
<div class="pai pai3">4</div>
</div>
<div>
<div>動畫2</div>
</div>
<div>
<div>動畫3</div>
</div>
<div>
<div>動畫4</div>
</div>
<div>
<div>動畫5</div>
</div>
</div>
<!-- Add Pagination -->
<div></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
</script>
</body>
</html>
3.全屏切換跳出和跳入的處理
假如咱們5屏動畫全ok了，用戶開始切換預覽，當用戶切換到最後一屏，在向下切換，就會跳出咱們的切換效果，顯示出正常的頁面部分，這個仍是很須要的一中處理接入，
那麼既然是跳出切換，咱們知道切換都是放在.swiper-container下，咱們判斷出用戶已經在最後一屏切換了，咱們把.swiper-container隱藏掉，而且顯示出正常部分，咱們就能夠實現跳出了。
咱們加入跳出顯示的正常結構，而且在初始狀況隱藏掉：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
position:relative;
}
/*real css*/
.swiper-slide:nth-child(1) {
background:#fff;
}
.swiper-slide:nth-child(2) {
background:#fff;
}
.swiper-slide:nth-child(3) {
background:#0CF;
}
.swiper-slide:nth-child(4) {
background:#996;
}
.swiper-slide:nth-child(5) {
background:#CCF;
}
.pai{ position:absolute; width:200px; height:300px; text-align:center; line-height:300px; font-size:100px; color:#0CF; border-radius:30px; background:#FFF; top:50%; margin-top:-100px; border:2px solid #0CF;}
.pai1{left:140px; z-index:10;}
.pai2{left:110px;z-index:9;}
.pai3{left:80px;z-index:8;}
.swiper-slide-active .pai1{animation:pai1 3s linear 0s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai1{
0%{left:140px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:1000px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai2{animation:pai2 3s linear 0.5s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai2{
0%{left:110pxtransform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:750px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai3{animation:pai3 3s linear 1s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai3{
0%{left:80px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:500px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.zhuan{position:absolute; width:100px; height:100px; text-align:center; font-size:100px; color:#0CF; border-radius:50px; background:#09F; top:50%; margin-top:-50px; left:100px;}
.swiper-slide-active .zhuan1{animation:zhuan1 5s linear 0s infinite forwards;transform-origin:300px center;}
@keyframes zhuan1{
0%{ transform:rotate(0deg) scale(1);opacity:1;}
100%{transform:rotate(360deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan2{animation:zhuan2 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(72deg);}
@keyframes zhuan2{
0%{transform:rotate(72deg) scale(1);opacity:1;}
100%{transform:rotate(432deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan3{animation:zhuan3 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(144deg);}
@keyframes zhuan3{
0%{transform:rotate(144deg) scale(1);opacity:1;}
100%{transform:rotate(504deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan4{animation:zhuan4 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(216deg);}
@keyframes zhuan4{
0%{transform:rotate(216deg) scale(1);opacity:1;}
100%{transform:rotate(576deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan5{animation:zhuan5 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(288deg);}
@keyframes zhuan5{
0%{transform:rotate(288deg) scale(1);opacity:1;}
100%{transform:rotate(648deg) scale(0.5);opacity:0.3;}
}
.normal{ display:none;}
.normal .jinru{ height:40px; line-height:40px; text-align:center;}
</style>
</head>
<body>
<!-- Swiper -->
<div>
<div id="aa">
<div>
<div class="pai pai1">2</div>
<div class="pai pai2">3</div>
<div class="pai pai3">4</div>
</div>
<div>
<div class="zhuan zhuan1"></div>
<div class="zhuan zhuan2"></div>
<div class="zhuan zhuan3"></div>
<div class="zhuan zhuan4"></div>
<div class="zhuan zhuan5"></div>
</div>
<div>
<div>動畫3</div>
</div>
<div>
<div>動畫4</div>
</div>
<div>
<div>動畫5</div>
</div>
</div>
<!-- Add Pagination -->
<div></div>
</div>
<div>
<p>我是正常的內容</p>
<div>點擊可進入切換預覽</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical'
});
</script>
</body>
</html>
由於正常內容是display：none，不會影響到咱們的切換預覽，咱們要作的就是判斷出當前在最後一屏，而且向下又切換了，而後去顯示出正常內容：
api地址：http://www.swiper.com.cn/api/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
position:relative;
}
/*real css*/
.swiper-slide:nth-child(1) {
background:#fff;
}
.swiper-slide:nth-child(2) {
background:#fff;
}
.swiper-slide:nth-child(3) {
background:#0CF;
}
.swiper-slide:nth-child(4) {
background:#996;
}
.swiper-slide:nth-child(5) {
background:#CCF;
}
.pai{ position:absolute; width:200px; height:300px; text-align:center; line-height:300px; font-size:100px; color:#0CF; border-radius:30px; background:#FFF; top:50%; margin-top:-100px; border:2px solid #0CF;}
.pai1{left:140px; z-index:10;}
.pai2{left:110px;z-index:9;}
.pai3{left:80px;z-index:8;}
.swiper-slide-active .pai1{animation:pai1 3s linear 0s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai1{
0%{left:140px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:1000px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:1000px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai2{animation:pai2 3s linear 0.5s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai2{
0%{left:110pxtransform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:750px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:750px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.swiper-slide-active .pai3{animation:pai3 3s linear 1s 1 forwards;transform-origin:center center;transform-style: preserve-3d;}
@keyframes pai3{
0%{left:80px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
40%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
60%{left:500px;transform:rotatex(0deg);color:#0CF;background:#FFF;}
80%{color:transparent;}
100%{left:500px;transform:rotatex(180deg);color:transparent;background:#0CF;}
}
.zhuan{position:absolute; width:100px; height:100px; text-align:center; font-size:100px; color:#0CF; border-radius:50px; background:#09F; top:50%; margin-top:-50px; left:100px;}
.swiper-slide-active .zhuan1{animation:zhuan1 5s linear 0s infinite forwards;transform-origin:300px center;}
@keyframes zhuan1{
0%{ transform:rotate(0deg) scale(1);opacity:1;}
100%{transform:rotate(360deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan2{animation:zhuan2 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(72deg);}
@keyframes zhuan2{
0%{transform:rotate(72deg) scale(1);opacity:1;}
100%{transform:rotate(432deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan3{animation:zhuan3 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(144deg);}
@keyframes zhuan3{
0%{transform:rotate(144deg) scale(1);opacity:1;}
100%{transform:rotate(504deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan4{animation:zhuan4 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(216deg);}
@keyframes zhuan4{
0%{transform:rotate(216deg) scale(1);opacity:1;}
100%{transform:rotate(576deg) scale(0.5);opacity:0.3;}
}
.swiper-slide-active .zhuan5{animation:zhuan5 5s linear 0s infinite forwards;transform-origin:300px center;transform:rotate(288deg);}
@keyframes zhuan5{
0%{transform:rotate(288deg) scale(1);opacity:1;}
100%{transform:rotate(648deg) scale(0.5);opacity:0.3;}
}
.normal{ display:none;}
.normal .jinru{ height:40px; line-height:40px; text-align:center; background:#09F;}
</style>
</head>
<body>
<!-- Swiper -->
<div id="swiper-container">
<div>
<div>
<div class="pai pai1">2</div>
<div class="pai pai2">3</div>
<div class="pai pai3">4</div>
</div>
<div>
<div class="zhuan zhuan1"></div>
<div class="zhuan zhuan2"></div>
<div class="zhuan zhuan3"></div>
<div class="zhuan zhuan4"></div>
<div class="zhuan zhuan5"></div>
</div>
<div>
<div>動畫3</div>
</div>
<div>
<div>動畫4</div>
</div>
<div>
<div>動畫5</div>
</div>
</div>
<!-- Add Pagination -->
<div></div>
</div>
<div id="normal">
<p>我是正常的內容</p>
<div id="jinru">點擊可進入切換預覽</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swipercontainer=document.getElementById("swiper-container");
var normal=document.getElementById("normal");
var jinru=document.getElementById("jinru");
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
onTouchEnd: function(swiper){
if(swiper.isEnd){
swipercontainer.style.display="none";
normal.style.display="block";
}else{};
}
});
jinru.onclick=function(){
swipercontainer.style.display="block";
normal.style.display="none";
swiper.slideTo(0, 1000, false);//切換到第一個slide，速度爲1秒
};
</script>
</body>
</html>
咱們利用swiper的事件，屬性和方法就實現了與外界div的跳入和跳出。
相關文章
- 1. Html 全屏切換效果
- 2. 全屏切換效果
- 3. Android Ireader的全屏與非全屏的切換效果實現
- 4. Css3動畫切換效果
- 5. activity切換動畫效果
- 6. Android:ViewPager 切換動畫效果
- 7. uni-app實現滑動切換效果
- 8. animate 實現滑動切換效果
- 9. Android成長日記-使用ViewFlipper實現屏幕切換動畫效果
- 10. AndroidScreenSlide項目切換view動畫效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • ionic 加載動畫 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
