滚动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 ...
随机推荐
- js常用字符串方法汇总
concat()将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world"; var c = a. ...
- OS实验一实验报告
实验一.命令解释程序的编写实验 专业:商业软件工程 姓名:王泽锴 学号:201406114113 一.实验目的 (1)掌握命令解释程序的原理: (2)*掌握简单的DOS调用方法: (3)掌握C语 ...
- android视频播放器开发
http://blog.csdn.net/u010181592/article/details/49301703 http://blog.csdn.net/qq_33291295/article/de ...
- 20151216Repeater
Repeater 用法:.绑定数据源 Repeater1.DataSource = context.Info; Repeater1.DataBind(); .造项模版: 头模版:HeaderTempl ...
- C#List转字符串，字符串转List，字符数组转Int数组
List转字符串 [C#] 纯文本查看 复制代码 ? 01 02 List<string> List = new List<string>(); string strArray ...
- [转]SQLServer2008日志文件无法收缩处理方法
问题描述 发现有的数据库日志文件太大,无论如何收缩执行几次SQL语句都不行.事务日志达30+G,而且使用常规的截断.收缩方法均无法减小日志物理文件的尺寸,经过一番寻找,终于找到了解决方法. 查 ...
- MySQL性能优化总结（转）https://yq.aliyun.com/articles/24249
摘要: 一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图: 三.MySQL存储引擎概述 1)MyISAM存储引擎 MyIS ...
- WTL编程小技巧汇编
1.设置窗体生成大小并中央显示窗口 2.设置窗体最大/小尺寸 3.动态设置窗体标题 4.设置对话框的字体和背景颜色 5.设置窗体控件默认字体 以下技巧可应用于SDI和MDI程序: 1.设置窗体生成大小 ...
- jquery跨域请求jsonp
服务端PHP代码 header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...
- smarty中如何统计数组的个数？
在做web前端中,很多人会遇到在smarty中如何统计数组的个数,其实很简单 比如数组$array 你只需要用{$array|@count}就可以获取.