CODEWITHSUNDEEP
javascript
user5613899
user5613899

Reputation:

Image animate down javascript (no jQuery)

I know how to fix the animation that goes down only when the image is showing up in the window with jQuery, but now I want to do that with JavaScript. Struggling with that. The image must be fluently go down (+50px for 1.6 seconds). Have googling around, but most of them are done with jQuery I suggest and that is not what I want. Furtermore the animation should start when the scrollTop is between 600px and 800px. 

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

function stop() {
	clearTimeout(animate);
}
#picture {
	width: 100%;
	height: auto;
	top: -5px;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	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>

Upvotes: 0

Views: 78

Answers (2)

Canvas
Canvas

Reputation: 5897

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

You get the element first, after that you setup a setInterval which will basically move our img downwards, we then also set a setTimeout which after 1600ms remvoes the slideDown interval and the image stops. Your image however may need position: absolute.

The above answer will only work in Chrome, this however should work in all 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);

Ok so getComputedStyle only works in chrome, so to get this to work on all other browsers, you have to specifically set the css property on the element and not via CSS.

When you use javascript to access an element and change its style like so element.style.bottom = '150px' the .style gets you all of the css values for your inline styles on that element, so any css changes on an element that is done via a .css/.less file you can't access via javascript.

So all the above code does is we set a top: 0 on the element itself and in our code we use imageSlide.style.top instead of chrome's window.getComputedStyle

Upvotes: 1

mthomp
mthomp

Reputation: 249

Have you considered using a CSS transition? if you are changing the value of top you should be able to add transition: top 1.6s in your css (to picture). (Then the vendor prefixed versions when you get it working)

Upvotes: 0

Related Questions