滚动div的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.sq{width: 200px;height: 300px;background-color: green;padding-top: 100px;}
.sq p{
-webkit-transform: translate3d(0,-100px,0);
-moz-transform: translate3d(0,-100px,0);
-o-transform: translate3d(0,-100px,0);
-ms-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-o-transition: opacity 0.35s, -o-transform 0.35s;
-ms-transition: opacity 0.35s, -ms-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.sq:hover p{
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
ul{position: fixed;left: 70%;top: 50%;}
.q1{padding-top: 500px;}
.q2{}
</style>
<body>
<ul>
<li><a href="#q1">1</a></li>
<li><a href="#q2">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>454646
56456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<button>返回垂直滚动条的位置</button>
<div id="q1">
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
<p>q1q1q1q1q1q1</p>
</div>
<div id="q2">
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p><p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
<p>22222222222222222</p>
</div>
<div class="sq">
<p class="sqp">叫撒点开始卡了点空间就凉快凉快水电费</p>
</div>
<a href="#" id="playButton">Play</a>
<div class="box"></div>
<p>45464656456456564</p>
<p>45464656456456564</p>
<p>45464656456456564</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.min.js"></script>
<script>
$(function(){
$("button").click(function(){
//alert($("body").scrollTop());
move('.sq').x(300).end();
});
var offset = 254;
$back_to_top = $('p');
$(window).scroll(function() {
if ($("body").scrollTop() > 254) {
/*$('.sqp').addClass('cd-is-visible');*/
//alert($("body").scrollTop());
move('.sq')
.to(500, 200)
.rotate(180)
.scale(0.5)
.set('background-color', '#FF0551')
.set('border-color', 'black')
.duration('3s')
.skew(50, -30)
.then()
.set('opacity', 0)
.duration('0.3s')
.scale(.1)
.pop()
.delay(2000)
.end();
/*.set('background-color', 'red')
.x(500)
.scale(.5)
.rotate(60)
.then()
.rotate(30)
.scale(1.5)
.set('border-radius', 5)
.set('background-color', 'white')
.then()
.set('opacity', 0)
.pop()
.pop()
.end();*/
}
});
})
</script>
</body>
</html>
滚动div的动画的更多相关文章
- JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 网站滑到指定的位置给div添加动画效果
<!DOCTYPE html> <html> <head> <style> .anim-show { width:100px; height:100px ...
- 横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
随机推荐
- SqlServer性能优化 手工性能收集动态管理视图（三）
动态管理视图: 具体的实例语句: --关于语句执行的基本情况 select * from sys.dm_exec_query_stats --动态管理函数 需要提供参数 select top 1 ...
- Linux压缩那些事儿
tar简介 Linux的压缩命令的源文件只能有一个,这意味在压缩之前不得不先将要压缩的所有文件打包成一个包,然后再压缩包,这样来完成对多个文件的压缩.所以在了解解压缩之前就必须先了解打包命令. Lin ...
- 创建Windows截图工具的快捷方式
日常生活中我们会用到好多截图,一般截图我们用QQ自带截图较多,但许多人都忽视了电脑自带截图功能.在我的电脑-->附件-->截图工具 按照上述方式找截图工具比较繁琐,今天我们可以通过快捷 ...
- bootstrap-6
表格:bootstrap为表格提供了1种基础样式和4种附加样式以及一个支持响应式的表格.主要包括: .table:基础表格 .table-striped:斑马线表格 .table-bordered:带 ...
- OC 属性
1 属性和实例变量 :属性 == 实例变量声明 + setter 方法+ getter 方法 在老版本的 OC 语言中,我们需要同时声明属性和底层实例变量,那时,属性是 OC 语言的一个新的机制,并 ...
- 关于CSS的那些事？
关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错 ...
- 《C与指针》第六章练习
本章问题 1.如果一个值的类型无法简单的通过观察它的位模式来判断,那么机器是如何知道应该怎样对这个值进行操纵的? answer:The machine doesn't make this determ ...
- RobotFramwork + Appium+ Andriod 环境搭建
RF+Appium+Android环境搭建教程 - 1.RF安装 一.适用操作系统 Win7 旗舰版Sp1 32位操作系统 RF环境搭建,请参考文档<RobotFramwork安装指南> ...
- 主题：Android、iPhone和Java三个平台一致的加密工具
先前一直在做安卓,最近要开发iPhone客户端,这其中遇到的最让人纠结的要属Java.Android和iPhone三个平台加解密不一致的问题.因为手机端后台通常是用JAVA开发的Web Service ...
- Java的委托
http://www.cnblogs.com/soojoe/archive/2012/04/12/2532304.html 委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个对象参与处理同一 ...