Fade effect of elements only when viewing them with bootstrap

1

I'd like to know how to make that% change_with% elements on the page only when it's viewed. For example, I have seen some sites made with fade that when scrolling the page elements are shown with effect bootstrap , fade , fadeInUp , etc.

An example to demonstrate would be this Site

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

Does anyone know how to do this using fadeInLeft of css ?

    
asked by anonymous 01.07.2014 / 14:51

2 answers

2

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

Here's a fantastic example of a well-developed Paralax site, in the case of these bootstrap sites the effect is only applied on some very lightweight things.

Fantastic Site with Paralax

Mozilla website with this effect

To do this, the most usual thing is to use jQuery, and since everything in jQuery 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 what you want with this effect, from small details in images or even similar sites like this.

I hope I have helped, Good studies.

    
01.07.2014 / 15:15
1

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

mycodezone

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

Thanks! : D

    
01.07.2014 / 15:16