Saben… cuando inicié en el mundo del diseño web, hace 4 años, me encantaba estos diseños, pero jamás supe como hacerlos, y hoy ha llegado el dia de lograrlo con Divi y sin plugins.
Creo que en el mundo del diseño web, la creatividad y la innovación siempre han estado en constante evolución. En esta era digital, las experiencias visuales cautivadoras son esenciales para atraer a los visitantes y mantener su interés. ¿Te has preguntado alguna vez cómo lograr un efecto impresionante en tu sitio web utilizando herramientas comunes y un toque de ingenio? Yo también
En este video tutorial, exploraremos una técnica muy buena que combina la versatilidad de Divi, la potencia de los fondos cambiantes y la interacción con el contenido relevante.
Descarga el Diseño Listo Para Usar por Solo $4.99 y Ahorra Horas de Trabajo
No necesitas recrear todo desde cero. Con la descarga directa de este layout, tendrás acceso instantáneo a este diseño, ahorrándote horas de diseño y desarrollo.
Comprar en
Códigos que usaremos en este ejercicio
CSS para Sección Especial – Apartado Antes
mix-blend-mode: multiply;
Paginación
<div class="swiper-pagination"></div>
Librería Swiper y Funcionalidad
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
jQuery(document).ready(function($) {
var uiSlide = new Swiper(".ui-primero", {
slidesPerView: "auto",
spaceBetween: 30,
loop: true,
navigation: {
nextEl: ".ui-next",
prevEl: ".ui-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function(index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
});
});
</script>
<script>
jQuery(document).ready(function($) {
$('.ui-nav').appendTo('.ui-fondo');
});
</script>
<script>
jQuery(document).ready(function($) {
function updateUIBasedOnSlide(slideNumber) {
$(".contenido > div").removeClass("active");
$(".c-" + slideNumber).addClass("active");
$(".ui-fondo").removeClass(function(index, className) {
return (className.match(/(^|\s)background-\S+/g) || []).join(' ');
}).removeClass('animate-bg');
$(".ui-fondo").addClass("background-" + slideNumber).addClass('animate-bg');
}
$(".ui-fondo").on('animationend', function() {
$(this).removeClass('animate-bg');
});
updateUIBasedOnSlide(1);
$(".swiper-wrapper").on("transitionend", function() {
var slideNumber = $(".swiper-slide.swiper-slide-active").attr("class").match(/s-(\d+)/)[1];
updateUIBasedOnSlide(slideNumber);
});
});
</script>Estilos css
.ui-fondo.background-1::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-La-razon-de-estar-contigo-min.jpg');
}
.ui-fondo.background-2::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Jumanji-min.jpg');
}
.ui-fondo.background-3::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-No-hay-home-min.jpg');
}
.ui-fondo.background-4::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Spiderman-min.jpg');
}
.ui-fondo.background-5::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Pixels-min.jpg');
}
.ui-fondo.background-6::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Kung-fu-panda-2-min.jpg');
}
.ui-fondo.background-7::before {
background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Passengers-min.jpg');
}
.ui-fondo.background-8::before {
background-image: url("https://plus.diviui.com/wp-content/uploads/2023/08/bar-24.jpg") ;
}
/* Tarjetas Activas */
.et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
position: relative;
height: 400px;
object-fit: cover;
transition: 0.6s ease;
}
.et_pb_blurb .et_pb_blurb_content img {
height: 300px;
transition: height 0.3s ease;
object-fit: cover;
}
/* Estilos Responsivos Tarjetas activas */
/*tablet*/
@media only screen and (max-width: 980px) {
.et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
height: 300px;
transition: 0.6s ease;
}
.et_pb_blurb .et_pb_blurb_content img {
height: 250px;
transition: height 0.3s ease;
}
}
/*telefono*/
@media only screen and (max-width: 767px) {
.et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
height: 300px;
}
.et_pb_blurb .et_pb_blurb_content img {
height: 250px;
}
}
/* Fondos de Imagen */
.ui-fondo {
transition: background-image 0.5s ease-in-out;
overflow: hidden;
}
.ui-fondo::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
}
.animate-bg::before {
animation: bgNext 0.7s forwards;
}
@keyframes bgNext {
0% {opacity: 0.4; transform: scale(1.1);}
100% {opacity: 1; transform: scale(1);}
}
/* Contenido del Carrusel */
.item-ui {
opacity:0;
position: absolute;
transform: translateY(-10%);
transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.ui-fondo .contenido > div.active {
opacity: 1;
/* animación de los títulos*/
transform: translateY(0%);
}
/* Navegación de Números */
.ui-numeros .et_pb_code_inner {
height: 103%;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
z-index: 20;
display: flex;
align-items: center;
flex-direction: column;
height: 100%;
justify-content: space-between!important;
}
.swiper-pagination-bullet {
position: relative;
width: 14px!important;
height: 14px!important;
font-size: 1px!important;
text-align: center;
line-height: 14px!important;
color: #fff!important;
opacity: 1!important;
background: #585858 !important;
z-index: 999;
transition: 0.3s ease-in-out!important;
}
.swiper-pagination-bullet-active {
color: #000!important;
background: #fff!important;
z-index: 2;
font-size: 14px!important;
width: 24px!important;
height: 24px!important;
line-height: 24px!important;
transition: 0.3s ease-in-out!important;
}
/* Estilos Responsivos */
@media only screen and (max-width: 767px) {
.swiper-pagination-bullet {
width: 10px!important;
height: 10px!important;
font-size: 0!important;
line-height: 10px!important;
transition: 0.3s ease-in-out!important;
}
.swiper-pagination-bullet-active {
width: 15px!important;
height: 15px!important;
line-height: 10px!important;
transition: 0.3s ease-in-out!important;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
align-items: center;
flex-direction: row;
}
}
@media only screen and (max-width: 767px) {
.contenido {
height: 370px;
}
}
@media only screen and (max-width: 980px) {
.contenido {
height: 260px;
}
}
/* Estilos Adicionales */
.ui-prev.swiper-button-disabled, .ui-next.swiper-button-disabled {
opacity: .5!important;
}
.et_pb_icon_wrap:hover .et-pb-icon {
color: #000!important;
}
.swiper-slide {
display: flex!important;
justify-content: center!important;
align-items: center!important;
}
.ui-fondo.et_pb_section {
display: flex;
align-items: center;
}
.ui-fondo .contenido {
display: flex;
align-items: center;
}
0 comentarios