Как заставить элемент html появляться и исчезать снова и снова с помощью Js?

Question

Я работаю над своим портфолио, и я бы хотел добавить анимированную стрелку, чтобы пригласить пользователя прокручивать вниз. Стрелка будет сделана из двух блоков + стрелка, и я хотел бы оживить их так: Первый элемент появляется, затем второй (в то время как первый из них исчезает), затем третий (в то время как первый снова появляются, а второй исчезает). Я пробовал много сценариев, как этот (который сделан только для 2-х элементов):

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

Это только делает элемент видимый в браузере, я думал, что квадрат был «blinkink» слишком быстро, чтобы быть заметил из-за того, что цикл был запущен очень быстро, поэтому я попытался добавить функцию сна, но он тоже не работал.

Может ли кто-нибудь помочь мне в этом? В качестве бонусного вопроса я в порядке с функцией, выполняемой при загрузке веб-сайта, но было бы еще лучше, если бы анимация могла начаться, когда пользователь прокручивается до определенной части веб-сайта!

P.S: Я не использую jQuery, я хочу копать Js перед использованием фреймворков.

Спасибо! И извините за мой английский :)

Редактировать: У меня наконец есть рабочая функция для анимации 3 элементов. Я немного боролся, но, в конце концов, смог сделать это благодаря вашей помощи, ребята, спасибо за пример и ссылки, которые вы предоставили. Вот код, если это интересно для всех, я думаю, что это может понадобиться рефакторинг, но я счастлив с этим в любом случае:

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

вы можете сделать это с помощью setInterval метод: -

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, чтобы проверить прокрутку страницы: -

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

Answer 2

Вы можете использовать функцию toggle(). Что изменяет свойство css между скрытым и видимым. Кроме того, вы можете использовать функции hide() и show(). Более того, чтобы решить вашу собственность прокрутки вы могли бы сделать что-то вроде этого:

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

Это будет переключать стрелки для каждого изменения Свиток 30.

Answer 3

Я бы сказал, что это было бы лучше быть адрес с анимированным анимации изображений или CSS, а не серию элементов, анимированных с помощью JavaScript. Поэтому я включу пример CSS, но также пример JavaScript, который вы просили.

Вот пример CSS, this article на CSS-трюках обсуждает, как работают анимации CSS (я не эксперт); обратите внимание, мы анимировать opacity, а не visibility и CSS дает нам хорошее ослабление эффект (есть и другие):

@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>

Но если вы хотите использовать элементы анимированных с JavaScript: Проблема с который вы опубликовали, это то, что он никогда не возвращает браузеру, чтобы он мог обновлять дисплей.Таким образом, вместо цикла, вы будете использовать setTimeout изменить видимость элементов (см комментарии):

// 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>