Dominar el arte de las puertas correderas: técnicas de animación CSS y GSAP

1917 Geoffkats

Abrir en el editor Publica tu código

Dominar el arte de las puertas correderas: técnicas de animación CSS y GSAP

Recomendado

28 August 2024

Un código de youssefdahroug2005

HTML

CSS

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Ensure the content fits within the viewport */
    font-family: 'SparkyStonesRegular', monospace;
    scroll-behavior: smooth; /* Smooth scrolling */
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(228, 224, 221, 0.5);
    z-index: 1000;
}

.door {
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(255, 165, 0, 0.8);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.left-door,
.right-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transition: all 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}

.left-door {
    left: 0;
    background-image: url('./assets/img/2150714035.jpg');
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.left-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-door {
    right: 0;
    background-image: url('./assets/img/loader-lefts.jpg');
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.left-door::before,
.right-door::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Light white overlay */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    pointer-events: none; /* Ensures underlying content is still interactable */
}

.left-door::before {
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.right-door::before {
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.text {
    position: relative;
    font-size: 4.8vw;
    font-weight: bold;
    font-family: 'SparkyStones', monospace;
    color: #ffffff;
    text-align: center;
    margin-left: 1.5cm;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.content {
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    padding: 50px;
}

Dominar el arte de las puertas correderas: técnicas de animación CSS y GSAP

Recomendado

Sitio web del tiempo

sociedad moderna

Un código de youssefdahroug2005

HTML

CSS

JS

Recomendado

Sitio web del tiempo

sociedad moderna

Un código de youssefdahroug2005

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS