欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery图片滚动

程序员文章站 2022-05-04 14:02:41

<!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>