Java Script Animation

Asked

Viewed 170 times

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 scroll the images scroll all at once, I searched a lot and couldn’t solve that 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>

javascript css html5

2 answers

0

Jeferson, I advise you to swap your animation using the left style for the translateX style. With Transform you can know, asynchronously, when the animation ends and also you will take the main thread animation process and make the gpu run 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>

0

You seem to be wanting to do a horizontal scroll, I believe the path you followed came close. But I’d like to point out a few things that might be your problem. Basic mathematics, any number multiplied by 0(zero) will always be zero, ie in the following passages 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’d like to suggest is that you use the parseint() that converts to integers, so I’ve seen you leave Mark for broken numbers, I explain, and that, using parseint, if you want to be clear, 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 I saw that left me confused with the calculation you do later is your check in the interval function, where you seem to accept numbers between 0 and 1, that is, 0.4 would be an accepted number.

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

  • I made a change but, still with the same problem,.

  • So bro, you need to add different size to each image that will change, otherwise it will continue the same thing.

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.