Wie mache ich ein HTML-Element mit Js immer wieder erscheinen und wieder verschwinden?

Question

Ich arbeite an meinem Portfolio und möchte einen animierten Pfeil hinzufügen, um den Benutzer zum Scrollen nach unten einzuladen. Der Pfeil würde aus 2 Blöcken + dem Pfeil bestehen und ich würde sie gerne so animieren: Das erste Element erscheint, dann das zweite (während das erste ausgeblendet wird), dann das dritte (während der 1 erscheint wieder und der zweite wird ausgeblendet). Ich habe viele Skripte wie dieser versucht (die nur für zwei Elementen besteht):

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'; 
      }; 
     }; 
    } 

Dies macht nur das Element sichtbar im Browser, dachte ich, dass der Platz zu sein ‚Blinkink‘ zu schnell waren bemerkt, weil die Schleife sehr schnell berechnet wurde, also habe ich versucht, eine Schlaffunktion hinzuzufügen, aber es hat auch nicht funktioniert.

Könnte jemand bitte mir dabei helfen? Als Bonusfrage geht es mir gut mit der Funktion, die ausgeführt wird, wenn die Website geladen wird, aber es wäre noch besser, wenn die Animation starten könnte, wenn der Benutzer zu einem definierten Teil der Website scrollt!

P.S: Ich benutze nicht jQuery, ich möchte in Js graben, bevor Sie Frameworks verwenden.

Danke! Und sorry für mein Englisch :)

Edit: Ich habe endlich eine funktionierende Funktion für die Animation von 3 Elementen. Ich kämpfte ein wenig, aber am Ende konnte es dank Ihrer Hilfe Jungs so vielen Dank für das Beispiel und die Links, die Sie zur Verfügung gestellt Hier ist der Code, wenn es für jedermann interessant ist, ich denke, es könnte Refactoring brauchen, aber ich bin glücklich trotzdem:

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 1

Sie können dies mit setInterval Methode tun: -

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); 

Wenn Sie möchten, dass es aktiv wird, nachdem es einen Punkt auf der Seite erreicht hat, verwenden Sie ein if-Konstrukt, um den scrollTop der Seite zu überprüfen: -

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

Answer 2

Sie könnten die toggle() -Funktion verwenden. Dies ändert die CSS-Eigenschaft zwischen versteckt und sichtbar. Alternativ können Sie auch die Funktionen hide() und show() verwenden. Weiter mehr Ihre Scroll-Eigenschaft zu lösen, die Sie tun können, so etwas haben:

var y = $('.selector').scrollTop(); //gives you the vertical scroll position 
if(y%30 == 0) { 
$('.arrowOne').toggle(); 
$('.arrowTwo').toggle(); 
} 

Dadurch werden die Pfeile für jede Scroll Wechsel 30.

Answer 3

schalten ich diese erste Adresse sein würde sagen würde mit einem animierten Bild- oder CSS-Animationen statt einer Reihe von Elementen, die mit JavaScript animiert werden. Daher werde ich ein CSS-Beispiel, aber auch das von Ihnen gewünschte JavaScript-Beispiel verwenden.

Hier ist das CSS-Beispiel, this article auf CSS Tricks diskutiert, wie CSS-Animationen arbeiten (Ich bin kein Experte); beachten wir opacity statt visibility und CSS gibt uns eine schöne Lockerung Wirkung animieren (es gibt andere):

@keyframes pulse { 
 
    0% {opacity: 1} 
 
    50% {opacity: 0} 
 
} 
 
.blocks { 
 
    background-color: blue; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    opacity: 0; 
 
} 
 
.block1 { 
 
    animation: pulse 2.4s ease 0s infinite; 
 
} 
 
.block2 { 
 
    animation: pulse 2.4s ease 0.8s infinite; 
 
} 
 
.block3 { 
 
    animation: pulse 2.4s ease 1.6s infinite; 
 
}

<div class="blocks block1"></div> 
 
<div class="blocks block2"></div> 
 
<div class="blocks block3"></div>

Aber wenn Sie Elemente mit JavaScript animiert verwenden: Das Problem mit der Code, den Sie gepostet haben, ist, dass es niemals zurück an den Browser liefert, damit es die Anzeige aktualisieren kann.Anstatt also eine Schleife, dann würden Sie setTimeout verwenden, um die Sichtbarkeit der Elemente zu ändern (siehe Kommentare):

// Get the blocks 
 
var blocks = document.querySelectorAll(".blocks"); 
 

 
// Keep track of which block we're currently showing 
 
var index = -1; 
 

 
// Start 
 
cycle(); 
 
function cycle() { 
 
    // Get the current block if any 
 
    var block = index >= 0 && blocks[index]; 
 
    if (block) { 
 
    // Hide it again 
 
    block.style.visibility = "hidden"; 
 
    } 
 
    
 
    // Move to the next block, wrapping around when we get to the end 
 
    index = (index + 1) % blocks.length; 
 
    
 
    // Show it 
 
    block = blocks[index]; 
 
    block.style.visibility = "visible"; 
 
    
 
    // Call this function again in 800ms 
 
    setTimeout(cycle, 800); 
 
}

.blocks { 
 
    background-color: blue; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    visibility: hidden; 
 
}

<div class="blocks block1"></div> 
 
<div class="blocks block2"></div> 
 
<div class="blocks block3"></div>