滚动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 ...
随机推荐
- PCL中的类
1. PCLBase pcl_base.h中定义了PCL中的基类PCLBase,PCL中的大部分算法都使用了其中的方法. PCLBase实现了点云数据及其索引的定义和访问. 两个主要的变量input_ ...
- Context的使用(转)
1.Context概念 Context,相信不管是第一天开发Android,还是开发Android的各种老鸟,对于Context的使用一定不陌生~~你在加载资源.启动一个新的Activity.获取系统 ...
- 十分钟了解分布式计算:GraphLab
GraphLab是一个面向大规模机器学习/图计算的分布式内存计算框架,由CMU在2009年开始的一个C++项目,这里的内容是基于论文 Low, Yucheng, et al. "Distri ...
- Insert Interval
在已经排好序的区间中,插入一个新的区间,与merge的做法类似 Given a set of non-overlapping intervals, insert a new interval into ...
- sql CONCAT字符串连接函数
有的时候,我们有需要将由不同栏位获得的资料串连在一起.每一种资料库都有提供方法来达到这个目的: MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + C ...
- oracle 跨数据库取数据
思路:先从另一个数据库里把数据取出来, 然后,把这个数据集合解析,根据这个数据集合拆分组合成一个创建oralce临时表的方法及数据的插入.紧接着就可以写sql语句进行联合查询了. 下面是具体实例的方法 ...
- tableView
Table View简单描述: 在iPhone和其他iOS的很多程序中都会看到Table View的出现,除了一般的表格资料展示之外,设置的属性资料往往也用到Table View,Table View ...
- 编译llvm+clang
第一步,下载llvm代码: git clone git@github.com:llvm-mirror/llvm.git 第二步,进入llvm/tools目录并下载clang代码 cd llvm/too ...
- Apache Shiro系列教程之三：Shiro的结构
Shiro的设计目标是简化应用的安全管理工作.软件通常是以用户为基础设计的.也就是说,我们经常是根据用户是怎样和我们的软件交互的来设计相关的用户接口.比如,你可能会说"如果是已经登录的用户与 ...
- c#检测端口是否被占用
当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 . 但是本机一个端口只能一个程序监听,所以我们进行本地监听的时候需要检测端口是否被 ...