4

What is the name of this effect when scrolling the first section? http://www.beargrylls.com/

I think it's something like a parallax, but I did not find anything like it.

Vitaliy
  • 57
  • 6
  • 1
    Looks like parallax scrolling. – Josh Aug 29 '17 at 19:47
  • I'm not sure if it has a specific name, but here's a good article comparing it to parallax in general http://webdesignerwall.com/tutorials/zoom-hero-images-scroll – Jon Wexler Aug 29 '17 at 19:51
  • It's just an effect called parallax which is not so complicated and can simply be implemented purely with CSS3 and a few `
    `s with no JavaScript at all.
     – Redu Aug 29 '17 at 20:09
  • In 2021, the linked site no longer demonstrates the effect. – showdev Feb 27 '21 at 05:50

2 Answers2

3

To answer your question technically. That effect is called Parallax scrolling. But is part of the Parallax concept.

From Wikipedia: 'Parallax scrolling, also known as "Asymmetrical scrolling", is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.'

The reason you may struggle to find that exact effect through web search is because Parallax isn't an effect, its a concept of depth based on how the background and foreground move at different speeds. There are tons of implementations some are just downwards scrolling and some are pages that implement zooming and animation like the one you have linked.

Here is a site that may be very useful for you, it contains some examples of Parallax effects, all with the source code available on CodePen for you to experiment with.

https://blog.trackduck.com/2015/06/25/15-captivating-parallax-effects-from-codepen/

Felipe Warrener-Iglesias
  • 679
  • 4
  • 19
0

I think for the slide, is only a scale trigger another after JS. For the rest, It's a parallax.

KolaCaine
  • 2,037
  • 5
  • 19
  • 31