I have some trouble using JavaScript.
var $animation_left_right_elements = $('.bowl'); function check_if_facilites_in_view() { var window_height = $window.height(); var window_top_position = $window.scrollTop(); var window_bottom_position = (window_top_position + window_height); $.each($animation_left_right_elements, function() { var $element = $(this); var element_height = $element.outerHeight(); var element_top_position = $element.offset().top; var element_bottom_position = (element_top_position + element_height); //check to see if this current container is within viewport if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { $element.addClass('animationToRight'); } else { $element.removeClass('animationToRight'); } }); }
This is my JQuery code.
I checked this question convert jquery each function to pure javascript, but cannot solve my problem.
I want someone can help me.
Thank you in advance.
Update
This is the code I tried.
var animation_left_right_elements = document.querySelectorAll('bowl'); function check_if_facilites_in_view() { var window_height = window.innerHeight; var window_top_position = $window.scrollY; var window_bottom_position = (window_top_position + window_height); animation_left_right_elements.forEach(function() { var element = this; var element_height = element.outerHeight(); var element_top_position = element.offset().top; var element_bottom_position = (element_top_position + element_height); //check to see if this current container is within viewport if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { element.addClass('animationToRight'); } else { element.removeClass('animationToRight'); } }); }
Advertisement
Answer
@GrafiCode said it’s good for me to answer my own question. This is my answer.
var animation_left_right_elements = document.querySelectorAll('.bowl'); function check_if_facilites_in_view() { var window_height = window.innerHeight; var window_top_position = window.scrollY; var window_bottom_position = (window_top_position + window_height); animation_left_right_elements.forEach(function(item) { var element = item; var element_height = element.scrollHeight; var element_top_position = element.offsetTop; var element_bottom_position = (element_top_position + element_height); var video = element.firstElementChild.firstElementChild; if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { if (!element.classList.contains('animationToRight')) { element.classList.add('animationToRight'); } } }); }