Código de JavaScript - Cambiar el aspecto de un elemento al mover el scroll

Pos: 4

Val: 2.019

Ha mantenido su posición en JavaScript (en relación al último mes)

Cambiar el aspecto de un elemento al mover el scroll

JavaScript

(4)

Publicado el 4 de Noviembre del 2016 por Scriptshow (141 códigos)

3.643 visualizaciones desde el 4 de Noviembre del 2016

Sencillo experimento basado en el evento OnScroll para cambiar el aspecto, posición, visibilidad, etc. de un elemento u objeto.
Hemos visto como aparecen progresivamente contenidos según avanzamos el scroll de pantalla... Este básico script, puede adaptarse para éso y más efectos; no consume recursos innecesarios, no precisa librería alguna, sólo una función JS y pocas líneas de código se encargan de casi todo.

Requerimientos

Un navegador web o dispositivo compatible.

1.0
(4)

Actualizado el 6 de Noviembre del 2016 (Publicado el 4 de Noviembre del 2016)

gráfica de visualizaciones de la versión: 1.0

3.644 visualizaciones desde el 4 de Noviembre del 2016

<!DOCTYPE html>

<html>

<head>

<style>

.test1 {

background:lightblue;

.test2 {

background:transparent;

</style>

</head>

<body style="height:800px;font:normal 16px/16px sans-serif">

<p><b>Mueve el scroll para ver el efecto...</b></p>

<p id="test" style="position:fixed;padding:24px;transition:all 2s">

Mueve el scroll hacia abajo, cambiará la class de este párrafo. Retorna el scroll arriba y volverá a su estado anterior.

</p>

<script>

window.onscroll=function() {

if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {

document.getElementById("test").className="test1";

} else {

document.getElementById("test").className="test2";

</script>

</body>

</html>

Comentarios sobre la versión: 1.0 (4)

xve

6 de Noviembre del 2016

Que sencillez!!!

Responder

Alejandro

6 de Noviembre del 2016

Muy bueno!!!

Responder

NoTengoNombre

15 de Noviembre del 2016

Tu codigo no funciona , ni chrome , firefox ni en el navegador embebido de netbeans

Responder

NoTengoNombre

15 de Noviembre del 2016

Disculpa el mensaje de antes , funciona perfectamente ,
No me di cuenta y añadí una 's' a

windows.onscroll = function () {

en vez

window.onscroll = function () {

Responder

Comentar la versión: 1.0

http://lwp-l.com/s3733

Movimiento inverso al mouse

Movimiento aleatorio bounce simple

Código de JavaScript - Cambiar el aspecto de un elemento al mover el scroll

Requerimientos

1.0(4)

Comentarios sobre la versión: 1.0 (4)

Comentar la versión: 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

1.0
(4)