Una imagen que se desplaza al pasar el ratón permite insertar imágenes muy largas que se deslizan hacia arriba al pasar el ratón por encima.
Esto es ideal para animar imágenes que son mucho más largas que anchas. Esto permite no acaparar todo el espacio de una página y, al mismo tiempo, permitir la interacción con el usuario.
Este tipo de animación se encuentra a menudo en los sitios de diseño web. Es ideal para mostrar el diseño de la página diseño de la página de inicio y construir una cartera original...
Para entenderlo mejor, he preparado un vídeo que muestra el resultado final.
En este artículo, explicaré cómo hacer esto con el Constructor visual de Divi.
Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
- 1 - Preparar las imágenes para el portafolio
- 2 - Construir el diseño
- 3 - Ajustes de los módulos de línea e imagen
- 4 - Añade el CSS para conseguir una imagen que se desplace al pasar el ratón por encima
- 5 - Entender cómo modificar el código
- Una imagen que se desplaza al pasar el ratón: ¡es posible con Divi!
1 - Preparar las imágenes para el portafolio
En primer lugar, necesitará tener las imágenes. Deben estar en formato vertical y ser mucho más largas que anchas. Para mi ejemplo, utilicé varios tamaños de imágenes para ver si había algún problema con el efecto de desplazamiento al pasar el ratón:
- Imagen 1: 1244px * 3996px
- Imagen 2 : 1244px * 3633px
- Imagen 3 : 800px * 2537px
Le aconsejo que utilice imágenes de 800px de ancho como mínimo. En cuanto a la longitud, puede ser diferente pero tendrás que tenerlo en cuenta en tu CSS. Lo veremos más adelante, en el capítulo "entender cómo modificar el código".
Lea también: cómo cambiar el tamaño de las imágenes utilizadas por Divi
2 - Construir el diseño
Ir a la Páginas > Todas las páginas y añada una nueva página (o edite una página existente). Active el Constructor Visual Divi.
Siguiente:
- Añadir una SECCIÓN ESTÁNDAR (en azul)
- Añade una columna LÍNEA 1 (1/1) (en verde). Puede insertar un módulo de texto. Esto le permitirá mostrar un título.
- Añade una nueva LÍNEA (en verde) cuyo asentamiento se divide en 3
- En cada columna, añadirá un módulo IMAGE
Descubra todos los recursos oficiales sobre la Desplácese a Divi, aquí.
3 - Ajustes de los módulos de línea e imagen
Antes de seguir adelante, tienes que hacer algunos ajustes para que el efecto de imagen deslizante hacia arriba funcione...
3.1 - Parámetros de la línea
Abra la configuración de la línea verde que recibirá sus imágenes (icono de rueda dentada):
- en la pestaña ESTILO > DIMENSIONES: "pasar esta línea en ancho completo" = SÍ
- ficha > ID y CLASES CSS: introduzca ad-wrap en el campo CSS CLASS
Termine guardando los cambios.
3.2 - Parámetros del módulo de imagen
Abra la configuración de cada módulo IMAGE (icono de rueda dentada) :
- en la pestaña ESTILO > ALINEACIÓN: elija la alineación centrada
- en la pestaña AVANZADO > ID y CLASES CSS: introduzca ad-height-img-x en el campo CSS CLASS. La "x" debe ser reemplazada por 1, 2 o 3 dependiendo de sus imágenes (ad-height-img-1, ad-height-img-2, ad-height-img-3). Así, tendrá que asignar un nuevo nuemro para cada módulo de imagen.
Guarde los cambios.
4 - Añade el CSS para conseguir una imagen que se desplace al pasar el ratón por encima
Ahora que ha configurado su línea y sus módulos, puede copiar y pegar el siguiente código en el archivo Apariencia > Personalizado > CSS adicional :
/* image scroll up - ligne 3 colonnes */
.ad-wrap .et_pb_column_1
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #7F32D3;
}
.ad-wrap .et_pb_column_2
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #FF2A62;
}
.ad-wrap .et_pb_column_3
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #00C4AA;
}
.ad-height-img-1, .ad-height-img-2, .ad-height-img-3
{
position: absolute;
top: 0;
width: 100%;
height: auto;
transition: top 5s ease-out 0s;
}
.ad-height-img-1:hover
{
top: -850px;
}
.ad-height-img-2:hover
{
top: -750px;
}
.ad-height-img-3:hover
{
top: -800px;
}
@media screen and (max-width: 980px) {
.ad-wrap .et_pb_column_1 {
height: 500px;
}
.ad-wrap .et_pb_column_2 {
height: 500px;
}
.ad-wrap .et_pb_column_3 {
height: 500px;
}
.ad-height-img-1:hover {
top: -1200px;
}
.ad-height-img-2:hover {
top: -1050px;
}
.ad-height-img-3:hover {
top: -1100px;
}
}
Este código es meramente informativo, ya que tendrá que modificarlo según sus necesidades...
5 - Entender cómo modificar el código
5.1 - Atención a .et_pb_column_1
.ad-wrap .et_pb_column_1 => en fonction du nombre de colonnes et du nombre de sections dans votre page, la classe CSS .et_pb_column_1 peut changer. Vous devrez alors modifier le numéro pour .et_pb_column_2 - .et_pb_column_3 etc. N'hésitez pas à inspecter le code dans votre navigateur pour savoir sur quelle classe CSS agir.
{
overflow: hidden; => ne pas toucher
height: 300px; => vous pouvez modifier la hauteur de la boite de votre image si vous le souhaitez.
border:5px solid #BBB; => ceci n'est que du style, vous pouvez le supprimer ou le modifier.
box-shadow: 5px 5px #7F32D3; => ceci n'est que du style, vous pouvez le supprimer ou le modifier.
}
5.2 - La clase .ad-height-img-x
.ad-height-img-1, .ad-height-img-2, .ad-height-img-3
{
position: absolute; => ne pas toucher
top: 0; => ne pas toucher
width: 100%; => ne pas toucher
height: auto; => ne pas toucher
transition: top 5s ease-out 0s; => vous pouvez changer la rapidité du scroll. Si vous trouvez que 5 secondes c'est trop rapide, augmentez cette valeur. Attention, au plus votre image est longue, au plus le temps de défilement sera rapide et inversement.
}
5.3 - Adaptación a la longitud de la imagen
.ad-height-img-1:hover {
top: -850px; => modifier cette valeur en fonction de la longueur de votre image. Si l'image est très longue, augmentez cette valeur, si l'image est courte, réduisez cette valeur.
}
.ad-height-img-2:hover {
top: -750px;
}
.ad-height-img-3:hover {
top: -800px;
}
Como puedes ver en el código anterior, tendrás que ajustar el valor "top" según la longitud de tus imágenes. Si utilizas imágenes que tienen todas el mismo tamaño y proporción, es más fácil.
5.4 - Adaptación del código para pantallas pequeñas (responsive) :
El consultas de medios permiten influir en la apariencia de ciertos elementos según el tamaño de la pantalla. Esta es una de las formas de gestionar la respuesta.
@media screen and (max-width: 980px) {
.ad-wrap .et_pb_column_1 {
height: 500px; => en version mobile, je propose de passer la hauteur à 500px au lieu de 300px dans la version de bureau
}
.ad-wrap .et_pb_column_2 {
height: 500px;
}
.ad-wrap .et_pb_column_3 {
height: 500px;
}
.ad-height-img-1:hover {
top: -1200px; => augmentez la valeur du "top" pour les versions mobiles. Vous devrez adapter chaque valeur en fonction de votre image.
}
.ad-height-img-2:hover {
top: -1050px;
}
.ad-height-img-3:hover {
top: -1100px;
}
}
¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.
Una imagen que se desplaza al pasar el ratón: ¡es posible con Divi!
¿Qué te parece este consejo? ¿Podría formar parte de su futuro proyecto? Puede parecer complicado, pero no lo es. Sólo tienes que seguir los pasos y adaptarlos a tu página y a tus necesidades.
De lo contrario, le sugiero que descargue los archivos .JSON de forma gratuita. La carpeta contiene dos archivos :
- el archivo SECTION en formato .JSON: debe ser importado a la biblioteca
- el diseño completo en formato .JSON: puede importarse en una nueva página como un diseño.
"Imágenes que se desplazan con el ratón"Descargado 584 veces
Para ir más allá con el efecto de desplazamiento, aquí hay algunos recursos adicionales:
Bonjour,
Et merci pour ce tuto très très intéressant.
Je l’ai mis en œuvre pour test sur une de mes pages. Ça me donne des idées et j’aimerai avoir votre avis. Pensez-vous que je pourrais l’adapter dans ce qui existe déjà sur cette page ? Dans l’écran de l’ordinateur ?
Je vous donne le lien et vous le dites ce que vous en pensez :
https://www.valerie-mersier.fr/creation-webdesign-vignoble-domaine-burle/
Merci de votre retour…
Valérie
Bonsoir Valérie,
Merci 😉
J’ai regardé ton lien et effectivement ça pourrait être intéressant. Maintenant pour arriver à le mettre dans l’ordinateur ça risque d’être un peu costaud… à tester. Sinon, il y a aussi ce tuto qui pourrait faire l’affaire : Créer un effet de scroll dans un mockup
A bientôt !
Merci Lydia…
je vais faire un essai dès que j’en aurait le temps 🙂
et je ne manquerai pas de te tenir au courant.
Bien à toi,
Valérie
Bonjour, j’ai suivi le tuto et voilà le résultat :O
https://web-etcetera.fr/dev/
Pouvez-vous me dépanner ?
j’ai chargé le layout pardon, avec le tuto, le résultat était différent mais bizarre aussi
Salut Sonia,
Les paramétrages ont été faits en fonction de mon site de test. Si vous l’utilisez ailleurs, il faudra certainement faire des petites modifications. L’idée est de vous fournir une base, après il faut la customiser 😉
Désolée Sonia, j’arrive un peu trad, je ne vois rien sur la page.
Bonjour,
Je souhaiterais ajouter un hover sur des posts générés dynamiquement (articles, etc.), comme vous le faites pour vos articles avec cette image en transparence. Avez-vous un tuto qui explique comment procéder ?
Merci d’avance,
Priscille.
Salut Priscille, tu trouveras la réponse dans ce tuto : https://astucesdivi.com/template-article-divi/