Question

I really like the smooth effect that makes the header picture disappearing on this page on scroll down. Check it out.

Unfortunately looking at the code I can't find out how the developper achieved this.

Any idea?

Many thanks,

Gregory

Answer 1

Here's a little demo using jQuery (which is not necessary, but i assume you already use it, and it's easier to read).

$(window).scroll(function(){
    if($(window).scrollTop() > 100) {
        $('header').addClass('hide');
    }
    else {
        $('header').removeClass('hide');
    }
});

body {
    margin:0;
    padding:0;
}
header {
    width:100%;
    height:200px;
    background:url('https://source.unsplash.com/random') center center;
    background-size:cover;
    transition:opacity 1s, transform 1s;
}
header.hide {
    opacity:0;
    transform:translateY(100px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header></header>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna molestie at elementum eu facilisis sed odio morbi. Etiam non quam lacus suspendisse faucibus. Euismod in pellentesque massa placerat duis. Nibh venenatis cras sed felis eget. Neque viverra justo nec ultrices dui sapien eget mi proin. A iaculis at erat pellentesque adipiscing commodo elit. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Id leo in vitae turpis massa. Orci dapibus ultrices in iaculis nunc sed augue. Nunc consequat interdum varius sit amet.</p>
        <p>Enim nec dui nunc mattis. Quisque non tellus orci ac auctor augue mauris. Sit amet aliquam id diam maecenas. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Commodo viverra maecenas accumsan lacus vel facilisis. Dignissim enim sit amet venenatis urna cursus eget. Enim nunc faucibus a pellentesque sit amet. Placerat vestibulum lectus mauris ultrices eros in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Amet massa vitae tortor condimentum lacinia quis vel eros donec.</p>
        <p>Auctor augue mauris augue neque gravida. Elementum pulvinar etiam non quam lacus. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. A scelerisque purus semper eget duis at tellus at. Sit amet massa vitae tortor condimentum lacinia quis. Convallis posuere morbi leo urna molestie at. Egestas diam in arcu cursus euismod quis. Integer vitae justo eget magna fermentum. Elit ut aliquam purus sit. Tortor id aliquet lectus proin nibh nisl condimentum id.</p>
        <p>Porttitor leo a diam sollicitudin tempor id. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Elit at imperdiet dui accumsan. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Aliquam faucibus purus in massa tempor nec feugiat nisl. Aliquet lectus proin nibh nisl. Lectus magna fringilla urna porttitor rhoncus dolor. Quisque id diam vel quam elementum pulvinar etiam non quam. Nulla posuere sollicitudin aliquam ultrices sagittis. Vitae auctor eu augue ut. Quis auctor elit sed vulputate mi. Imperdiet sed euismod nisi porta. Dis parturient montes nascetur ridiculus. Urna cursus eget nunc scelerisque. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Suspendisse potenti nullam ac tortor vitae. Cras semper auctor neque vitae tempus. Quisque egestas diam in arcu. Vestibulum morbi blandit cursus risus at ultrices mi.</p>
        <p>Etiam erat velit scelerisque in dictum non consectetur a. Fringilla ut morbi tincidunt augue interdum velit euismod in. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Morbi tristique senectus et netus et malesuada. Elit eget gravida cum sociis. Nunc sed velit dignissim sodales ut eu sem integer vitae. In fermentum et sollicitudin ac orci phasellus. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Sed risus pretium quam vulputate. Erat pellentesque adipiscing commodo elit. Vehicula ipsum a arcu cursus vitae congue. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
    </div>
</body>

How can I achieve a similar image fade out effect on scroll down

1 个答案: