Изображение animate down javascript (no jQuery)

Question

Я знаю, как исправить анимацию, которая спускается только тогда, когда изображение появляется в окне с jQuery, но теперь я хочу сделать это с помощью JavaScript. Борясь с этим. Изображение должно быть свободно вниз (+ 50 пикселей на 1,6 секунды). У вас есть googling, но большинство из них сделаны с помощью jQuery, который я предлагаю, и это не то, что я хочу. Furtermore анимация должна начинаться, когда scrollTop находится между 600 и 800 пикселей.

function scrollFunction() { 
 
\t var animate = document.getElementById("picture"); 
 
\t var position = 0; 
 
    var top = 0; 
 
\t var scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
 
\t if(scrollTop > 600 && scrollTop < 800){ 
 
\t \t position++; 
 
\t \t animate.style.top = position + "50px"; 
 
\t } else { 
 
\t \t stop(); 
 
\t } 
 
} 
 

 
function stop() { 
 
\t clearTimeout(animate); 
 
}

#picture { 
 
\t width: 100%; 
 
\t height: auto; 
 
\t top: -5px; 
 
\t position: relative; 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t margin-bottom: 20px; 
 
}

<div class="col-sm-12 col-xs-12"> 
 
     <h1 class="responsive-h1">Mi<span class="logo-orange"> Pad2</span></h1> 
 
      <p class="edition-title above-text-black">Black Edition</p> 
 
     <img src="Img/picture.jpg" id="picture"/> 
 
     </div>

Answer 1

jsFiddle: https://jsfiddle.net/n1q3fy8w/

Javascript

var imgSlide = document.getElementById('slidedown-image'); 

var slideDown = setInterval(function() { 
    var topVal = parseInt(window.getComputedStyle(imgSlide).top, 10); 
    imgSlide.style.top = (topVal + 1) + "px"; 
}, 15); 

setTimeout(function() { clearInterval(slideDown); }, 1600); 

Вы получаете элемент первым, после этого вам настроить setInterval, которая будет в основном перемещает img вниз , тогда мы также устанавливаем setTimeout, который после 1600 ms сохраняет номер slideDown и изображение останавливается. Однако ваше изображение может понадобиться position: absolute.

выше ответ будет работать только в Chrome, это, однако, должен работать во всех browswers

jsFiddle: https://jsfiddle.net/n1q3fy8w/1/

Javascript

var imgSlide = document.getElementById('slidedown-image'); 

var slideDown = setInterval(function() { 
    var topVal = parseInt(imgSlide.style.top, 10); 
    imgSlide.style.top = (topVal + 1) + "px"; 
}, 15); 

setTimeout(function() { clearInterval(slideDown); }, 1600); 

ИТАК getComputedStyle работает только в хроме, так, чтобы получить это для работы со всеми другими браузерами, вам нужно конкретно установить свойство css на элемент, а не через CSS.

При использовании JavaScript для доступа к элементу и изменить свой стиль, как так element.style.bottom = '150px'.style получает вас все значения CSS для ваших встроенных стилей на этом элементе, поэтому любые изменения css на элемент, который осуществляется через .css /.less вы не можете получить доступ через javascript.

Таким образом, все выше код делает мы устанавливаем top: 0 на самом элементе и в нашем коде мы используем imageSlide.style.top вместо Хрома window.getComputedStyle

Answer 2

Рассматривали вы с помощью перехода CSS? если вы меняете значение вершины, вы должны иметь возможность добавить переход: верхние 1.6s в вашем css (для изображения). (Тогда продавец приставкой версии, когда вы получите это работает)

Answer 3

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

var animate = document.getElementById("picture"); 
    var position = 0; 

    var shift = setInterval(function() { 

      animate.style.top = 601; 
     if(animate.style.top > 600 && animate.style.top < 800){ 
        var pos = position + 600; 
      animate.style.top = pos + "px"; 
      position += 50; 
     } else { 
      stop(); 
     } 
    }, 400) 

    function stop() { 
     clearTimeout(shift); 
    }