Run function() if appear in viewport ? jquery-viewport-checker

Question

I use anime-js for create an animation. But, It is far in the page. I would like to launch my animation function when the section in which the item to be animated appears on the screen.

I tried a plugin that I like to use (jquery viewportchecker) but it does not seem to do that.

Can you help me ?

Thank you

Duplicated question, Please see this post (Jquery check if element is visible in viewport ) {http://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport} — Nicholas, Mar 19 '17 at 18:35

gruss · Answer 1 · 2017-03-19T18:48:04.247

0

Have you tried using JQuery's on load method?

Something like

$(document).on('load', '.exampleClass', function() { //do stuff } )

edited Mar 19 '17 at 18:48

answered Mar 19 '17 at 18:30

gruss

65
10

This is not wroking – Nicholas Mar 19 '17 at 18:32
please post your codeslike this.read this https://meta.stackexchange.com/questions/51144/how-do-i-post-code-in-stackoverflow – isuruAb Mar 19 '17 at 18:42

score 0 · Answer 2 · answered Mar 19 '17 at 18:47

jQuery.appear

This plugin implements custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

https://github.com/morr/jquery.appear

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});

Also this plugin provides custom jQuery filter for manual checking element appearance.

$('someselector').is(':appeared')

score 0 · Answer 3 · answered Mar 21 '17 at 08:25

I found a solution. The problem with your method is that the function repeats itself to infinity.

I create a little function for check if element is visible. With that, no plugin needed.

function checkVisible( elm, evale ) {
    var evale;
    evale = evale || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (evale == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (evale == "above") return ((y < (viewportHeight + scrolltop)));
}

I also created a variable var counter = 0;. And as soon as the function is called, I increment by 1.

$(window).on('scroll',function() {
    if (counter == 0){
        if (checkVisible($('.frontend'))) {
           // Your function here
         }
       }
     }

At the first time the function will be called, counter will be 1, and thus, the function will not repeat. Thank you for your help !

Run function() if appear in viewport ? jquery-viewport-checker

3 Answers3

jQuery.appear