本例子主要记录的是一个滚滚屏效果的demo:
如下图所示,当滚轮滚动到第二页面/或者通过右侧圆点点击第二个圆点时,执行第二页的动画效果
关于基本的页面布局结构就不多说了,直接贴上代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mousewheel</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container" id="container">
<div id="box">
<div class="con zIndex" id="one" style="z-index: 3">
<div class="con1-left"><img src="./img/1.jpg" alt=""></div>
<div class="con1-right"><img src="./img/2.jpg" alt=""></div>
</div>
<div class="con" id="two">
<div class="con2">
<img src="./img/3.jpg" alt="">
</div>
</div>
<div class="con" id="three">
<div class="con3-top"><img src="./img/4.jpg" alt=""></div>
<div class="con3-bottom"><img src="./img/5.jpg" alt=""></div>
</div>
</div>
<ol id="list" class="list">
</ol>
</div>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>
接下来就是,对上述的html通过css控制显示样式了;
下述代码可能看着有点乱这里稍微说明一下
(1)首先,我这里只是简单的进行了css的reset去除一下边距样式等;
(2)其次,记得加上html,body{height: 100%}只有加上了这个才能让我们写的一个con占满一整个屏幕;
(3)接下来,就是针对每一个需要实现的动画,编写其最终状态,以及利用animation增加动画效果;
* {
margin: 0px;
padding: 0px;
}
ul li,ol li{
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
}
.con {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
}
.con:nth-child(2){
display: flex;
justify-content: center;
align-items: center;
}
/*设置动画 状态*/
.con .test {
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.con .con1-left{
position: absolute;
left: 100px;
top: 100px;
}
.con .con1-right{
position: absolute;
left: auto;
right: 20px;
top: 100px;
}
.con .con2 img{
border-radius: 50%;
}
/*设置 动画*/
.con.active .test {
animation: anim 2s;
}
.con.active .con1-left{
animation: con1Left 2s 0.1s;
}
.con.active .con1-right{
animation: con1Right 2s 0.1s;
}
@-webkit-keyframes con1Left {
0% {
left: 0px;
transform: scale(1.2);
}
50% {
transform: scale(1.4) rotate(360deg);
}
100% {
left: 100px;
transform: scale(1);
}
}
@-webkit-keyframes con1Right {
0% {
right: 100px;
transform: scale(1.2);
}
50% {
transform: scale(1.4) rotate(360deg);
}
100% {
right: 20px;
transform: scale(1);
}
}
.con.active .con2{
animation: con2 2s;
}
@-webkit-keyframes con2 {
0% {
transform: scale(1.2);
}
50% {
transform: scale(1.4);
}
100% {
border-radius: 50%;
transform: scale(1) rotate(360deg);
}
}
.con.active .con3-top{
animation: con3Top 2s;
}
.con.active .con3-bottom{
animation: con3Bottom 2s;
}
@-webkit-keyframes con3Top {
0% {
transform: translateY(-100px);
transform: scale(1.2);
}
50% {
transform: scale(1.4);
}
100% {
transform: rotate(30deg);
}
}
@-webkit-keyframes con3Bottom {
0% {
transform: translateY(500px);
transform: scale(1.2);
}
50% {
transform: scale(1.4);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@-webkit-keyframes anim {
0% {
-webkit-transform: translateX(50px) scale(1.2));
-moz-transform: translateX(50px) scale(1.2);
-ms-transform: translateX(50px) scale(1.2);
-o-transform: translateX(50px) scale(1.2);
transform: translateX(50px) scale(1.2);
}
50% {
-webkit-transform: translateX(0px) scale(.8);
-moz-transform: translateX(0px) scale(.8);
-ms-transform: translateX(0px) scale(.8);
-o-transform: translateX(0px) scale(.8);
transform: translateX(0px) scale(.8);
}
100% {
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-ms-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
@keyframes anim {
0% {
-webkit-transform: translateX(50px) scale(1.2));
-moz-transform: translateX(50px) scale(1.2);
-ms-transform: translateX(50px) scale(1.2);
-o-transform: translateX(50px) scale(1.2);
transform: translateX(50px) scale(1.2);
}
50% {
-webkit-transform: translateX(0px) scale(.8);
-moz-transform: translateX(0px) scale(.8);
-ms-transform: translateX(0px) scale(.8);
-o-transform: translateX(0px) scale(.8);
transform: translateX(0px) scale(.8);
}
100% {
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-ms-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
.container .list {
position: absolute;
right: 10px;
top: 45%;
z-index: 20;
}
.container .list li {
width: 20px;
height: 20px;
border: 3px solid transparent;
background-color: #00f;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-bottom: 10px;
opacity: 0.5;
z-index: 20;
}
.container .list li.current {
border: 3px solid #fff;
background-color: #1c1c1c;
opacity: 1;
animation: point 1s 0.2s;
}
@keyframes point {
0% {
transform: scale(.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
最后,就是控制整个滚滚屏进行页面切换的js了,以下主要分成两大块内容,common.js是编写好的能够进行复用的缓动动画效果,以及鼠标滚轮事件;index.js就是真正的控制显示的代码了。
//common.js
(function mouseWheel() {
if (document.addEventListener) {
document.addEventListener('mousewheel', function(event) {
Detail(event);
});
document.addEventListener('DOMMouseScroll', function(event) {
Detail(event);
});
} else if(document.addEventListener&&!document.attachEvent){
document.attachEvent('onmousewheel', function(event) {
Detail(event);
});
}
})();
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;//放在这儿只要有一个返回false那就是false
for (var k in json) {
//var flag = true;//如果放在这儿变成查看最后一个执行的情况,执行好了返回true,未完成返回false
if(k === "opacity"){
var target = json[k]*100;
var leader = parseInt(getStyle(obj, k))*100;
var step = (target - leader) / 5;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader/100;
}else if(k === "zIndex"){
obj.style.zIndex = json[k];
}else{
var target = json[k];
var leader = parseInt(getStyle(obj, k));
var step = (target - leader) / 5;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
console.log("test");
obj.style[k] = leader + "px";
}
if (leader !== target) {
flag = false;
}
console.log(flag);
}
if(flag){
clearInterval(obj.timer);
if (fn) {
fn();
alert("shizingle");
}
}
}, 15);
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
//index.js
(function mouseWheel() {
if (document.addEventListener) {
document.addEventListener('mousewheel', function(event) {
Detail(event);
});
document.addEventListener('DOMMouseScroll', function(event) {
Detail(event);
});
} else if (document.addEventListener && !document.attachEvent) {
document.attachEvent('onmousewheel', function(event) {
Detail(event);
});
}
})();
var container = document.getElementById("container");
var list = document.getElementById("list");
var box = document.getElementById("box");
var cons = box.children;
//此处设置第一页面为默认显示页面
cons[0].style.top = 0;
var zIdx = 10;
var nn = 0;
var currentPosition = 0;
//添加小圆点
var arr = ["#fafafa", "#cacaca", "#dadada"];
for (var i = 0; i < cons.length; i++) {
cons[i].style.backgroundColor = arr[i];
var li = document.createElement("li");
list.appendChild(li);
list.children[i].idx = i;
//点击小圆点切换显示页面
list.children[i].onclick = function() {
for (var i = 0; i < list.children.length; i++) {
list.children[i].className = "";
cons[i].style.zIndex = 1;
// 如果想要执行一次动画之后就下一次进入页面不再有动画,只要不清空产生动话的active就可以了
cons[currentPosition].className = "con";
if(i !== currentPosition){
cons[i].style.top = "100%";
}
}
currentPosition = this.idx;
this.className = "current";
cons[currentPosition].style.zIndex = zIdx;
cons[currentPosition].className = "con active";
animate(cons[currentPosition], {
"top": "0"
});
};
}
list.children[0].className = "current";
//e.wheelDelta > 0滚轮向下滚动,e.wheelDelta < 0表示滚轮向上滚动
function Detail(event) {
var e = event || window.event;
if ((-e.detail || e.wheelDelta) > 0) {
var bgc = cons[currentPosition].style.backgroundColor;
document.body.style.backgroundColor = bgc;
currentPosition++;
if (currentPosition > cons.length - 1) {
currentPosition = 0;
}
for (var i = 0; i < cons.length; i++) {
cons[i].style.zIndex = 1;
list.children[i].className = "";
cons[i].className = "con";
if(i !== currentPosition){
cons[i].style.top = "-100%";
}
}
console.log(currentPosition);
cons[currentPosition].style.zIndex = zIdx;
cons[currentPosition].className = "con active";
animate(cons[currentPosition], {
"top": "0"
});
list.children[currentPosition].className = "current";
} else {
var bgc = cons[currentPosition].style.backgroundColor;
document.body.style.backgroundColor = bgc;
currentPosition--;
if (currentPosition < 0) {
currentPosition = cons.length - 1;
}
for (var i = 0; i < cons.length; i++) {
cons[i].style.zIndex = 1;
list.children[i].className = "";
cons[i].className = "con";
if(i !== currentPosition){
cons[i].style.top = "100%";
}
}
console.log(currentPosition);
cons[Math.abs(currentPosition)].style.zIndex = zIdx;
cons[currentPosition].className = "con active";
animate(cons[currentPosition], {
"top": "0"
});
list.children[Math.abs(currentPosition)].className = "current";
}
}