html5图片自动滚动效果,html5——全屏滚动

鼠标滚轮

window.onmousewheel=function(){};

基本描述

1、我们使用插件fullpage，为了更好的兼容性

2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类

3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加

Title

* {

padding: 0;

margin: 0;

}

.first.current h3 {

/*过渡 入场需要过渡 ，出场快速..*/

transition: all 1s;

transform: translateX(200px) translateY(200px);

}

第一屏

第二屏

第三屏

第四屏

第五屏

//调用全屏的方法

$(function () {

$('#dowebok').fullpage({

//设置每一屏幕的颜色

sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],

//loopTop:true,

// 滚到某一屏之后调用

afterLoad: function (link, index) {

// index 当前section的编号

// current类加给谁 谁就做动画

$('.section').removeClass('current');

// 让动画 延迟执行100ms

setTimeout(function () {

$('.section').eq(index - 1).addClass('current');

}, 100);

}

});

});

网址：http://www.dowebok.com/77.html

来源：https://www.cnblogs.com/wuqiuxue/p/8086662.html