How to use javascript to achieve continuous fade in and out

This article mainly explains "how to use javascript to achieve continuous fade in and out", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use javascript to achieve continuous fade in and fade out" it!

Implementation method: 1, use querySelector () to get the specified element object; 2, use the "element object .style.opacity = Math.sin (2 * Math.PI * time)" statement to control the fade in or out effect; 3, use the recursive way to achieve continuous fade in and out.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Javascript implementation constantly fades in and out

You just need to find a periodic function with a scope of [0re1]. The fade-in or fade-out effect can be controlled by using the value of the periodic function as the property value of opacity.

Using recursion, you can constantly fade in and out.

Implementation code:

There is a bright moonlight in front of the bed, like a cold frost on the ground. Var duration = 3000 new Date startTime = new Date (); var p = 0 per requestAnimationFrame (function f () {/ / get the element var el = document.querySelector ("# text"); var time = (new Date-startTime) / duration; el.style.opacity = Math.sin (2 * Math.PI * frame); requestAnimationFrame (f);})

Effect picture:

Thank you for your reading, the above is the content of "how to use javascript to achieve continuous fade in and out". After the study of this article, I believe you have a deeper understanding of how to use javascript to achieve continuous fade in and out of this problem, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!