Trying to make dynamics on webpage once elements appear/disappear on screen, they actually are behaving infinitely. But I need it on each phase of appearing or disappearing.
Demo of behaviour https://yadi.sk/i/LiBLFBl-8c0cUw
Here, using plugin "appear.js" for jQuery, my proyect is public http://77.246.156.61/site/
A small example
$(function(){
$("#about").on('appear',function() {
document.getElementById('thin').style.animation="anim_thin 0.7s ease-in 0.5s forwards";
});
$("#about").appear();
});
Plugin looks like
(function($) {
var selectors = [];
var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
}
var $window = $(window);
var $prior_appeared;
function process() {
check_lock = false;
for (var index = 0; index < selectors.length; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(':appeared');
});
$appeared.trigger('appear', [$appeared]);
if ($prior_appeared) {
var $disappeared = $prior_appeared.not($appeared);
$disappeared.trigger('disappear', [$disappeared]);
}
$prior_appeared = $appeared;
}
}
... full lib https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js
Comments
Post a Comment