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

अनुशंसित

13 September 2025

CSS लोडिंग एनीमेशन HTML संरचना

12 January 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 एनिमेशन तकनीक

अनुशंसित

CSS लोडिंग बार एनीमेशन HTML

CSS लोडिंग एनीमेशन HTML संरचना

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

HTML

CSS

JS

अनुशंसित

CSS लोडिंग बार एनीमेशन HTML

CSS लोडिंग एनीमेशन HTML संरचना

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS