Egyszerű parallax effekt

2020-05-15

6 éve készítettem egy bemutatót a Skrollr JS library-ról, most pedig megnézzük hogyan lehet JS nélkül, simán CSS-sel parallax effektet létrehozni.

A feladathoz képek a pexels.com weboldalról származnak.

A működő kódot ide kattintva tudod megnézni

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Parallax</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<section class="section-1">
    <h1>Lepke</h1>
</section>
<section class="section-2">
    <h1>Tigris</h1>
</section>
<section class="section-3">
    <h1>Kutya</h1>
</section>
<section class="section-4">
    <h1>Süni</h1>
</section>

</body>
</html>

CSS forráskód


* {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%
}
section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 100%;
    position: relative
}
.section-1 { background-image: url('pics/section1.jpg') }
.section-2 { background-image: url('pics/section2.jpg') }
.section-3 { background-image: url('pics/section3.jpg') }
.section-4 { background-image: url('pics/section4.jpg') }
h1 {
    font-family: arial;
    font-size: 5vw;
    color: white;
    background: rgba(0,0,0,.7);
    padding: 20px 40px;
    position: absolute;
    bottom: 50px;
    right: 50px
}

@media(max-width:600px) {
    section {
        background-attachment: scroll;
        height: 250px
    }
    h1 {
        bottom: 20px;
        right: 20px;
        padding: 15px 30px
    }
}