Plan Theme

Responsive Layout

   

Animation On load the page


Cross-browser animations for you to use in your projects.



scale


Slip


dangles


Flip


rock


glow


beat


pulse


fade


pinch


swap


bounce


spin


flipped


slide


slip


Social Icons


 


 





Responsive!


       






Animation On scroll the page

Cross-browser animations for you to use in your projects.




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





Text and Images



image_10
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 ele sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis ifend, 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 Usages



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