Create A Text Fade In/fade Out Using Strictly Js/html
I want to display text on my HTML webpage that will basically 'flash' by fading in, and back out constantly with a 1 second break between the animation. This has to be done strictl
Solution 1:
Add a setinterval function and inside the function toggle the css to the text
here is the code I have tried. Hope it helps you.
var speed = 1000;
var t = setInterval(function(){
var slideSource = document.getElementById('textnode');
slideSource.classList.toggle('fade');
}, speed);#textnode {
opacity: 1;
transition: opacity 1s;
}
#textnode.fade {
opacity: 0;
}<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><divid="textnode">Sample Text</div></body></html>Solution 2:
If you can't use css stylesheets but can use inline css..
var opacity = 1;
var change = -0.1;
var blinky = document.getElementById('blinky');
setInterval(function() {
blinky.style.color='hsla(210, 100%, 50%, '+opacity+')';
if (opacity < -0.9) {
change = 0.1;
opacity = 0;
} elseif (opacity > 0.9) {
change = -0.1;
}
opacity = opacity + change;
}, 100);<divid="blinky">Blinky</div>fiddle
Post a Comment for "Create A Text Fade In/fade Out Using Strictly Js/html"