今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效。这是一款基于jQuery+CSS3实现的页面滚动代码。该实例适用于适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

在线预览   源码下载

实现的代码。

html代码:

  <div class="htmleaf-container">
<div class="container">
<h2 class="font-zh">
向下滚动页面看看效果!</h2>
</div>
<div class="container">
<h2>
Use Smoove to create smooth fade-in effects as you scroll down</h2>
<div class="row">
<div class="col-md-6">
<div class="block">
</div>
</div>
<div class="col-md-6">
<div class="block">
</div>
</div>
</div>
<h2>
You can also move objects across the screen...</h2>
<div class="row">
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="-200px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="-100px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="100px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="200px">
</div>
</div>
</div>
<h2>
...or rotate them</h2>
<div class="row">
<div class="col-md-3">
<div class="block" data-move-x="-500px" data-rotate="90deg">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="-200px" data-rotate="45deg">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-y="200px" data-move-x="200px" data-rotate="-45deg">
</div>
</div>
<div class="col-md-3">
<div class="block" data-move-x="500px" data-rotate="-90deg">
</div>
</div>
</div>
<h2>
Even use cool 3D effects</h2>
<div class="row">
<div class="col-md-4">
<div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px">
</div>
</div>
<div class="col-md-4">
<div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px">
</div>
</div>
<div class="col-md-4">
<div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px">
</div>
</div>
<div class="col-md-3">
<div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="block" data-rotate-y="270deg" data-move-x="-150%">
</div>
</div>
<div class="col-md-6">
<div class="block" data-rotate-y="270deg" data-move-x="150%">
</div>
</div>
</div>
<h2>
Scale &amp; skew them...</h2>
<div class="row">
<div class="col-md-6">
<div class="block" data-scale="5">
</div>
</div>
<div class="col-md-6">
<div class="block" data-scale="0.2" data-skew="90deg,90deg">
</div>
</div>
</div>
<h2>
Mix it up!</h2>
</div>
</div>

via:http://www.w2bc.com/Article/27243

基于jQ+CSS3页面滚动内容元素动画特效的更多相关文章

  1. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  2. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  3. 一款jquery和css3实现的卡通人物动画特效

    之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  4. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  5. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  6. JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

      先看效果:     阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部)      原理:直接使用css 进行控制:缺点:不兼容ie6-:      实现:positi ...

  7. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  8. animate.css+wow.js页面滚动即时显示动画

    1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...

  9. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

随机推荐

  1. javascript学习笔记------概念相关

    javascript中的函数.对象 1. 在javascript中,函数是被当成一种数据类型,它可以被存储在一个变量.数组.对象中,可以被当作参数传递到另一个函数中. 函数就像是字符串和数字这样的的数 ...

  2. 如何在mysql数据库中保存emoji特殊字符

    MySQL在5.5.3版本之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode.其实,utf8mb4是utf8的超集,理论上原来使用utf8 ...

  3. Code a simple telnet client using sockets in python

    测试端口是否开放的python脚本 原文: https://www.binarytides.com/code-telnet-client-sockets-python/ 配置: 120.79.14.8 ...

  4. Cookie 与 sessonID

    Http协议是无状态的,即服务端仅仅能通过你本次提交的http请求来给出响应. cookie可用于服务端标记client.如登陆过后免输password,购物车实现等. 1.cookie Cookie ...

  5. C++ 生成

    1.重新生成,会导致所有cpp文件重新编译,然后连接. 2.使用生成,只会对需要重新编译的cpp文件,进行编译. a.修改cpp文件方法实现,只需要重新编译该cpp文件 b.修改h文件的接口部分,包含 ...

  6. Python 数据驱动工具:DDT

    背景 python 的unittest 没有自带数据驱动功能. 所以如果使用unittest,同时又想使用数据驱动,那么就可以使用DDT来完成. DDT是 “Data-Driven Tests”的缩写 ...

  7. GridLayout with span

    Widgets can span multiple columns or rows in a grid. In the next example we illustrate this. #!/usr/ ...

  8. 亲热接触Redis-第二天(Redis Sentinel)

    简单介绍 经过上次轻松搭建了一个Redis的环境并用Java代码调通后.这次我们要来看看Redis的一些坑以及Redis2.8以后带来的一个新的特性即支持高可用特性功能的Sentinel(哨兵). R ...

  9. [odroid-pc] ubuntu12.04 64bit Android4.0.3 源码编译报错及解决的方法

    第一个错误:         host Executable: cmu2nuance (out/host/linux-x86/obj/EXECUTABLES/cmu2nuance_intermedia ...

  10. 40、JDBC相关概念介绍

    1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡,同样道理,我们安装好数据 ...