scrollReveal.js页面滚动动态效果

scrollReveal.js
http://www.dowebok.com/134.html
简介

和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。

虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。

WOW.js
http://www.dowebok.com/131.html
简介

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

时间： 2024-08-17 12:30:14

scrollReveal.js页面滚动动态效果的相关文章

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

js页面滚动浮动层智能定位(jQuery)实现

///js页面滚动浮动层智能定位(jQuery)实现 ///调用:$("#popfloat").smartFloat($("#mainInfo").width() + 21); $.fn.smartFloat = function(width_p) { var position = function(element) { var top = element.position().top, pos = element.css("position")

js 页面滚动到指定位置

项目中,本来想通过点击左侧列表让页面进行快速导航(根据 id="item" 和 a标签的 href 属性[<a href="#item"></a>]),不过滚动后的页面一直是顶在浏览器页面顶部的,不符合项目需求,所以就通过 js 代码让页面进行指定位置滚动,代码如下: $(".left_nav>ul>li").click(function () { var n = parseInt($(this)[0].id)

scrollreveal(页面滚动显示动画插件支持手机)

scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. 安装 可以通过npm或bower来安装scrollreveal.js插件. 1 2 npm install scrollreveal bower install scrollreveal                基本使用方法 HTML结构: 1 2 3 <!-- HTML --> <

ScrollReveal-元素随页面滚动产生动画的js插件

简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器.

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>

aos.js超赞页面滚动元素动画jQuery动画库

插件描述:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 简要教程 aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. AOS.js 下载          案例演示 安装 可以通过bower来安装aos动画库插件.