This demo is just a general idea of a JS WeChat music album case, and it needs to be done according to the situation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="" rel="external nofollow" >
<link rel="stylesheet" href="" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="" rel="external nofollow" >
<style>
html,body{
width:100%;
height:100%;
overflow:hidden;
}
html{
font-size:100px;/*Design draft 640*960*/
}
.main,.swiper-container,.swiper-slide{
width:100%;
height:100%;
overflow:hidden;
}
.page1{
position:relative;
background:url("../img/swiper/") no-repeat;
background-size:cover;
}
.page1 img{
position:absolute;
opacity:0;
}
.page1 img:nth-child(1){
left:2rem;
top:.28rem;
width:.96rem;
height:2.32rem;
}
.page1 img:nth-child(2){
right:0;
top:.28rem;
width:3.7rem;
height:6rem;
}
.page1 img:nth-child(3){
left:.5rem;
bottom:.8rem;
width:5.5rem;
height:5.12rem;
}
.page1 img:nth-child(4){
left:-1.6rem;
bottom:0;
width:7.86rem;
height:5.88rem;
}
/*Realize the idea that after the switching is completed, the elements in the page start to move: at the beginning, the current area does not have a corresponding ID. When switching to this area, we add the ID to it. In css, we put all animation effects under the specified ID. In this way, we only need to let the area have an ID, and the child elements inside have animations*/
#page1 img:nth-child(1){
/*Note that you can write two sets of mobile styles and do not add webkit in the back*/
-webkit-animation:bounceInLeft 1s linear 0s 1 both;
animation:bounceInLeft 1s linear 0s 1 both;
}
#page1 img:nth-child(2){
/*Note that you can write two sets of mobile styles and do not add webkit in the back*/
-webkit-animation:bounceInRight 1s linear .3s 1 both;
animation:bounceInRight 1s linear .3s 1 both;
}
#page1 img:nth-child(3){
/*Note that you can write two sets of mobile styles and do not add webkit in the back*/
-webkit-animation:bounceInUp 1s linear .6s 1 both;
animation:bounceInUp 1s linear .6s 1 both;
}
#page1 img:nth-child(4){
/*Note that you can write two sets of mobile styles and do not add webkit in the back*/
-webkit-animation:bounceInUp 1s linear .9s 1 both;
animation:bounceInUp 1s linear .9s 1 both;
}
.page2{
position:relative;
background:url("../img/swiper/") no-repeat;
background-size:cover;
}
.page2 img{
position:absolute;
top:2.5rem;
opacity:0;
}
.page2 img:nth-child(1){
top:0;
left:0;
width:3.4rem;
height:1.74rem;
}
.page2 img:nth-child(2){
left:1.48rem;
}
.page2 img:nth-child(3){
left:3.2rem;
}
.page2 img:nth-child(4){
left:4.7rem;
}
#page2 img:nth-child(1){
-webkit-animation:bounceInLeft 1s linear 0s 1 both;
animation:bounceInLeft 1s linear 0s 1 both;
}
#page2 img:nth-child(2){
-webkit-animation:zoomIn 1s linear .3s 1 both;
animation:zoomIn 1s linear .3s 1 both;
}
#page2 img:nth-child(3){
-webkit-animation:zoomIn 1s linear .6s 1 both;
animation:zoomIn 1s linear .6s 1 both;
}
#page2 img:nth-child(4){
-webkit-animation:zoomIn 1s linear .9s 1 both;
animation:zoomIn 1s linear .9s 1 both;
}
.arrow{
position:absolute;
left:50%;
bottom:.2rem;
z-index:10;
margin-left:-.24rem;
width:.48rem;
height:.36rem;
background:url("../img/swiper/") no-repeat;
background-size:100% 100%;
-webkit-animation:bounce 1s linear 0s infinite both;
animation:bounce 1s linear 0s infinite both;
}
.music{
display:none;
position:absolute;
top:.2rem;
right:.2rem;
z-index:10;
width:.6rem;
height:.6rem;
background:url("../audio/") no-repeat;
background-size:100% 100%;
}
.{
-webkit-animation :musicMove 1s linear 0s infinite both;
animation :musicMove 1s linear 0s infinite both;
}
.music audio{
display:none;
}
@-webkit-keyframes musicMove{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes musicMove{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<section class='main'>
<!--MUSIC-->
<div class='music' id='musicMenu'>
<audio src="beyond.mp3" preload = 'none' loop autoplay></audio id='musicAudio'>
<!-- <audio>
<source src='beyond.mp3' type='audio/mpeg'/>
<source src='' type='audio/wav'/>
<source src='' type='audio/ogg'/>
</audio> -->
</div>
<!--CONTAINER-->
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide page1'>
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
</div>
<div class='swiper-slide page2'>
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
<img src="img/swiper/" alt="">
</div>
</div>
</div>
<!--ARROW-->
<div class='arrow'></div>
</section>
<script charset='utf-8' src=''></script>
<script>
//rem
~function(){
var desW = 640,
winW = ,
ratio = winW / desW,
oMain = (".main");
if(winW>desW){
= "0 auto";
= desW + 'px';
return;
}
= ratio*100+"px";
}()
new Swiper('.swiper-container',{
direction:"vertical",
loop:true,
/*When the switching is completed, add the corresponding ID to the currently displayed area, thereby achieving the corresponding animation effect*/
onSlideChangeEnd:function(swiper){
var slideAry = ;//Get how many activities are fast at present (including two additional activities added before and after the loop mode) var curIn = ;//The index of the currently displayed area var total = ;
//Is the calculation ID PAGE? var targetId = 'page';
switch(curIn){
case 0:
targetId += total - 2;
break;
case total - 1:
targetId += 1;
break;
default:
targetId += curIn
}
// Just set the ID for the current active block, and remove the rest. [].(slideAry,function(item,index){
if(curIn === index){
= targetId;
return;
}
= null;
})
slideAry[curIn].id = targetId;
// Finally add opacity:1 in the animation to the end }
})
//MUSIC
~function(){
var musicMenu = ('musicMenu'),
musicAudio = ('musicAudio');
('click',function(){
if(){
();
= "music move";
return;
}
();
= "music";
})
function controlMusic(){
= 0.1;
();
('canplay',function(){
= "block";
= "music move";
})
}
(controlMusic,1000)
}()
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.