0

I've searched a solution for my problem but I didn't find any answer for that.

here is the problem, I'm using animate.css for many DIVs but I want the animations take effect when the element -which has classes 'animated' and 'animation in animate.css'- is in viewport. My problem is that classes 'animated' and 'animation in animate.css' are added to all my DIV's whatever the position is.

the script

$(function() {
"use strict";
  $(window).scroll(function() {
    addClassToElementInViewport($('div.accueilText'), "slideInleft");
    addClassToElementInViewport($('div.ateHT'), "slideInLeft");
  });

  function addClassToElementInViewport(element, newClass) {
    if (isVisible(element)) {
      element.removeClass('hidden');
      element.addClass(newClass);
    }
  }

function isVisible($el) {
  var winTop = $(window).scrollTop();
  var winBottom = winTop + $(window).height();
  var elTop = $el.offset().top;
  var elBottom = elTop + $el.height();
  return ((elBottom<= winBottom) && (elTop >= winTop));
}

});

html code

    <div class="container">
      <div class="row text-center accueilText hidden animated">
        <div class="col-md-6 col-md-offset-3">blablabla bla bla<br>bla<br>blabla bla  </div>
      </div>
      <hr>

      <div class="row">
        <div class="col-lg-12"><center><img class="img-responsive" src="Images/verin_hydroseb.png" alt="Hydroseb logo"></center></div>
      </div>
      </div>

<div class="row">
    <div class="text-justify col-sm-5 ateHT hidden animated"> <br>bla bla blabllabla </div>
    <div class="col-sm-5 col-sm-offset-2 ateHI hidden animated"> <img class="img-responsive" src="Images/atelier_hydraulique.png" alt="HydroSeb Hydraulique"></div>

  </div>

I really appreciate any help you can provide :)

Arian
  • 13
  • 4
  • Then your viewport method may be incorrect. See my answer here and try the viewport method provided: http://stackoverflow.com/questions/42955204/animate-skill-bars/42955954#42955954 – G0dsquad Apr 03 '17 at 12:54
  • 1
    You say your css isn't working, then don't post any css... – Jared Smith Apr 03 '17 at 12:55
  • works fine here : http://codepen.io/NirBenya/pen/EWMxgE – Nir Ben-Yair Apr 03 '17 at 12:59
  • yess i'm sorry for my explanation. the problem is that i want them to be added when they are in the viewport. but one the first class id added, my function add classes to my other DIVs too. – Arian Apr 03 '17 at 13:03

1 Answers1

1

$('div.accueilText') this will find all divs with class accueilText

But i feel you may be looking for this.

First of all on-screen visible area is known as Viewport.

image is took from OP and cleaned up in Photoshop

(image is taken from OP. Cleared and edited in Photoshop)

So all you need is to detect all elements in your Viewport.

This can be achieved using many plugins for jQuery, but I'll explain you on one example, which is called as jQuery withinviewport

Link to source and documentation on: [ withInViewport - Github ]

Step 1:

Download plugins and include jQuery framework and withinviewport plugin in your script:

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>

.

Step 2:

Initialise function on scroll event:

$(window).bind("scroll", function() {
    //your code placeholder
});

.

Step 3:

Use withinviewport selector to get all elements in you Viewport and by each element add class to corresponding list-item in your #timeline container:

$("#elements > div").withinviewport().each(function() {
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});

Step 4:

Put all together:

$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});

.

.

Also this plugin gives you opportunity to set top, bottom, left and right offset for view-port.

See demo here: http://patik.com/code/within-viewport/

Artem Ankudovich
  • 458
  • 2
  • 14
  • Origionally posted as top answer here http://stackoverflow.com/questions/19498068/how-to-get-on-screen-visible-element-objects-in-jquery – Artem Ankudovich Apr 03 '17 at 13:19