jquery图片滚动

<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>页面滚动时动态为元素添加class的jQuery插件</title>

<link href=”http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”><!–可无视–>

<link rel=”stylesheet” type=”text/css” href=”css/demo.css”><!–可无视–>

 

<link rel=”stylesheet” href=”css/animate.css”><!–必要文件–>

<style type=”text/css”>
html,
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
body {
margin: 0 auto;
padding: 0;
}

[data-animation] {
opacity: 0;
}

[data-animation].animated {
opacity: 1;
}

#hero {
background: radial-gradient(circle at 50% center, #dee294 0%, #b7bd32 70%);
height: 100vh;
text-align: center;
}

#hero h1 small {
font-size: 50%;
}

.table-wrap {
display: table;
height: 100%;
width: 100%;
}

.table-cell {
display: table-cell;
vertical-align: middle;
}

#lower {
background: radial-gradient(circle at 50% center, #f0c916 0%, #ccad1a 70%);
overflow: hidden;
text-align: center;
min-height: 600px;
padding: 150px 0;
}

#lower img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>

</head>
<body>

<section id=”hero”>

<div class=”table-wrap”>
<div class=”table-cell”>
<h1 class=”heading” data-animation=”fadeInUp”>
页面滚动查看效果 <br>
<small>(hint: scroll down)</small>
</h1>
</div>
</div>

</section>

<section id=”lower” data-animation-container>

<h1 data-animation=”fadeIn” data-animation-child>
An animation set!
</h1>

<div class=”container”>
<div class=”row”>

<div class=”col-sm-4″ data-animation-child data-animation=”fadeInUp” data-animation-delay=”500ms”>
<img src=”img/1.jpg” alt=”” class=”img-responsive center-block”>
</div>
<div class=”col-sm-4″ data-animation-child data-animation=”fadeInUp” data-animation-delay=”1500ms”>
<img src=”img/2.jpg” alt=”” class=”img-responsive center-block”>
</div>
<div class=”col-sm-4″ data-animation-child data-animation=”fadeInUp” data-animation-delay=”2500ms”>
<img src=”img/3.jpg” alt=”” class=”img-responsive center-block”>
</div>

</div>
<!– /.row –>
</div>
<!– /.container –>

</section>

 

<script type=”text/javascript” src=”js/jquery-1.11.0.min.js”></script>
<script type=”text/javascript” src=”js/jquery.scrollAnimations.min.js”></script>
<script type=”text/javascript”>
(function(){
var $containers = $(‘[data-animation]:not([data-animation-child]), [data-animation-container]’);
$containers.scrollAnimations();
}());
</script>

</body>
</html>

posted on 2018-08-23 16:21 穿着蜜蜂秋裤的小短腿 阅读() 评论() 编辑 收藏

版权声明:本文为xiaomiaotong原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xiaomiaotong/p/9524520.html