Fade effect of elements just by visualizing them with bootstrap

Question

I wonder how to make that effect fade of elements on the page only when it is viewed.
For example, I have seen some websites made with bootstrap that when scrolling the page the elements will be shown with effect fade, fadeInUp, fadeInLeft, etc..

An example to demonstrate would be this Website

After viewing the effects no longer occur unless the page is reloaded.

Does anyone know how to do this using the css of bootstrap?

Answer 1

This is an effect called Paralax, which is where you define (roughly) layers and how fast each layer will move based on the mouse, page scroll or even an animation. This effect is very old and can be observed in games like Super Mario and etc.

Here is a fantastic example of site in Paralax well advanced, in the case of these bootstrap sites the effect is applied only on some very light things.

Fantastic site with Paralax

Mozilla website to this effect

To make this effect the most normal is to use jQuery, and like everything in jQuery there is a plugin ready to be used, here are some:

A jQuery Plugin

A Legal Tutorial

Another Jquery Plugin

Try to understand how it works and you can do whatever you want with this effect, from small details in images or even sites like this one.

I hope I helped, Good studies.

Answer 2

You have some site that would like to copy this fade, it is better to explain, but here are some links that can help you:

mycodezone

bootply - Inclusive here at bootply have several snippets of bootstrap for me have been very useful!

Valeuu!! : D