All geek questions in one place

HTML background scroll effect

Harrods.com hit the e-commerce site today . I thought the scroll effects they use (non-mobile site) are really cool. Content and backgrounds seem to scroll at different speeds. When scrolling, the navigation selector also moves to the appropriate category.

I tried to survive their source to figure out how they do it, but no luck. I saw that they loaded background images into the homeImages variable, but never used it in a script. Is this something that can only be done with CSS? Is there a name for this effect that I can find?

+4
source share
2 answers

You can find the parallax scroll . Find it on Google and you will find various tutorials on the subject.

Useful link provided by @RobertHarvey http://prinzhorn.imtqy.com/skrollr/

+2
source

The effect they use is called Parallax.

This is a special JS effect that allows you to bind the scroll speed to individual elements on the page.

Depending on your needs, there are several popular Parallax libraries:

Stellar.js This library is based on jQuery, it supports horizontal and vertical scrolling. It also has experimental support for iOS mobile devices.

Parallax-JS This library also depends on jQuery, but maybe a little more minimal in it, and a little easier to implement.

jparallax Also jQuery is managed like Parallax-JS, but it offers a few more options for setting effects.

Super Scroll Orama Also a jQuery plugin (sensing a theme yet?) The scroll library effect is just animation and offers interesting options with this in mind.

If you want even more information about this list of textbooks / libraries .

+2
source

Source: https://habr.com/ru/post/1500804/

More articles:


All Articles