这次是网页端的,结合一滚一屏和animate制作了一个打开来就进行动画展示的网站,纯粹观赏性的。
第一次用上了bootstrap
完成时间2016年12月份
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/animate.css">
<title>百度音乐</title>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
</head>
<body>
<header id="header">
<div class="main-nav-wrapper">
<div class="main-nav">
<a class="logo"><img src="images/logo.png"></a>
<div class="nav">
<div class="navbar-item">
<a href="#">
<span class="inner">手机版</span>
</a>
</div>
<div class="nav-item actived">
<a href="#">
<span class="inner">PAD版</span>
</a>
</div>
<div class="nav-item">
<a href="#">
<span class="inner">PC版</span>
</a>
</div>
<div class="nav-item">
<a href="#">
<span class="inner">社区</span>
<!--<i class="iconfont new-func"></i>-->
</a>
</div>
</div>
</div>
</div>
</header>
<div class="guding">
<img src="images/qrcode.png" title="二维码" alt="二维码">
<p class="qrcode-text">扫描二维码下载</p>
</div>
<div id="fullpage">
<div class="section page01">
<div class="pic">
<div class="pic_text"></div>
<div class="pic1"></div>
<div class="pic2"></div>
</div>
</div>
<div class="section page02">
<div class="pic">
<div class="pic3"></div>
<div class="pic4"></div>
<div class="pic5"></div>
<div class="pic6"></div>
<div class="pic7"></div>
<div class="pic8"></div>
<div class="pic9"></div>
<div class="pic10"></div>
<div class="pic11"></div>
</div>
</div>
<div class="section page03">
<div class="pic">
<div class="pic12"></div>
<div class="pic13"></div>
<div class="pic14"></div>
</div>
</div>
<div class="section page04">
<div class="pic">
<div class="pic15">
<div class="pic15_1"></div>
<div class="pic15_2"></div>
</div>
<div class="pic16"></div>
</div>
</div>
<div class="section page05">
<div class="pic">
<div class="pic17"></div>
<div class="pic18"></div>
</div>
</div>
<div class="section page06">
<div class="pic">
<div class="pic19"></div>
<div class="pic20">
<img src="images/ipad-qr-code.png" title="二维码" alt="二维码">
<p class="qrcode-text">扫描二维码下载</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
verticalCentered:false,
navigation:false,
navigationPosition:"left",
slidesNavigation:false,
afterLoad:function (anchorLink,index) {
if(index === 1){
$(".page01 .pic1").addClass("animated fadeIn wow")
$(".page01 .pic2").addClass("animated fadeInLeft wow")
}
else if (index === 2)
{
$(".page02 .pic").addClass("animated fadeInRight wow")
}
else if (index === 3)
{
$(".page03 .pic").addClass("animated fadeInUp wow")
}
else if (index === 4)
{
$(".page04 .pic15").addClass("animated fadeInLeft wow")
$(".page04 .pic16").addClass("animated fadeInRight wow")
}
else if (index === 5)
{
$(".page05 .pic17").addClass("animated fadeIn wow")
$(".page05 .pic18").addClass("animated fadeIn wow")
}
else if (index === 6)
{
$(".page06 .pic20").addClass("animated bounce wow")
}
}
});
});
</script>
</body>
</html>
图片展示还是蛮好看的,不知道这里博客能不能展示动图,所以我这里就只展示静态图片了。
这里图片的元素都是分开来的,可以看到动态效果的。