स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

अनुशंसित

19 May 2025

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;
}

स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

अनुशंसित

एनिमेशन

माइकीकुन द्वारा एक कोड

HTML CSS नेवबार कोड

HTML

CSS

JS

अनुशंसित

एनिमेशन

माइकीकुन द्वारा एक कोड

HTML CSS नेवबार कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS