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;
}
Me encanto tu carrusel esta de 10
Mi preg…como hacer para que las imagenes sean mucho mas grades, casi de media pantalla
Hola Mario, disculpa la tardanza estoy muy ocupado en otras cosas y mi blog lo he dejado casi a un lado.
En mi video tutorial lo explico cómo hacerlo 😀
Min 33:52 https://www.youtube.com/watch?v=fiawSs96tkg
intenta hacer lo mismo pero acorde a lo que necesitas