On scroll down images are moving up-CodePudding

The

Down the website on digitaldoes you can see what i mean. The images are moving up a bit if you scroll down. Is it maby a lazy-load with images that are fading in or an animation where the images moving for example 5px up?

Here is a: jsfiddle updated!!!

$(document).ready(function () { $(".img-scroll").css("display", "none"); $(window).scroll(function() { $( ".img-scroll" ).addClass("animate"); $( ".img-scroll" ).css("display", "block"); console.log("Hey"); }); });

.img-scroll { -moz-transition: top 10s; transition: top 10s; } .img-scroll.animate { top: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div > <header > <h2>{ Logos }</h2> </header> </div> <div id="links"> <div > <div ></div> <div > <div > <a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #1"> <img src="https://www.fillmurray.com/300/150" alt="Test - Logo #1" > </a> <div > <p >Test - Logo #1</p> <div ></div> </div> </div> </div> <div > <div > <a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #2"> <img src="https://www.fillmurray.com/300/150" alt="Test - Logo #2" > </a> <div > <p >Test - Logo #2</p> <div ></div> </div> </div> <div > <div > <a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #3"> <img src="https://www.fillmurray.com/300/150" alt="Test - Logo #3" > </a> <div > <p >Test - Logo #3</p> <div ></div> </div> </div> </div> <div ></div> <div ></div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

I hope, someone can help me...

CodePudding user response：

They have build the gallery with gridster and scrollmagic. Scrollmagic lets you do all kind of things when scrolling.

you can checkout the package at https://scrollmagic.io

CodePudding user response：

You can animate with jQuery. Here is tutorial with example.

http://talkerscode.com/webtricks/move-elements-on-page-scroll-using-jquery-and-css.php