;
(function ($, window, document, undefined) {

var pluginName = "scrollAnimations",
/**
* This SearchHintOptions object can be overridden during initialization
* @type {{offset: number}}
*/
defaults = {
offset: 0.8
};

var timer;

/**
* ScrollAnimations - applies an animate class to elements when scrolled into the viewport
*
* @author Westley Mon <wmarchment@mindgruve.com>
* @version 1.0.1
*
* @param {jQuery} element jQuery instance of selected elements
* @param {ScrollAnimationsOptions} options Custom options will be merged with the defaults
* @constructor
*/
function ScrollAnimations(element, options) {
if (element) {
this.element = element;
this.animationElements = [];
this.triggerPoint = null;
this.lastScrollPos = -1;

// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
window.onload = this.init();
}
}

ScrollAnimations.prototype = {

init: function() {
var _this = this;

var $els = $(this.element);

//setup all items
_this.setup($els);

// start an interval to update the page rather than onscroll
var scrollIntervalID = setInterval(function () {
_this.updatePage(_this);
}, 10);

$(window).on('resize', function () {
_this.resize();
});
},

resize: function () {
var _this = this;

clearTimeout(timer);

timer = setTimeout(function () {
_this.setTriggerpoint();
}, 50);
},

setTriggerpoint: function() {
this.triggerPoint = window.innerHeight * this.options.offset;
},

setup: function(items) {
this.setTriggerpoint();

var $this = $(items),
$children = $this.find('[data-animation-child]');

if ($children.length) {

// setup children
$children.each(function() {
var $child = $(this);
var $delay = $child.attr('data-animation-delay');

$child.css({
'-webkit-animation-delay': $delay,
'-moz-animation-delay': $delay,
'-ms-animation-delay': $delay,
'-o-animation-delay': $delay,
'animation-delay': $delay
});
});

} else {

var $delay = $this.attr('data-animation-delay');

// setup single item
$this.css({
'-webkit-animation-delay': $delay,
'-moz-animation-delay': $delay,
'-ms-animation-delay': $delay,
'-o-animation-delay': $delay,
'animation-delay': $delay
});

}

this.animationElements.push($this);

},

updatePage: function (plugin) {
var _this = plugin;

window.requestAnimationFrame(function () {
_this.animateElements();
});
},

animateElements: function() {
var _this = this;
var scrollPos = window.pageYOffset;

// have we scrolled since the last rAF? if not, return.
if (scrollPos === this.lastScrollPos) return;

this.lastScrollPos = scrollPos;

$(_this.animationElements).each(function() {
var $this = $(this),
$children = $this.find('[data-animation-child]');

if ($this.hasClass('animated') || (scrollPos < $this.offset().top - _this.triggerPoint))
return; // don't continue if its already been animated or scroll position hasn't hit the trigger point yet

if ($children.length) {

$this.addClass('animated');

// animate the children
$children.each(function() {
$(this).addClass('animated').addClass( $(this).attr('data-animation') )
});

} else {

// animate the single item
$this.addClass('animated').addClass( $this.attr('data-animation') );

}
});
}

};

$.fn[ pluginName ] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new ScrollAnimations(this, options));
}
});
};

//add support for amd
if (typeof define === "function" && define.amd) {
define(function () {
return ScrollAnimations;
});
}

})(jQuery, window, document);

jquery图片滚动jquery.scrlooAnimation.js的更多相关文章

  1. jquery图片滚动

    注:代码来自17sucai网,已去除部分冗余代码,只保留图片效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  2. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  3. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  4. jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动

    jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382

  5. 求帮忙解决封装jquery图片滚动问题

    今天用jquery封装了点击图片滚动,但是发现在屏幕自适应时,图片停在的位置会随着屏幕大小而错位(我引入了pocketgrid.css响应式文件,但没办法去那边修改onsize事件...),求大神.. ...

  6. jQuery图片滚动插件

    //该组件目前仅适用于一次移动一张图片的情况 (function ($) { $.fn.extend({ "scroll": function (options) { option ...

  7. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  8. jquery 图片滚动

    效果图: $(function(){    $("#roll-img2").html($("#roll-img").html());    function r ...

  9. jquery图片滚动normalizy.css

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block; ...

随机推荐

  1. Android 使用RecyclerView优雅实现悬浮标题通讯录

    项目地址:https://github.com/hgDendi/ContactsList 界面概览: ContactsListDemo ContactsListDemo2 概要 如图,主要简单划分为两 ...

  2. Ubuntu(Debian)apt-get

    Ubuntu(Debian)的aptitude与apt-get的区别和联系   最近在使用Puppet快速部署Openstack,看到一些没见过的工具,例如aptitude,在Ubuntu上有强大的a ...

  3. Mirco F-measure and Macro F-measure

  4. svn图标显示不正常,文件夹显示但文件不显示svn图标

    svn图标显示不正常,文件夹显示但文件不显示svn图标   这个问题的引发是自己造成的,使用myEclipse时progress会卡在 refresh svn status cache (0%)这里, ...

  5. SharePoint中遇到Timeout

    使用SharePoint时会遇到不止一种的timeout(即超时)错误. 如果遇到了timeout, 该怎么区分呢? 大致上SharePoint可以控制和影响的timeout地方如下: 1. Shar ...

  6. 分布式check_mk切换远端图片到本地访问

    http://hermannsspace.de/wp/collect-pnp4nagios-data-in-check_mk-distributed-environment slave1数据目录 /o ...

  7. June 05th 2017 Week 23rd Monday

    No great discovery was ever made without a bold guess. 没有大胆的猜测就没有伟大的发现. I've read this sentence just ...

  8. 团队第三次scrum

    长大一条龙之课表查询 一.设计概要 本次内容主要是实现了长大一条龙系统的课表查询功能,我们的这个项目严格遵守MVC架构,采用前后端分离的策略.我们将课表查询分为二层,DAO层:负责与数据进行交互,读写 ...

  9. OC 结构体

    void test() { // 这个机构只能在函数内部使用 // 定义一个名为Student的结构体类型 struct Student { int age; // 年龄 char *name; // ...

  10. POSIX 线程详解(经典必看)

    http://www.cnblogs.com/sunminmin/p/4479952.html 总共三部分: 第一部分:POSIX 线程详解                               ...