Different animation effects in js - javascript

I use this animation effect code with js scroll: https://github.com/daneden/animate.css
My js code include a class in the last line:
$(this).addClass('fadeInLeft');
This great, but sometimes i would like change the fadeInLeft effect (example slideInleft or flipInLeft).
How to add different effect in that line in different div?
This is my js code:
$(document).ready(function() {
// Check if element is scrolled into view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// If element is scrolled into view, fade it in
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInLeft');
}
});
});
});

You ca specify the animation type in custom attribute in your element.
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass($(this).data("animationType"));
}
});
});
<div class="scroll-animations">
<div class="animated" data-animation-type="fadeInLeft"></div>
<div class="animated" data-animation-type="flipInLeft"></div>
</div>

Related

.addClass on initially loaded element

Situation:
I have written a function that detects whether <section> has entered the viewport via scroll, if so .addClass('fadeInUp') else .removeClass('fadeInUp') causing the .animation-element to fade in on the viewport.
Problem: Because the conditional is binded to the scroll function, the 1st <section> that is initially loaded does not .addClass('fadeInUp') until the user scrolls past then scrolls back to the <section>. View JS Fiddle for example
Question: How can I also detect if the initially loaded <section> is in the viewport, then .addClass('fadeInUp'), etc...
Current JS function:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
$('.animation-element').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInUp')
} else {
$(this).removeClass('fadeInUp')
}
});
});
Here is the JS Fiddle of the prototype.
Simply call the same code you call inside the event hander outside the event handler on the page load.
$(function () {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
function checkElements(selector) {
$(selector).each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInUp')
} else {
$(this).removeClass('fadeInUp')
}
});
}
$(window).scroll(function() {
checkElements('.animation-element'); // <-- check on scroll
});
checkElements('.animation-element'); // <-- check on page load
}
I am not sure what you are asking. Is this what you are looking for?
var updateScroll = function() {
$('.animation-element').each(function() {
...
}
}
$(window).scroll(updateScroll);
updateScroll();

Invoke function only if above particular div

I have a div that becomes 'fixed' to the bottom of the window once it is scrolled out of view. I only want this behavior when the user is viewing the top half of the page. I do not want a fixed state being applied to the div when the user is on the bottom part of the page.
In short - The issue I have is that a fixed state is being applied when the div is out of view, regardless of page position.
Demo https://jsfiddle.net/DTcHh/19352/
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
This method involves editing your markup and your isScrolledIntoView function.
Wrap the top half (or whatever viewable area you want invoked) of your markup in a div give it an id of #top.
Modify your scroll markup as this is currently checking that ALL of the element is in view, you only want a partial check.
Demo https://jsfiddle.net/DTcHh/19366/
$(window).scroll(function() {
if(isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet && isScrolledIntoView($('#top'))) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)) ;
}
I would suggest modifying the isScrolledIntoView function so it accepts a second parameter/ele. This way you'd only need to call it once.
This if block will execute only if you are on lower half of the page
if($(window).scrollTop() + $(window).height()/2 > $(document).height() / 2)
updated fiddle - https://jsfiddle.net/DTcHh/19370/

jquery html get visible item data-foo

I have some problem.
I write html code where have about 100 div.
<?php
for ($i=0;$i<100;$i++)
{
$post_block = '
<div id="1_%s" class="simple_wall_post" data-foo="bar_%s">
</div>';
$s = sprintf($post_block,$i,$i);
}
?>
windowsHeight = 10000 px
1 div element height = 100 px
For example facebook autoplay video, if video visible then played, if no stopped.
I can't get current div-foo when visible on window.
how can I implement it? thank you.
Did you try to determine the scrolling of the page, as suggested here: Check if element is visible after scrolling
Like this:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

How to check div visible or not on screen by class name while scrolling?

Like check below "demo div"
<div class="call" style="margin-top:100px;">
hi
</div>
<div class="call" style="margin-top:900px;">
hello
</div>
If any above div on screen return true using class name,while scrolling I'm use below script which is always return me to true,how to fix it?
<script>
jQuery.expr.filters.offscreen = function(el) {
return (
(el.offsetLeft + el.offsetWidth) < 0
|| (el.offsetTop + el.offsetHeight) < 0
|| (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
);
};
$(window).scroll(function () {
alert($('.call').is(':offscreen'))
});
</script>
try this
$(document).scroll(function () {
if (isOnScreen($('.call:eq(0)'))) {
// $('.call:eq(0)') is visible on screen
}
});
//this function return element is currently visible on screen or not in true / false
function isOnScreen(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
for demo
<div class="call" style="margin-top: 100px;">
hi
</div>
<label class="label1" style="margin-top: 500px;">
</label>
<label class="label2" style="margin-top: 20px;">
</label>
<div class="call" style="margin-top: 500px;">
hello
</div>
<script type="text/javascript">
$(document).scroll(function () {
if (isOnScreen($('.call:eq(0)'))) {
$('.label1').text('first div show') // if first call class div is visible msg display in lable
}
else {
$('.label1').text('first div hide')
}
if (isOnScreen($('.call:eq(1)'))) {
$('.label2').text('second div show')// if second call class div is visible msg display in lable
}
else {
$('.label2').text('second div hide')
}
});
function isOnScreen(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
</script>

How to trigger an action when a certain div is viewed/scrolled to?

I have some divs, I need to trigger an action (float another div or fire an alert for example) when a certain div is viewed or scrolled to.. What is the best approach to do so?
What you mean by "viewed" I have no idea - but here is how you would do it when the user puts their mouse over the div:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
// in view
} else {
// not in view
}
});
Credit to Is there a way to detect when an HTML element is hidden from view?
You can probably use the Bullseye jQuery plugin which adds adds enterviewport and leaveviewport events to elements.

Categories