I want on scroll down, that the images are moving up a bit, like on this website:
example site (digital does)
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 class="row">
<header class="arbeiten">
<h2>{ Logos }</h2>
</header>
</div>
<div id="links">
<div class="row">
<div class="col-xxl-1"></div>
<div class="col-12 col-md-6 col-lg-4 col-xxl-5">
<div class="card shadow-sm first-image">
<a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #1">
<img src="https://www.fillmurray.com/300/150" alt="Test - Logo #1" class="card-img-top logo-hover">
</a>
<div class="card-body">
<p class="card-text">Test - Logo #1</p>
<div class="d-flex justify-content-between align-items-center"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xxl-5">
<div class="card shadow-sm">
<a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #2">
<img src="https://www.fillmurray.com/300/150" alt="Test - Logo #2" class="card-img-top logo-hover">
</a>
<div class="card-body">
<p class="card-text">Test - Logo #2</p>
<div class="d-flex justify-content-between align-items-center"></div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xxl-5 img-scroll">
<div class="card shadow-sm first-image">
<a href="https://www.fillmurray.com/1000/1000" title="Test - Logo #3">
<img src="https://www.fillmurray.com/300/150" alt="Test - Logo #3" class="card-img-top logo-hover">
</a>
<div class="card-body">
<p class="card-text">Test - Logo #3</p>
<div class="d-flex justify-content-between align-items-center"></div>
</div>
</div>
</div>
<div class="col-xxl-1"></div>
<div class="col-xxl-1"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>I hope, someone can help me…
7
Answers
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
You can animate with jQuery. Here is tutorial with example.
The animation on the site that you provided is triggered when the
loadevent on the images is emitted. Theloadevent is emitted when an image has completed loading. This is combined with lazy loading to load the images as you scroll down on the page.To implement something like this, you need to enable lazy loading for the images and listen for a
loadevent on them. When the load event is emitted, use Javascript to complete the animation.The javascript would look something like this:
Just make sure the images have lazy loading enabled by setting their
loadingattribute tolazythere is a very good library for scroll effect called AOS.I linked it down here
it .You can find setup guide at the end of the page. Just add those styles to your image or any other html tag!. Make sure that you check it out.
link to AOS library
The most important step is to check if an
<img>element is entering the current viewport.We can use the Intersection Observer API.
By adjusting the threshold value we can define when the intersecting value returns true:
E.g
treshold:0.5=> element is intersection if 50% of it’s height is in viewport.Now we can define a callback:
if(entry.isIntersecting){}If element is in viewport – set the
srcattribute fromdata-srcand toggle css classes from ‘lazyload’ to ‘lazyloaded’.Most lazyload libraries use a similar syntax or api concept like this:
The actual image src/URL is defined by a data attribute:
data-src.Lazy loading can significantly improve the overall performance and user experience by loading images only if they are really required.
The animation is done by toggling between css classes:
E.g
.lazyload(not loaded yet) andlazyloaded(loaded)Simple Example: using js IntersectionObserver()
Example 2: observe a parent element and lazyload images
The main difference: we’re observing viewport intersections for parent elements like the
.cardclass.I am using TweenMax.min.js, TimelineMax.min.js, ScrollMagic.min.js
Here is barebone structure similar to the example website using a tiny library @opuu/inview.
The parallax effect and animation on scroll both can be done with this same library very easily.
Note: I am the author of this library.