+ 2

How to make the animation play when it becomes visible in the viewport?

I mean, when the page was loaded, the animation worked, also with further scrolling. I hope you understand me, and would help. Thanks in advance! Animations are given by CDN, and works with class="name" in HTML file https://code.sololearn.com/W506IsJl48J7/?ref=app

html css javascript html5 css3 animation jquery focus scroll cdn

17th Mar 2018, 12:37 PM

PAXANDDOS

6 Answers

+ 2

I've edited the condition... to replay the animation only when paragraphe have completly became invisible: before, animation was repeated as soon as scroll make the paragraphe top starting to disappear and user scroll again down... now, it will repeat the animation only if the paragraphe bottom as disapear, and scroll make it become visible again. But I'm not sure to good understand what you want: did you want the animation to be play only once, even when paragraphe have become invisible and become again visible later ? In this case, you must change the condition without 'else' statement, as I've done in my first example code: i = watched.length; while (i--) { if (watched_box[i].top < viewport.height) { watched[i].className = 'animated shake'; } } (there's only the last part of the function ;)) (I will continue in another post, my full answer doesn't fit in the character limit)

17th Mar 2018, 12:43 PM

visph

+ 4

I've adapted my previous JS snippet to work with your specific context: https://code.sololearn.com/WiFs9c1dvcrN/?ref=app Feel free to ask for specific explanations, if you still doesn't understand (but before try to analyze and understand by yourself: this would be a better way to acquire knowledge ;) )

17th Mar 2018, 11:14 AM

visph

+ 3

I guess that by "hits the focus on the page" you're meaning "becomes visible in the viewport" (an element get "focus" when user click it ^^) ? If so, you need to set the "onscroll" event listener of the scrollable element (usually <body>) to watch when the top position of the watched element reach (becomes less than) the viewport height (minus the element height, to be sure that the whole element is visible)... To do so, you need to know the viewport height, wich is not obvious: my way is to define an element at start of <body> part, give it explicit css width and height covering the viewport (through css relative units to the viewport: vw and vh), set it absolute positioned, and move it up (outside of the page, so it will never be visible) with 'top' css property... Then you can use element.getBoundingClientRect() to get the size of both the watched element (to be animated) and the viewport sized element, and doing conditional change (add) of watched element className property: https://code.sololearn.com/W9OzXBFC11cX/?ref=app

17th Mar 2018, 8:55 AM

visph

+ 3

@visph Thank you soooooo much! This is exactly what I want! Sorry if I'm not saying it right, I don`t know much specific words in programming yet, so therefore I appeal to Google, and it looks like he doesn't know them either. Thank you again! That`s all I need for my first web-page(Project "Study"). And I need to learn more about JS, 'cause in SoloLearn it is not enough. The next question will be later, or won`t. It`s about pop-up window. That`s final version: https://code.sololearn.com/W506IsJl48J7/?ref=app

17th Mar 2018, 2:47 PM

PAXANDDOS

+ 2

@visph O! This is what I need! But there is something left to ask. How to make the animation play once? After the animation, it became static and when it is scrolled it does not repeat? And I don`t understand how the cycle works, that you wrote in JS. Thank you very much!!)

17th Mar 2018, 12:02 PM

PAXANDDOS

+ 2

I'm not sure also of what you call "cycle": did you mean the loop ? It's a shorter way to write a loop, when the direction (increasing or decreasing counter) doesn't matter: Counter (i) is initialized with length of the array to iterate (wich is last index plus one), and the condition test if i is not zero (zero is equivalent to false, any other number is equivalent to true) before decrementing... so first iteration start with i as length-1, and when i reach 1 (condition is true), the last loop body execution occurs with i = 0 (i is decremented just after testing if not zero), and on next loop start test, i is zero, so the loop body is not executed, even if i is decremented once again (so at end/exit of loop, i == -1). You could write it as a for loop as: for (i=0; i<watched.length; i++) { } The only difference is the order (incrementing instead decrementing) of array items iteration... Strictly, the equivalent for loop should be write: for (i=watched.length; i!=0; ) { i--; /* loop body */ } (there's no instruction in the third part of the for loop argument, because it will occur at end of the loop, but instead the counter is decremented before using it in the loop body)

17th Mar 2018, 12:43 PM

visph