Animate images, text and icons with the same code!
No stacks required
scale
Slip
dangles
Flip
rock
glow
beat
pulse
fade
pinch
swap
bounce
spin
flipped
slide
slip
C S S
hhhhh
hhhhh
Animation On load the page
Cross-browser smart animations for your project.
slip
dangles
slide up
scale inverse
beat
Flipped
rock
scale
Animation On scroll the page
Cross-browser smart animations for your project.
Fade In
Fade In Down
Fade In Up
Bounce In Left
Bounce
Bounce In Up
Tada
Light Speed In
Flip Horizontal
Endless cycles with “ repeat “ class
Fade In
Fade In Down
Fade In Up
Bounce In Left
Bounce
Bounce In Up
Tada
Light Speed In
Flip Horizontal
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
OPTIONS: Add “repeat” for endless cycles, Example: “scrollfaderepeat” or “scrollfadeuprepeat”
FULL CODE
Examples with scroll 1 (Fade In)
ICON - FADE IN
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.
1: Download the Free Stack CSSBOX
Ope the Stack page in the site of the developer joeworkman.net
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
Scroll effects list
all classes
scrollfade repeat
scrollfadedown repeat
scrollfadeup repeat
scrollslideup repeat
scrollslideleft repeat
scrollsliderigh repeat
scrollbounce
scrollbounceleft
scrollbounceup
scrollbouncein
scrollspeedin
scrollflip
scrolltada
all classes
scrollfade repeat
scrollfadedown repeat
scrollfadeup repeat
scrollslideup repeat
scrollslideleft repeat
scrollsliderigh repeat
scrollbounce
scrollbounceleft
scrollbounceup
scrollbouncein
scrollspeedin
scrollflip
scrolltada
PLUS code (awesome font)
all major classes
fa-scale-inverse
fa-scale-inverse
fa-dangles
fa-rock
fa-slip
fa-beat
fa-beat-fast
fa-pulse
fa-pulse-loop
flip vertical-50 (50/100/150/200)
flip horizontal-50 (50/100/150/200)
fade in (100/150/200/250) fa-flip-horizontal-100 (100/150/200/250 )
fa-slide-up
fa-max-50 (50/75/100/125/150/200/225/250/275/300)
fa-silver
fa-silver-dark
fa-silver-light
fa-silver-light-inverse
Text only:
fa-glow-white
fa-glow-white-in
fa-glow-white-out
fa-glow-black
fa-glow-black-in
fa-glow-black-out
all major classes
fa-scale-inverse
fa-scale-inverse
fa-dangles
fa-rock
fa-slip
fa-beat
fa-beat-fast
fa-pulse
fa-pulse-loop
flip vertical-50 (50/100/150/200)
flip horizontal-50 (50/100/150/200)
fade in (100/150/200/250) fa-flip-horizontal-100 (100/150/200/250 )
fa-slide-up
fa-max-50 (50/75/100/125/150/200/225/250/275/300)
fa-silver
fa-silver-dark
fa-silver-light
fa-silver-light-inverse
Text only:
fa-glow-white
fa-glow-white-in
fa-glow-white-out
fa-glow-black
fa-glow-black-in
fa-glow-black-out