How to create a scroll-based parallax animation that continues to ease after scroll

Question

This is more of a "how do they do this" question than a need for a specific solution.

I've visited a few sites that have an elegant and natural-appearing easing on page elements which react to page scrolling (to initiate) but also continue after the scrolling stops (allowing the elements to ease into a stopping point).

Having looked up various searches for combinations of "parallax," "scrolling," "easing," etc., I can't find a starting point for how to achieve a similar experience.

Examples of this interactivity

https://la.pizzeriamozza.com/

Seen in the photo in the first "Pizzeria Mozza is known for its California ingredients..." section as well as the cards for "Bar Special" and "Red Sauce Dinner" further down the page (as of 10/3/2020).

https://droitthemes.com/wp/oppi-one-page/

Seen in the hero banner's device image and the screenshot/UI images in the "It's the food you love, delivered" section (along with other elements on the page)

In both sites, it appears that the elements have a dynamically changing transform: translate3d style that is directly reactive to page scrolling. But, how that gets implemented & applied... I don't know.

I've tried looking up similar components used in each site (via BuiltWith.com), but that didn't reveal anything helpful (to me).

Any insight is appreciated.

Here's a couple plugins that I have used - dixonandmoe.com/rellax and min30327.github.io/luxy.js — dantheman
Thank you @dantheman ! Also, just knowing the terms "inertia scroll" and "momentum scroll" have completely opened up my world of research. Thanks again! — LosHantos

Ishita Ray Ishita Ray · Accepted Answer · 2020-10-03T18:43:52

.img1 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img2 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img3 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/2641886/pexels-photo-2641886.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.color1 {
display: block;
width: 100%;
height: 100vh;
background: red;
}
.color2 {
display: block;
width: 100%;
height: 100vh;
background: black;
}

<div class="img1"></div>
<div class="color1"></div>
<div class="img2"></div>
<div class="color2"></div>
<div class="img3"></div>

How to create a scroll-based parallax animation that continues to ease after scroll

Examples of this interactivity

2 Answers