html5翻页+动画效果

时间：2023-09-06 06:00:02 | 来源：网站运营

时间：2023-09-06 06:00:02 来源：网站运营

html5翻页+动画效果：最近使用html5+css3,开发了一个h5的动画效果的网站；




使用技术：

1、使用swiper和animate插件，实现页面部分内容的动画效果； 2、翻到当前页面，数字滚动效果； 3、音频audio，播放兼容ios(只适用于微信浏览器) 4、添加一个自定义的动画效果；（手机浏览器兼容有问题）

一、翻页

（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）相应位置添加动画效果：（控制动画的效果、执行时间、延迟时间）

二、数字滚动效果

方法一：测试有bug (提示shift错误)

注：要在翻到当前页面时，执行数字滚动想过；所以放到mySwiper代码内部；

方法二：（只兼容pc,手机浏览无效果）




// 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和手机浏览器

//--创建页面监听，等待微信端页面加载完毕 触发音频播放

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

function audioAutoPlay() {

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

audio.play();

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

audio.play();

}, false);

}

audioAutoPlay();

});

//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放

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);

四、自定义动画效果；（大雁从左往右移动）

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; //无限循环

-moz-animation:bird 500s linear infinite;

-ms-animation:bird 500s linear infinite;

animation:bird 500s linear infinite;

}