<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="skrollr.js"></script>
<style>
#info {
position: fixed;
top: 20px;
left: 20px;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
z-index: 9999;
}
section {
height: 5000px;
}
#slide-1 .bcg {
height: 100%;
width: 100%;
background-image: url('img/bcg_paper.png');
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
}
#scrollBaby {
width: 184px;
height: 286px;
background: url('img/img_get-scrolling.png') no-repeat top left;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -92px;
}
#slide-1 #tree {
width: 380px; height: 550px;
position: fixed;
top: 50%;
left: 50%;
margin: -275px 0 0 -190px;
}
#slide-1 .item {position: absolute; top: 0; left: 0;}
#slide-1 .tree1 {bottom: 426px; left: 100px; top: auto;}
#slide-1 .tree2 {bottom: 309px; left: 73px; top: auto;}
#slide-1 .tree3 {bottom: 205px; left: 30px; top: auto;}
#slide-1 .tree4 {bottom: 101px; left: 14px; top: auto;}
#slide-1 .trunk {bottom: 87px; left: 167px; top: auto;}
#slide-1 .pot {bottom: 20px; left: 130px; top: auto;}
#slide-1 .shadow {bottom: 0; left: 24px; top: auto;}
</style>
<title>HTML5鼠标滚动树生长过程特效 - 网页模板</title>
</head>
<body>
<div id="info">0</div>
<section id="slide-1">
<div class="bcg"></div>
<div id="scrollBaby"
data-top="transform:translateY(0px)"
data--875-top="transform:translateY(300px)"
data-anchor-target="#slide-1"
></div>
<div id="tree">
<div class="item tree1"
data-top="opacity: 0;"
data--1600-top="opacity: 0; transform: scale(0.5); bottom: 71px;"
data--2000-top="opacity: 1; transform: scale(0.5); bottom: 90px;"
data--4000-top="opacity: 1; transform: scale(1); bottom: 426px;"
data-anchor-target="#slide-1"
><img src="img/img_tree-p1.png"></div>
<div class="item tree2"
data-top="opacity: 0; transform: scale(0.3); bottom: 71px;"
data--2000-top="opacity: 0; transform: scale(0.3); bottom: 71px;"
data--2212-top="opacity: 1; transform: scale(0.45); bottom: 81px;"
data--4000-top="opacity: 1; transform: scale(1); bottom: 309px;"
data-anchor-target="#slide-1"
><img src="img/img_tree-p2.png"></div>
<div class="item tree3"
data-top="opacity: 0; transform: scale(0.3);"
data--2212-top="opacity: 0; transform: scale(0.3); bottom: 71px;"
data--2700-top="opacity: 1; transform: scale(0.55); bottom: 81px;"
data--4000-top="opacity: 1; transform: scale(1); bottom: 205px;"
data-anchor-target="#slide-1"
><img src="img/img_tree-p3.png"></div>
<div class="item tree4"
data-top="opacity: 0; transform: scale(0.3);"
data--3000-top="opacity: 0; transform: scale(0.52);"
data--3300-top="opacity: 1; transform: scale(0.60);"
data--4000-top="opacity: 1; transform: scale(1);"
data-anchor-target="#slide-1"
><img src="img/img_tree-p4.png"></div>
<div class="item trunk"
data-top="opacity: 0;"
data--1600-top="opacity: 0; transform: scale(0.3, 0.6);"
data--2000-top="opacity: 1; transform: scale(0.3, 0.6);"
data--4000-top="transform: scale(1,1);"
data-anchor-target="#slide-1"
><img src="img/img_trunk.png"></div>
<div class="item pot" data-top="opacity: 0; transform:translateY(-800px)" data--875-top="opacity: 1; transform[bounce]:translateY(-200px)" data--1500-top="opacity: 1; transform[bounce]:translateY(0)" data-anchor-target="#slide-1"><img src="img/img_pot.png"></div>
<div class="item shadow"
data-top="opacity: 0; transform: scale(0.6);"
data--3000-top="opacity: 0.2; transform: scale(0.6);"
data--4000-top="opacity: 1; transform: scale(1);"
data-anchor-target="#slide-1"
><img src="img/img_shadow.png"></div>
</div>
</section>
<script>
var s = skrollr.init({
render: function(data) {
//Log the current scroll position.
$('#info').text(data.curTop);
}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
HTML5鼠标滚动树生长过程特效.zip
版权申诉
201 浏览量
2022-11-18
22:14:03
上传
评论
收藏 127KB ZIP 举报
HTML5鼠标滚动树生长过程特效.zip （13个子文件） 
HTML5鼠标滚动树生长过程特效 
HTML5鼠标滚动树生长过程特效.jpg 54KB jiaoben4214 
jquery.js 90KB skrollr.js 45KB img 
img_shadow.png 8KB img_tree-p2.png 5KB img_trunk.png 1KB img_tree-p3.png 6KB bcg_paper.png 1KB img_get-scrolling.png 5KB img_tree-p4.png 6KB img_pot.png 3KB img_tree-p1.png 4KB
index.html 5KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 基于python+JavaScript实现的医学影像分割+源代码+文档说明+截图演示+数据(高分毕业设计)
- 基于U-net+pytorch实现的医学影像分割python源码+文档说明+数据+界面截图+博客介绍
- 课程设计-基于Pytorch实现MNIST数据集的手写数字识别源码+数据(Gui界面)+文档说明+模型
- 软件开发国家标准.xls
- pytorch-CNN-SBATM-ubuntudemo
- matplotlibdemo
- pytorch-CNN-dht11温湿度传感器笔记
- 软件研发管理体系文件清单(推荐文档).xls
- 软件资产管理台账(精品文档).xls
- shenling-master.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
