Change Image Position On Scroll (|)

Change Image Position On Scroll (|)

by rajnishw3

HTML

<main>
		
		<div class="wrapper">
			
			<div class="content">
				
				<img class="cycle" src="https://happierwork.com/wp-content/uploads/2017/06/header-bike.png">

				<img class="pedal" src="https://happierwork.com/wp-content/uploads/2017/06/header-pedal.png">

			</div>

		</div>

		<div style="background-color: red; height: 200vh;">
			
		</div>

	</main>

CSS

body{
			margin: 0;
		}
		.wrapper{
			height: 100vh;
			background-image: url(https://happierwork.com/wp-content/uploads/2017/06/header-right.png);
			background-position: bottom right;
			background-repeat: no-repeat;
			background-size: 600px,500px;
			background-color: #fff;
			position: relative;
			overflow: hidden;
		}
		.content{
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.content .pedal{
			position: absolute;
			bottom: 21px;
			left: 107px;
		}

JavaScript

leftposition=0;
		windowHeight=$('.wrapper').height();
		windowWidth=$(window).width();
		ratio=windowWidth/windowHeight;

		   $(window).on('scroll', function(e){
		    currentScrollPosition=$(window).scrollTop();
		    leftposition=currentScrollPosition * ratio;
		       $('.content').animate({left:leftposition + 'px'},10);
		    $('.pedal').css({
		       'transform': 'rotate(' + ($(window).scrollTop() / windowHeight * 360) + 'deg)'
		   });
		   });