JavaScript - Animación css3 al hacer scrolltop

   
Vista:

Animación css3 al hacer scrolltop

Publicado por Laura (10 intervenciones) el 25/10/2017 12:34:18
Saludos,

Estoy perdiendo el juicio intentando que una sencilla animación se produzca al hacer scroll... ¡Y sin embargo sí funciona el alert! El alert sí se produce al bajar 700px, mientras la animación se hace al cargar la página (no obedece al scroll).

JS:

1
2
3
4
5
6
7
onscroll=function()
{
	var scroll = document.body.scrollTop;
	if(scroll > 700){
	alert("Hola");
	document.getElementById('tecno1').style.animationName="chocolate";}
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
#tecno1{
	width:0%;
	height:100%;
	background:#00A6AE;
	animation-duration:4s;
	animation-name:chocolate;
	animation-fill-mode:forwards;
}
 
@keyframes chocolate{
	from {width:0%;}
	to {width:80%;}
}

¿Alguien sabría por qué? ¡Mil gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

Animación css3 al hacer scrolltop

Publicado por ScriptShow (500 intervenciones) el 25/10/2017 14:04:47
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
Imágen de perfil de ScriptShow

Animación css3 al hacer scrolltop

Publicado por ScriptShow (500 intervenciones) el 27/10/2017 11:50:45
Disculpad los posibles fallos, quizás no entendí bien la cuestión.
Veamos ahora los ejemplos...

Opción - 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#tecno1 {
width:0%;
height:100%;
background:#00A6AE;
animation-duration:4s;
animation-fill-mode:forwards;
}
 
@keyframes chocolate {
from {width: 0%}
to {width: 80%}
}
</style>
 
<script>
onscroll = function() {
if (document.body.scrollTop > 700 ||  document.documentElement.scrollTop > 700) {
document.getElementById("tecno1").style.animationName = "chocolate";}
}
</script>
 
<div id="tecno1"></div>

Opción - 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.tecno1 {
width:0%;
height:100%;
position:fixed;
overflow:hidden;
}
 
.chocolate {
width:80%;
height:100%;
position:fixed;
background:#00A6AE;
-webkit-transition:all 4s ease;
-moz-transition:all 4s ease;
-ms-transition:all 4s ease;
transition:all 4s ease;
}
</style>
 
<script>
onscroll = function() {
if (document.body.scrollTop > 700 ||  document.documentElement.scrollTop > 700){
document.getElementById("tecno1").className = "chocolate";}
}
</script>
 
<div id="tecno1" class="tecno1"></div>

P.D.: No será necesario decir que la segunda es mucho más compatible con todos los navegadores web, actuales ó no.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Animación css3 al hacer scrolltop

Publicado por Laura (10 intervenciones) el 27/10/2017 13:01:37
Muchas gracias por tu respuesta, ScriptShow. De hecho, y tal y como tu resuelves en el código, tan solo debía eliminar la línea de estilo (CSS) en la que se especifica animation-name, y funciona correctamente. Me gustaría preguntarte: ¿es posible añadir la compatibilidad con otros navegadores en la opción 1?

¡Muchas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad