滚动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 ...
随机推荐
- PHP-query 的用法
Jquery Jquery实际上相当于一个升级版的JS,Jquery里面封装了很多的东西,Jquery的功能要比JS强大,用起来比JS方便.Jquery和JS都属于JS,只不过Jquery是封装了一个 ...
- Erlang 104 OTP
笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期 变更说明 2014-12-21 A Outline, 1 A ...
- 字符串匹配--manacher算法模板
manacher算法主要是处理字符串中关于回文串的问题的,它可以在 O(n) 的时间处理出以字符串中每一个字符为中心的回文串半径,由于将原字符串处理成两倍长度的新串,在每两个字符之间加入一个特定的特殊 ...
- Solidworks安装界面是英文的解决办法
[问题描述] 一样的安装文件,同事之前安装界面就是中文的,安装好以后软件也是中文的. 这几天系统挂了,重装系统后就发现安装界面是英文的,安装好以后也是英文. win7系统,位数不详,solidwork ...
- Ecs下的两台mysql做主从设置
一.主库配置master 1.用户root账户进入到mysql mysql -uroot -p 2.创建用于主从同步的账户,并赋予权限,由于这个账户只是作为同步数据用,所以分配权限不要过大,我这里只赋 ...
- Correlation Filter in Visual Tracking系列一：Visual Object Tracking using Adaptive Correlation Filters 论文笔记
Visual Object Tracking using Adaptive Correlation Filters 一文发表于2010的CVPR上,是笔者所知的第一篇将correlation filt ...
- ElasticSearch安装及部署
安装及部署 一.环境配置 操作系统:Cent OS 7ElasticSearch版本:1.3.2JDK版本:1.7.0_51SSH Secure Shell版本:XShell 5elasticsear ...
- RFC3986编码 C 语言实现(支持大部分中文)
前些时间做 xauth 认证程序的编写,网上找到RFC3986编码不支持中文的编码,所以便查找了一些资料.自己写了一个,代码如下. #include <stdlib.h> #include ...
- Hive操作表部分总结
创建表: create table tableName(time INT,userid BIGINT,url STRING,ip STRING COMMENT 'IP Address of the U ...
- 安装Yii框架时init.bat闪退的处理方法
已经开启了php_openssl扩展还是会闪退 1.右击'计算机'-'属性'-'高级系统属性'-'环境变量(最下边)': 2.在'系统变量'里找到'path',双击,出现'编辑系统变量',在'变量值' ...