html5翻頁+動(dòng)畫效果

時(shí)間：2023-09-06 06:00:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-06 06:00:02 來源：網(wǎng)站運(yùn)營

html5翻頁+動(dòng)畫效果：最近使用html5+css3,開發(fā)了一個(gè)h5的動(dòng)畫效果的網(wǎng)站；




使用技術(shù)：

1、使用swiper和animate插件，實(shí)現(xiàn)頁面部分內(nèi)容的動(dòng)畫效果； 2、翻到當(dāng)前頁面，數(shù)字滾動(dòng)效果； 3、音頻audio，播放兼容ios(只適用于微信瀏覽器) 4、添加一個(gè)自定義的動(dòng)畫效果；（手機(jī)瀏覽器兼容有問題）

一、翻頁

（1）index.js代碼引入：

scaleW=window.innerWidth/320;

scaleH=window.innerHeight/480;

var resizes = document.querySelectorAll('.resize');

for (var j=0; j<resizes.length; j++) {

resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';

resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';

resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';

resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';

}

var scales = document.querySelectorAll('.txt');

for (var i=0; i<scales.length; i++) {

ss=scales[i].style;

ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';

}

//翻頁

var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
pagination: '.swiper-pagination',
mousewheelControl : true,
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
}
})

<div class="container swiper-container">

<div class="swiper-wrapper">

<section class="swiper-slide">頁面1</section>

<section class="swiper-slide">頁面2</section>

<section class="swiper-slide">頁面3</section>

</div>

</div>

（2）相應(yīng)位置添加動(dòng)畫效果：（控制動(dòng)畫的效果、執(zhí)行時(shí)間、延遲時(shí)間）

二、數(shù)字滾動(dòng)效果

方法一：測試有bug (提示shift錯(cuò)誤)

注：要在翻到當(dāng)前頁面時(shí)，執(zhí)行數(shù)字滾動(dòng)想過；所以放到mySwiper代碼內(nèi)部；

方法二：（只兼容pc,手機(jī)瀏覽無效果）




// var areaNum=$("#areaNum");

// add(areaNum,510000,1000);

// var number=0;

// var time;

// function add(obj,endNum,n){

// time=setInterval(function(){

// if( number<endNum){

// number=number+n;

// }

// obj.html(number);

// },10);

// if(obj.html()>endNum){

// clearInterval(time);

// }

// }

三、音頻播放

方法一：

// 背景音樂兼容ios和手機(jī)瀏覽器

//--創(chuàng)建頁面監(jiān)聽，等待微信端頁面加載完畢 觸發(fā)音頻播放

document.addEventListener('DOMContentLoaded', function () {

function audioAutoPlay() {

var audio = document.getElementById('audio');

audio.play();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.play();

}, false);

}

audioAutoPlay();

});

//--創(chuàng)建觸摸監(jiān)聽，當(dāng)瀏覽器打開頁面時(shí)，觸摸屏幕觸發(fā)事件，進(jìn)行音頻播放

document.addEventListener('touchstart', function () {

function audioAutoPlay() {

var audio = document.getElementById('audio');

audio.play();

}

audioAutoPlay();

});

方法二：

// 背景音樂兼容iOS（微信瀏覽器）

// setTimeout(function(){

// $(window).scrollTop(1);

// },0);

// document.getElementById('car_audio').play();

// document.addEventListener("WeixinJSBridgeReady", function () {

// WeixinJSBridge.invoke('getNetworkType', {}, function (e) {

// document.getElementById('car_audio').play();

// });

// }, false);

四、自定義動(dòng)畫效果；（大雁從左往右移動(dòng)）

animate.min.css

/*大雁*/

@keyframes bird{

0% {

transform:translateX(-1rem);

-webkit-transform:translateX(-1rem);

-moz-transform:translateX(-1rem);

}

100% {

transform:translateX(8.4rem);

-webkit-transform:translateX(8.4rem);

-moz-transform:translateX(8.4rem);

}

}

.bird{

-webkit-animation:bird 500s linear infinite; //無限循環(huán)

-moz-animation:bird 500s linear infinite;

-ms-animation:bird 500s linear infinite;

animation:bird 500s linear infinite;

}