窗口滚动到当前元素才显示动画效果

 1 $(function(){
 2     $(window).scroll(function(){
 3         var curr_element = $(‘当前元素class或id名‘)
 4         var active_class = ‘显示动画效果的class或id‘
 5         var scroll_h = $(window).scrollTop()+$(window).height();
 6         var self_top = curr_element.offset().top;
 7         var self_h = curr_element.height();
 8         if( (scroll_h > self_top + self_h/2) &&  ( $(window).scrollTop() < self_top + self_h/2) ){
 9             // 显示动画效果
10            curr_element.addClass(active_class);
11         }else{
12            // 退出动画效果
13            curr_element.removeClass(active_class);
14         }
15     })
16 })
时间: 2024-11-07 00:06:09

窗口滚动到当前元素才显示动画效果的相关文章

IOS视图缩放显示动画效果

效果:视图从大--小缩放显示/小--大 (只是比例问题) 方法1.直接show出view的时候:把下面的这段代码加到viewController或者view出现的时候就OK self.view.transform = CGAffineTransformMakeScale(1.0f, 1.0f);//将要显示的view按照正常比例显示出来  [UIView beginAnimations:nil context:UIGraphicsGetCurrentContext()];  [UIView se

如何使用jquery ,浏览器窗口滚动到一定距离,显示div中的内容

1.  函数的编写   function getTop(){         var top = $(document).scrollTop();         if($(document).scrollTop()>500){            $(".SuspensionFrame").show();         } else { $(".SuspensionFrame").hide();         }         setTimeout(

jq滚动到一定位置的出现动画效果

实现原理: ele.offset().top 元素到浏览器顶部(的)高(距离) ele.offset().height 元素自己(的)高 $(window).scrollTop() 浏览器 滚动条 滚动(的)距离 $(window).height()浏览器 窗口(的)高 当滚动的高 $(window).scrollTop() 加上 浏览器窗口的高$(window).height() > = 元素到浏览器顶部(的)高(距离) 执行动画 代码实现: var a, b, c, d; $(window)

jquery 隐藏 显示 动画效果

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p"

css中如果没有设置display,则无法显示动画效果!!!

1 <script type="text/javascript" src="jquery-1.7.1.js"></script> 2 <script type="text/javascript"> 3 4 $(document).ready(function(){ 5 6 var x = 10; 7 var y = 10; 8 9 $('.prompt_a').mouseover(function(e){ 10

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

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

Android Animation动画实战(一): 从布局动画引入ListView滑动时,每一Item项的显示动画

前言: 之前,我已经写了两篇博文,给大家介绍了Android的基础动画是如何实现的,如果还不清楚的,可以点击查看:Android Animation动画详解(一): 补间动画 及 Android Animation动画详解(二): 组合动画特效 . 已经熟悉了基础动画的实现后,便可以试着去实现常见APP中出现过的那些精美的动画.今天我主要给大家引入一个APP的ListView的动画效果: 当展示ListView时,Listview的每一个列表项都按照规定的动画显示出来. 说起来比较抽象,先给大家

一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog

android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog类似的Builder方式来创建对话框,另外当每个颜色被选择的时候有个按下效果是用纯代码实现的,还有就是可以动态的判断一排可以显示多少个颜色元素.而动画效果我们是使用属性动画实现,如果要做到兼容2.3需要使用第三方库NineOldAndroids来实现属性动画. 源码如下: 1 2 3 4 5 6 7

一个带动画效果的颜色对话框控件AnimatedColorPickerDialog

android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog类似的Builder方式来创建对话框,另外当每个颜色被选择的时候有个按下效果 是用纯代码实现的,还有就是可以动态的判断一排可以显示多少个颜色元素.而动画效果我们是使用属性动画实现,如果要做到兼容2.3需要使用第三方库 NineOldAndroids来实现属性动画. 源码如下: package com