jquery图片滚动

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30613727

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaomiaotong/p/9524520.html

版权

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

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

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

</section>

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

</div>

</div>

</section>

</body>
</html>

转载于:https://www.cnblogs.com/xiaomiaotong/p/9524520.html

weixin_30613727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-w...
复制链接

扫一扫