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é</h1>
<article id="Fundo"></article>
<article id="velha"></article>
<article id="meninaguarda"></article>
<div id="rolagem"></div>
</div>
</body>
</html>
I made a change but, still with the same problem,.
– Jeferson Soares
So bro, you need to add different size to each image that will change, otherwise it will continue the same thing.
– wallacesilva09