On scroll down images are moving up

Question

I want on scroll down, that the images are moving up a bit, like on this website:

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;
}





  
    { Logos }
  




  

    

    
      
        
          
        

        
          Test - Logo #1
          
        
      
    

    
      
        
          
        
        
          Test - Logo #2
          
        
      


      
        
          
            
          

          
            Test - Logo #3

I hope, someone can help me...

user_15015675 · Answer

The most important step is to check if an element is entering the current viewport.

We can use the Intersection Observer API.

const options = {
  rootMargin: "0px",
  threshold: 0.5
};

const inViewPortObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let target = entry.target;
      let dataSrc = target.getAttribute('data-src');
      target.src = dataSrc;
      target.classList.replace('lazyload', 'lazyloaded');
    }
  });
}, options);

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 src attribute from data-src and 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) and lazyloaded (loaded)

.lazyload {
    opacity: 0;
    transform: translateY(100%);
}

.lazyloaded {
    opacity: 1;
    transform: translateY(0%);
}

Simple Example: using js IntersectionObserver()

const options = {
  rootMargin: "0px",
  threshold: 0.5
};

const inViewPortObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let target = entry.target;
      let dataSrc = target.getAttribute('data-src');
      target.src = dataSrc;
      target.classList.replace('lazyload', 'lazyloaded');
    }
  });
}, options);

const images = document.querySelectorAll('.lazyload');
images.forEach(function(img, i) {
  inViewPortObserver.observe(img);
})

* {
  box-sizing: border-box
}

header {
  margin-bottom: 40vmin;
}

main {
  padding-bottom: 50em;
}

section {
  margin-bottom: 20em;
}

.row {
  display: flex;
}

.row>* {
  flex: 1;
}

.card-img-top {
  transition: 2s;
}

.lazyload {
  opacity: 0;
  transform: translateY(100%);
}

.lazyloaded {
  opacity: 1;
  transform: translateY(0%);
}

img {
  aspect-ratio: 2/1;
  display: block;
  background-color: #ccc;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}


  
    { Logos }
    Please scroll down …

Example 2: observe a parent element and lazyload images

The main difference: we're observing viewport intersections for parent elements like the .card class.

const options = {
  rootMargin: "0px",
  threshold: 0.1
};

const inViewPortObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let target = entry.target;
      let img = target.querySelector('img');
      let dataSrc = img.getAttribute('data-src');
      img.src = dataSrc;
      target.classList.add('inViewPort');
    }
  });
}, options);

const cards = document.querySelectorAll('.card');
cards.forEach(function(card, i) {
  inViewPortObserver.observe(card);
})

* {
  box-sizing: border-box
}

header {
  margin-bottom: 60vmin;
}

main {
  padding-bottom: 50em;
}

section {
  margin-bottom: 20em;
}

.row {
  display: flex;
  gap: 1em;
}

.row>* {
  flex: 1;
}

.card {
  transition: 2s;
  transform: translateY(100%);
  border: 2px solid red;
  opacity: 0;
}


/** optional sibling delay */

.row .card:nth-of-type(2) {
  transition-delay: 0.5s;
}

.row .card:nth-of-type(3) {
  transition-delay: 0.75s;
}

.row .card:nth-of-type(4) {
  transition-delay: 1s;
}

.row .card:nth-of-type(5) {
  transition-delay: 1.25s;
}

.row .card:nth-of-type(6) {
  transition-delay: 1.5s;
}

.inViewPort {
  opacity: 1;
  transform: translateY(0%);
}

img {
  aspect-ratio: 2/1;
  display: block;
  background-color: #ccc;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}


  
    { Logos }
    Please scroll down …

user_19608021 · Answer

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

user_19633355 · Answer

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

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

user_14903928 · Answer

The animation on the site that you provided is triggered when the load event on the images is emitted. The load event 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 load event on them. When the load event is emitted, use Javascript to complete the animation.

The javascript would look something like this:

$(".img-scroll").one("load", () => {
    // do animation here
})

Just make sure the images have lazy loading enabled by setting their loading attribute to lazy

user_16407358 · Answer

there 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

user_15706153 · Answer

I am using TweenMax.min.js, TimelineMax.min.js, ScrollMagic.min.js

List item

const tl = new TimelineMax();
const tl2 = new TimelineMax();
const controller = new ScrollMagic.Controller();

tl.from('#first-fig', .3, {y:200, opacity: 0});
tl.from('#second-fig', .3, {scale: 0}, "=-.5");
tl.from('#third-fig', .3, {y:200, opacity: 0});

tl2.from('#fourth-fig', .5, {y:200, opacity: 0});
tl2.from('#fifth-fig', .5, {y:200,opacity: 0});
tl2.from('#sixth-fig', .5, {y:200, opacity: 0});

const firstScene = new ScrollMagic.Scene({
  triggerElement: "#second-h1"
})
  .setTween(tl)
        .addTo(controller);

const secondScene = new ScrollMagic.Scene({
  triggerElement: "#first-img"
})
  .setTween(tl2)
        .addTo(controller);

@import url("https://fonts.googleapis.com/css?family=Arapey");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: "Arapey";
  font-weight: 700;
  background: #dfe6e9;
}

.container {
  position: relative;
}

h1 {
  margin: 0 auto;
  width: 100rem;
  text-align: center;
  font-size: 6rem;
}

.section--1 {
  height: 100rem;
  background: #bdc3c7;
}

.section--2 {
  margin: 0 auto;
  width: 100rem;
}

.images {
  display: grid;
  padding: 0.5rem;
  margin: 2rem auto;
  width: 100%;
  grid-template-rows: repeat(auto-fill, 25rem);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.8rem;
  grid-auto-columns: 1fr;
  grid-auto-rows: 25rem;
}
.images--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}








  
    Scroll down to see the animations
  
  
    
      hello there I love code and music

user_14350456 · Answer

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.

body {
  margin: 0;
  padding: 0;
}

#container {
  position: relative;
  width: 100%;
}

#background {
  background: url('https://picsum.photos/seed/picsum/700/500');
  background-size: cover;
  background-position: center;
  height: 150vh;
  width: 100%;
}

#foreground {
  background-color: blue;
  transition: margin-top 0.1s;
  height: 200vh;
  width: 70%;
  margin: 0 auto;
}

#effect {
  padding: 20px;
  width: 100%;
  background-color: brown;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.aos {
  transform: translateY(500px);
  transition: all 0.5s;
}

.aos.active {
  transform: translateY(0);
  transition: all 0.5s;
}

#empty {
  height: 100vh;
  width: 100%;
  background-color: green;
}

    
        
            Background with image
        
        
            Content that overlays the background

Note: I am the author of this library.

On scroll down images are moving up

7 Answers

Simple Example: using js IntersectionObserver()

Example 2: observe a parent element and lazyload images