Scroll en una captura de pantalla - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Scroll en una captura de pantalla

Listado de Guías
Aunque parezca difícil o complicado hacer el efecto de scroll que mostramos en nuestras sección de Webs hechas con Oxygen realmente es muy sencillo. Este tipo de elemento es muy bueno y aconsejable para mostrar una captura de una página web entera como si se hiciese scroll de arriba abajo totalmente, imágenes de mucha altura etc, que se suelen hacer con programas de captura de pantalla tipo SnagIt o similares. En Oxygen esto lo podemos hacer de tres maneras diferentes:
1️⃣ - Utilizar el Composite Element llamado "Hover Scolling Image".
2️⃣ - Insertar un div y darle formato con las herramientas del editor de Oxygen.
3️⃣ - Insertar un div y darle formato con CSS.
Este es el ejemplo en el que usamos la primera opción, es decir, usando el Composite Element Hover Scrolling Image.
Para añadirlo Add+ -> Basics->Hover Scrolling Image
Por defecto nos sale el que mostramos arriba, pero podemos personalizarlo de la siguiente manera:
En el panel de estructura seleccionamos el div principal correspondiente a este elemento
hover scroll 1
De esta manera en el panel de edición nos vamos a Advanced -> Background Image y ya podemos poner la imagen que queramos. 
hover scroll 2
Las principales opciones de personalización tendremos que hacerlas modificando el CSS, para lo que se necesita ir al Code Blok del Composite Element mediante el panel de estructura.
hover scroll 3
hover scroll 4
Una vez que estamos en el Code Block vamos al panel de herramientas y seleccionamos la pestaña de CSS, una vez abierto el editor de CSS se cambia el código que hay por defecto por el que mas abajo mostramos.
En este podemos modificar lo siguiente:
- linear: Se puede cambiar por cualquiera de las timing-function de css para cambiar la manera de como se desplaza la imagen.
- 5s. Es el tiempo que tardará hasta mostrar la parte inferior de la imagen utilizada, un valor de 0.5s equivaldría a medio segundo.
.oxel_scrollingImage{
	transition: translateY linear 5s;
}
.oxel_scrollingImage__container:hover .oxel_scrollingImage__container__icon {
  opacity: 0;
  transform: translateY(100px);
}
Click para Copiar
img-10
Copiado
Logo Oxygenados
2️⃣ - Insertar un div y darle formato con las herramientas del editor de Oxygen
Insertando un div, con las herramientas de edición de Oxygen modificando algunas propiedades podemos conseguir el mismo resultado.
Insertarmos un div, lo aconsejable es darle una clase aunque no imprescindible. Le damos el ancho y el alto que nos convenga y nos dirigimos a Advanced -> Background y ponemos la imagen de fondo deseada.
hover scroll 5
Ahora toca modificar las propiedades Background Size, Background Repeat y Left como se indica con las flechas en la imagen.
hover scroll 6
Seleccionando :hover en las opciones de la clase (si no se ha dado una clase pues sería en el ID del div), solo dejaremos Left al 50% y Top en 100% como se indica con las flechas.
hover scroll 7
Devuelta en el estado inicial, vamos a Advanced->Effects->Transition y ajustamos los propiedades Transition Duration y Timing Function a gusto o necesidad, CSS Property tiene que quedar en "background-position" o en "all", mejor la primera.
hover scroll 8
Como añadido, si queremos cambiar el puntero del cursor predeterminado por el puntero por defecto cuando está encima de un enlace:
Advanced->Custom CSS y añadimos:
cursor: pointer;
hover scroll 9
Logo Oxygenados
3️⃣ - Insertar un div y darle formato con CSS.
Se inserta el div y con el mismo seleccionado vamos a Advanced -> Custom CSS
hover scroll 10
Ahí metemos este código
background-image: url(http://oxygenados.com/wp-content/uploads/2021/12/web-la-factoria-de-codigo.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position:50% 0;
width: 400px;
height: 350px;
transition: background-position 5s ease-in-out;

Click para Copiar
img-19
Copiado
Los parámetros que puedes cambiar son:
- background-image, pon la url de la imagen que quieres utilizar.
- width y height, por el ancho y alto que desees
- 5s - cambia el 5 por el valor en segundos que deseas que tarde en recorrer de arriba abajo toda la imagen.
- ease-in-out -  Por el efecto de timing que quieras, mas info.
Con el div seleccionado y el selector :hover  vamos igualmente a Advanced -> Custom CSS
hover scroll 11
Y añadimos el siguiente código:
background-position: 50% 100%;
cursor:pointer;
Click para Copiar
img-21
Copiado
Elimina la última línea si no quieres que el cursor cambie a la manita típica de cuando está sobre un enlace
Logo Oxygenados
Como siempre esperamos vuestros comentarios aquí en esta misma página o en nuestro grupo de Telegram
0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

CookieConsent v3

La nueva versión de CoockieConsent de Orest Bida, en este caso la V3, que ofrece mayores funcionalidades y mayor capacidad de personalización.

Leer más
Lighthouse: 5 consejos sencillos

Google Lighthouse es una herramienta gratuita que ayuda a analizar la calidad de las páginas web. Audita la accesibilidad, el rendimiento y el SEO, además de recomendar cambios para su mejora.

Leer más
Mostrar categorías principales de WooCommerce

Actualmente, el elemento Lista de categorías de Oxygen no puede mostrar solo las categorías principales de WooCommerce. Sin embargo, hay una solución simple que utiliza el elemento Code Block de Oxygen

Leer más