Cambiar la imagen dinámicamente cuando el usuario se desplaza usando JavaScript | Serie 1
Puede haber situaciones en las que la imagen deba cambiar dinámicamente según la entrada del usuario. En este caso, cuando el usuario se desplaza hacia abajo.
Acercarse:
- Configuración de un detector de eventos de desplazamiento para saber que el usuario ha desplazado la página.
- Cálculo de los píxeles que el usuario ha desplazado verticalmente hacia arriba. Se accede mediante el uso del elemento scrollTop.
document.documentElement.scrollTop
- Usando ese valor para cambiar la fuente de la imagen dinámicamente.
Ejemplo 1: En este ejemplo, cambiaremos la fuente de la imagen siempre que la página se desplace 150 píxeles verticalmente. La página consta de una imagen y una sección para el texto. Están diseñados a través de CSS interno.
El window.onscrolloyente llamaría a una función cada vez que el usuario se desplaza. Luego, la función llamada selecciona la imagen usando document.getElementById("myImage")y cambia la ruta de origen de la imagen cada vez que los píxeles desplazados cruzan 150px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to change image dynamically
when user scrolls down?
</title>
<style media="screen">
img {
position: fixed;
width: 30%;
}
.main-content {
padding-left: 35%;
height: 1000px;
}
h1,
h3 {
color: green;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"
alt="GeeksforGeeks Logo" id="myImage">
<div class="main-content">
<h1>GeeksforGeeks</h1>
<h3>First Image Section</h3>
<p>
Scroll past the below line
to see the change
</p>
<hr>
<h3>Second Image Section</h3>
<p>
Scroll back up to see
the original image
</p>
</div>
<script>
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
var image = document.getElementById("myImage");
if (document.documentElement.scrollTop > 150)
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
else
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, cambiaremos la disposición de las imágenes dinámicamente dependiendo de cuánto se haya desplazado el usuario hacia abajo. La página consta de cuatro imágenes en una posición fija en la parte inferior de la página.
La función llamada por el oyente de desplazamiento baraja dinámicamente la fuente de la imagen. Esto nos da un aspecto giratorio para las imágenes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Change Image Dynamically when
User Scrolls using JavaScript ?
</title>
<style media="screen">
.main-content {
height: 800px;
}
.footer {
position: sticky;
bottom: 0;
background-color: white;
}
.footerRow::after {
content: "";
clear: both;
display: table;
position: sticky;
bottom: 0;
width: 100%;
}
.footerColumn {
float: left;
width: 25%;
display: table;
position: relative;
margin: auto;
}
img {
width: 100%;
}
h1,
h3 {
color: green;
}
</style>
</head>
<body>
<div class="main-content">
<h1>GeeksforGeeks</h1>
<h3>Section One</h3>
<p>Scroll here to see the change</p>
<hr>
<h3>Section Two</h3>
<p>Scroll here to see the change</p>
<hr>
<h3>Section Three</h3>
<p>Scroll here to see the change</p>
<hr>
<h3>Section Four</h3>
<p>Scroll here to see the change</p>
<hr>
</div>
<div class="footer">
<div class="footerRow">
<div class="footerColumn">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
id="image1">
</div>
<div class="footerColumn">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"
id="image2">
</div>
<div class="footerColumn">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200121120603/GeeksforGeeks30.png"
id="image3">
</div>
<div class="footerColumn">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191026152101/geeks_for_geeks.jpg"
id="image4">
</div>
</div>
</div>
<script>
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
var imageSource1 =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
var imageSource2 =
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";
var imageSource3 =
"https://media.geeksforgeeks.org/wp-content/uploads/20200121120603/GeeksforGeeks30.png";
var imageSource4 =
"https://media.geeksforgeeks.org/wp-content/uploads/20191026152101/geeks_for_geeks.jpg";
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
var image4 = document.getElementById("image4");
if (document.documentElement.scrollTop < 150) {
image1.src = imageSource1;
image2.src = imageSource2;
image3.src = imageSource3;
image4.src = imageSource4;
} else if (
document.documentElement.scrollTop < 250) {
image1.src = imageSource2;
image2.src = imageSource3;
image3.src = imageSource4;
image4.src = imageSource1;
} else if (
document.documentElement.scrollTop < 350) {
image1.src = imageSource3;
image2.src = imageSource4;
image3.src = imageSource1;
image4.src = imageSource2;
} else {
image1.src = imageSource4;
image2.src = imageSource1;
image3.src = imageSource2;
image4.src = imageSource3;
}
}
</script>
</body>
</html>
Producción: