Slide-In Effekt

HTML

  
<html lang="de">
    <head>
    </head>
    <body>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.,</div>
        </div>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="flex_einfliegen">
            <img src="#">
            <div class="text_einfliegen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

CSS

  
body {
    margin: 0;
    background: rgb(3, 3, 124);
    font-family: sans-serif;

}

.flex_einfliegen {

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    margin: 5%;
    padding: 5%;
}

.text_einfliegen {
    width: 50%;
    text-align: justify;
    padding: 2%;
    color: white;
    font-size: 1.5em;
    display: flex;
    align-items: center;


}

.flex_einfliegen>img {
    width: 40%;
    transition: transform 2s;
}

.flex_einfliegen:nth-child(odd) {
    flex-direction: row-reverse;
    background: rgb(244, 164, 96);
}

.flex_einfliegen:nth-child(even) {
    background: #E53F71;
}

.flex_einfliegen:nth-child(odd)>img {
    transform: translateX(100px);
}

.flex_einfliegen:nth-child(even)>img {
    transform: translateX(-100px);
}

.einfliegen {
    transform: translateX(0);
    transition: transform 2s;
}


@media (max-width:950px) {

    .flex_einfliegen,
    .flex_einfliegen:nth-child(odd) {
        flex-direction: column-reverse;
    }

    .text_einfliegen {
        width: 80%;
    }

    .flex_einfliegen>img {
        width: 84%;
    }

}

JS

  
  window.addEventListener("load", function () {
    let imgEinfliegen = document.querySelectorAll(".flex_einfliegen > img");
    imViewport();
    function imViewport() {
        for (let i = 0; i < imgEinfliegen.length; i++) {
            if (imgEinfliegen[i].getBoundingClientRect().top >= 0) {
                if (imgEinfliegen[i].getBoundingClientRect().top <= window.innerHeight) {
                    imgEinfliegen[i].style.transform = "translateX(0)";
                }
            }
            if (imgEinfliegen[i].getBoundingClientRect().bottom >= 0) {
                if (imgEinfliegen[i].getBoundingClientRect().bottom <= window.innerHeight) {
                    imgEinfliegen[i].classList.add("einfliegen");
                }
            }
        }
    }
    window.addEventListener("scroll", imViewport);
})

academy.of.webdesign

academy.of.webdesign

Slide-In

HTML

CSS

CSS

JS