EtienneDh EtienneDh - 4 months ago 26
HTML Question

How to make an html element appear and disappear again and again with Js?

I'm working on my portfolio and i'd like to add an animated arrow to invite the user to scroll down. The arrow would be made of 2 blocks + the arrow and I'd like to animate them such as this:
The first element appear, then the 2nd one (while the first one fade out), then the 3rd one (while the 1st appear again and the 2nd one fade out).
I've tried many scripts like this one (which is made for 2 elements only) :

function test() {
for (var i = 1; i < 11; i = i + 1) {
if (i % 2 !== 0) {
document.getElementById('square1').style.visibility = 'visible';
document.getElementById('square2').style.visibility = 'hidden';

} else {
document.getElementById('square1').style.visibility = 'hidden';
document.getElementById('square2').style.visibility = 'visible';
};
};
}


This only makes the element visible in browser, I was thinking that the square were 'blinkink' too fast to be noticed due to the loop beeing computed real quick so I tried to add a sleep function but it didnt work either.

Could anyone please help me with this ? As a bonus question, i'm fine with the function running when website loads but it would be even better if the animation could start when the user scroll down to a defined part of the website!

P.S: I'm not using jQuery, i want to dig in Js before using frameworks.

Thanks ! And sorry for my english :)

Edit: I finally have a working function for animating 3 elements. I struggled a bit but in the end, could make it thanks to your help guys so thanks for the example and links you provided
Here is the code if it's of interest for anyone, I think it could need some refactoring but i'm happy with it anyway:

function appear() {
alert(container[test]);
document.getElementById(container[test]).style.visibility = 'visible';
if(test === 0) {
document.getElementById(container[test + 1]).style.visibility = 'hidden';
document.getElementById(container[test + 2]).style.visibility = 'hidden';
test++
} else if(test === 1) {
document.getElementById(container[test - 1]).style.visibility = 'hidden';
document.getElementById(container[test + 1]).style.visibility = 'hidden';
test++
} else {
document.getElementById(container[test - 1]).style.visibility = 'hidden';
document.getElementById(container[test - 2]).style.visibility = 'hidden';
test = 0;
}

}

function animate() {
var interval = setInterval(appear, 1000);
}

var test = 0;
var sq1 = 'square1';
var sq2 = 'square2';
var arrow = 'arrow';
var container = [sq1, sq2, arrow];

alert('test' + container);

animate();

Answer

you can do this using setInterval method:-

var interval=500,i=0;
setInterval(function(){
  i++;
   if (i % 2 !== 0) {
     document.getElementById('square1').style.visibility = 'visible';
     document.getElementById('square2').style.visibility = 'hidden';

   } else {
     document.getElementById('square1').style.visibility = 'hidden';
     document.getElementById('square2').style.visibility = 'visible';
   }
},interval);

if you want it to go active after it reached a point on the page use an if construct to verify the scrollTop of the page:-

if(document.body.scrollTop>=500){
  ...
  //do some stuff
}
Comments