Heading 4- (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 4- (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 4- (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 4- (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heading 1- (h1)
Heading 2- (h2)
Heading 3- (h3)
Heading 4- (h4)
Heading 5- (h5)
Heading 6- (h6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Codigo del sitio
Animacion intro Archive Murales
.hero-img {
clip-path: inset(0% 0% 100% 0%); /* ocultas por abajo */
/*transform: scale(.2);*/
transform: translateY(-20px);
}
.hero-img img {
width: 15vw;
height: 45vh;
object-fit: none;
}
.hero-title,
.hero-text {
opacity: 0;
transform: translateY(20px);
}
Animacion intro Archive Murales js
<!-- Incluye las librerías -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
// Esperamos a que cargue todo el DOM
document.addEventListener('DOMContentLoaded', () => {
// 1) GSAP: Reveal de las imágenes en secuencia
const imgs = document.querySelectorAll('.hero-img');
const tl = gsap.timeline();
tl.to(imgs, {
duration: .8,
clipPath: 'inset(0% 0% 0% 0%)', // descubre desde abajo hacia arriba
ease: 'power2.out',
stagger: 0.8, // secuencia entre cada imagen
scale:1,
translateY: 0,
});
// 2) GSAP: Aparecer el título justo después
tl.to('.hero-title', {
duration: .8,
opacity: 1,
y: 0,
ease: 'power3.out'
}, '-=0.2'); // solapamos un poco con la última imagen
// 3) anime.js: Fade-in y slide del párrafo
tl.add(() => {
anime({
targets: '.hero-text',
opacity: [0,1],
translateY: [20, 0],
duration: 200,
easing: 'easeOutQuad'
});
});
});
Efecto hover Murales
<!--efecto imagen hover-->
selector{
filter: grayscale(0) sepia(0) brightness(1);
transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
cursor: pointer;
}
selector:hover{
transform: scale(1.5);
filter: grayscale(0.5) sepia(0.75) brightness(0.75);
}
<!--Efecto titulo de la imagen-->
.shape{
position: absolute;
bottom: 5%;
right: 5%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color:#fff;
border: none;
padding: 10px;
transform: scale(0.75);
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
Tetxura background sitio
html, body{height: 100%; width: 100%; background-color: #fff;}
body:before {
filter: url(#grainy);
}
.grain{
position: absolute;
pointer-events: none;
cursor: none;
}
body:after, body:before {
position: fixed;
left: 0;
top: 0;
content: "";
width: 100%;
height: 100%;
z-index: 1023023023020;
pointer-events: none;
opacity: 20%;
color: #aeae9d;
}
Breadcum Murales y lightbox
/* Aplica color al ultimo elemento de breadcum */
.elementor-icon-list-items:nth-last-child(1) {color: #DA1884;}
/* Eliminar el titulo del lightbox*/
.elementor-slideshow__title {
display: none;
}
Efecto hover label Murales home page
.img-wrapper {
position: relative;
}
.tag {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
color: #221C35;
padding: 8px 16px;
border-radius: 4px;
text-transform: uppercase;
/* font-size: .6rem; */
opacity: 0;
white-space: nowrap;
z-index: 10;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
}
@media (max-width: 767px) {
.img-wrapper {
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
const imgWrappers = document.querySelectorAll('.img-wrapper');
imgWrappers.forEach(imgWrapper => {
const tag = imgWrapper.querySelector('.tag');
imgWrapper.addEventListener('mouseenter', () => {
gsap.to(tag, {
opacity: 1,
bottom: '25px', // Mostrar en la posición final
duration: 0.3,
ease: 'easeInOut'
});
});
imgWrapper.addEventListener('mouseleave', () => {
gsap.to(tag, {
opacity: 0,
bottom: '-30px', // Ocultar
duration: 0.3,
ease: 'easeInOut'
});
});
});
</script>
