Java Script Animation

Navigation
3

Good afternoon, I'm trying to do a job with css, html, js. I need to make some images slide right and left as soon as I scroll the bar, one image at a time, but as soon as I roll the bar the images move all to the same time, I researched a lot and I could not solve this problem. 

var t = 0;
var Velha , meninaGuarda;

function temporizar(){
	var r = window.pageYOffset;
	var a = window.innerHeight;
	var d = document.body.scrollHeight;
	t = r/(d-a);
}

function intervalo(inicio,fim,tempo){
	var i = (tempo - inicio) / (fim - inicio);
	if(i<0) i=0;
	if(i>1) i=1;
	return i;
}

function animar(){
	temporizar();

	var i = intervalo(0.2,0.6,t);
	meninaGuarda.style.left = ( (1-i)*0 + i*1400 ) + "px";
	Velha.style.left = ( (1-i)*1400 - i*0 )+ "px";
}


function iniciar(){
	Velha = document.querySelector("article#velha");
	meninaGuarda = document.querySelector("article#meninaguarda");
}

window.addEventListener("scroll",animar);

window.addEventListener("load",iniciar);
html, body{
margin: 0; 
padding: 0; 
height: 100%;
background: linear-gradient(hsl(200,60%,30%), hsl(200,100%,10%));
background-attachment: fixed;
}

#rolagem{
position: absolute;
width: 1px;
height: 1500%;
top: 0px;
}

article{
width: 100px;
height: 100px;
position: fixed;
}
			
#velha{
background-repeat: no-repeat;	
background-image:url('velha.png');
top: 500px;
height: 250px;
left:1400px;			
}
#meninaguarda{
background-repeat: no-repeat;	
background-image:url('meninaguarda.png');
top: 500px;			
height: 250px;
width: 140px;

}
			
#Fundo{
background-size: 550px 349px;
background-image: url('prédios.png');
background-repeat: repeat-x;	
width: 100%;
height: 400px;
position: fixed;
top:350px;			
}

#titulo{
	
	font-family: zapfino;
	font-size: 200px;
	position: fixed;
	top: -150px;
	left:500px;
}

#Principal{
 
 margin-left: 5px;
margin-right: 5px;
}
<!doctype html>
<html>
	<head>
	<title>Cloe</title>
	<script type="text/javascript" src="Cloeteste.js"></script>
		<link type="text/css" rel="stylesheet" href="Cloeteste.css"/>
	
	</head>
	<body>	
	<div id="Principal">
	<h1 id="titulo">Clo&eacute</h1>
		<article id="Fundo"></article>
		<article id="velha"></article>
		<article id="meninaguarda"></article>
		
		<div id="rolagem"></div>
		
		</div>
	</body>
</html>
    
asked by anonymous 10.12.2016 / 20:35

2 answers

0

You seem to be wanting to do a horizontal scroll, I believe the path you followed came close. But I would like to highlight some things that may be your problem. Basic Mathematics, any number multiplied by 0 (zero) will always be zero, ie in the following excerpts the value is always zero which makes them irrelevant in the operation:

// ((1-i) * 0 + i * 1400) + "px"; // ((1-i) * 1400-i * 0) + "px";

Another thing I would like to suggest is that I use parseInt () which converts to integers, so I see you leave marge for broken numbers, I already explain, and this, using parseInt, if you want of course, could have something like this: 

meninaGuarda.style.left = parseInt( (1-i)*0 + i*1400 ) + "px";
Velha.style.left = parseInt( (1-i)*1400 - i*0 )+ "px";

Another thing that I saw and that left me confused with the calculation that does later is its check in the range function, where you seem to accept numbers between 0 and 1, ie 0.4 would be an accepted number.

I believe that if you want to do a horizontal scroll as I imagine, you should get the scroll done on the page as it already does and only add on the left of the desired image. If you want faster or slower movements for each one, I suggest use of power, or add a number like 2 for 1 image and 4 for another one, which gives every time you scroll it will always move more than another. >     

11.12.2016 / 07:19
0

Jeferson, I advise you to change your animation using style left by style transform translateX. With transform you can know, asynchronously, when the animation finishes and also you will take the animation process from the main thread and make the gpu perform the animation. 

document.querySelector('body').addEventListener('mouseover', Animation);

document.querySelector('body').addEventListener('mouseout', Animation);

document.querySelector('#div-top').addEventListener("transitionend", function(event) {
    document.querySelector('#div-bottom').classList.toggle('animation-right');
});

function Animation () {
	document.querySelector('#div-top').classList.toggle('animation-right');
}
<!DOCTYPE html>
<html>
    <head>
        <title>Animation</title>
    </head>
    <body>
       <style>
           div {
               width: 24px;
               height: 24px;
               transform: translateX(0px);
               transition: transform .3s cubic-bezier(.785,.135,.15,.86);
           }
           #div-top {
               background-color: #673AB7;
           }
           #div-bottom {
               background-color: #03A9F4;
           }
           .animation-right {
               transform: translateX(48px);
           }
       </style>

       <div id="div-top"></div>
       <div id="div-bottom"></div>
    </body>
</html>
    
12.12.2016 / 14:32
Get data from a json file via url (javascript) PRESTASHOP - create cascading dropdown category