Fade In




Fade In Up




Slide In Left




Bounce




Bounce In Up




Light Speed In




Fade In Down




Slide In Up




Slide In Right




Bounce In Left




Flip Horizontal




Tada



DEMO PROJECT


A Demo Project is available with all codes and examples. Easy to use and customize.


Text and Images



flower_2
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet


Manual and Usage


method 1 without Stacks


Add the class “scroll..” to the element you want to animate.
Using a short code without External plugin or Stacks.
You can use it in any page, also in RapidWeaver Blog, File sharing and so on.
Compatible with: Classic text, Text with classes ( titles), fixed images, responsive images and icons.

CODES LIST
scrollfade = FadeIn
scrollfadedown = Fade In Down
scrollfadeup = Fade In Up
scrollslideup = Slide In Up
scrollslideleft = Slide In Left
scrollsliderigh = Slide In Right
scrollbounce = Bounce
scrollbounceleft = Bounce In Left
scrollbounceup = Bounce In Up
scrollbouncein = bounce In
scrollspeedin = Light Speed In
scrollflip = Flip In X (horizontal)
scrolltada = Tada tumult


FULL CODE

<div class="scrolllfade">CONTENT</div>

Examples with scroll 1 (Fade In)



ICON - FADE IN

<div class="scrollfade"> <h3>ICON - FADE IN</h3> <i class="fa fa-heart fa-max-50"></i> </div>
flower_2
<div class="scrollfade"> <h3>drag here your image</h3> </div>

method 2 with Stack


Yo can use these codes also with stack plugin and a free stack CSS BOX by JoeWorkman.
With this stack you can add a new class ( CSS code) to your content easily.
Compatible with text and any stack. Some limitations only in stack with dynamic elements or existing animations.



icon

1: Download the Free Stack CSSBOX
Ope the Stack page in the site of the developer joeworkman.net




scroll





2: Drag the Stack in your project and add the “scroll” value in the field “class”.
3: Add scroll …


Drag inside the CSSBOX your stack and then test the page ( scroll the page to animate the element) in preview mode.


Example: Fade In + STACK


Example: Bounce In Left + STACK