滚动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 ...
随机推荐
- day14_API第四天
1.正则(了解) 1.基本的正则表达式(看懂即可) 字符类[abc] a.b 或 c(简单类)[^abc] 任何字符,除了 a.b 或 c(否定)[a-zA-Z] a 到 z 或 A 到 Z,两头的字 ...
- js 开启video全屏模式
方法一: function launchFullScreen() { var element = document.documentElement; if(element.requestFullScr ...
- CodeBlocks 中fopen函数不支持命令 “r”
//codeblocks #include<stdio.h> #include<stdlib.h> void main(void) { FILE *fp=NULL; if((f ...
- Android：给ViewPager添加切换效果
原文参照开发者官网:http://developer.android.com/training/animation/screen-slide.html#viewpager 以App的引导页为例: 首先 ...
- Windows 托盘区域显示图标
NOTIFYICONDATA structure 这个结构体包含了向通知区域(底部任务栏右下角区域,下面都称为托盘)显示的信息.需要使用函数Shell_NotifyIcon. 结构体成员 typede ...
- Jena TDB assembler syntax
1 introduction Assembler is a DSL of Jena to specify something to build, models and dataset, for exa ...
- Recyclerview使用系列教材
Recylerview越来越多的人使用,本人录制了一套课程,欢迎大家观看,录制的比较仓促,第一课讲解的课程目录有点问题,请大家谅解,目录请看视频外该课程介绍的内容即可. 该课程付费课程包含: 1-Re ...
- Sqlserver数据库总结
由于公司项目需要这段时间一直在做有关于数据库方面的工作.趁这段时间有空,对数据库方面的知识进行一个梳理和归纳,以便以后需要时,查看起来方便. 使用的数据库主要有ORACLE10g和Sqlserver2 ...
- unresolved refrence 'execfile'……
unresolved refrence 'execfile'-- 字面意思是execfile这个东东没有被解析 难道是没有import相应的lib? python docs 3.x: Removes ...
- Codeforces Round #156 (Div. 2)
A. Greg's Workout 模3求和,算最大值. B. Code Parsing 最后左半部分为x,右半部分为y,那么从中间不断去掉xy,直到其中一种全部消去. C. Almost Arith ...