Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Animación css3 al hacer scrolltop

JavaScript - Animación css3 al hacer scrolltop

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Animación css3 al hacer scrolltop

Publicado por ScriptShow (692 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
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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