Animations

Usage

This is a variable or event handle.

Examples

<div class="ready nebula-fade-in-up" nebula-delay="500">Welcome</div>

<div class="load nebula-fade-in-up slow">Welcome</div>

<a class="click nebula-push" href="#">Click Here</a>

<a nebula-click="nebula-push" href="#">Click Here</a>

<a nebula-hover="nebula-grow" href="#">Hover Me</a>

<a nebula-hover="nebula-grow" nebula-click="nebula-push" href="#">Click Here</a>

<a class="click nebula-push" nebula-hover="nebula-grow" href="#">Click Here</a>

Demo

Additional Notes

This uses a series of classes to modify the type and speed of animation. Elements must be display block or inline-block to be animated.

Event Trigger Classes

These have built in classes that listen for some events so that JavaScript does not need to be written to use them. They include:

• ready (DOM ready)
• load (window load)
• click (element click)
• animate (for manual trigger)

Speed Modifiers

• fastest (.25s)
• faster (.5s)
• fast (.75s)
• slow (1s)
• slower (2s)
• slowest (3s)

Continuous Animations

These animations continue repeatedly

• nebula-spin
• nebula-fade
• nebula-zoom
• nebula-wave-x
• nebula-wave-y

One-Time Animations

These animations happen once and then stop.

• nebula-fade-out
• nebula-fade-out-up
• nebula-fade-out-down
• nebula-fade-out-left
• nebula-fade-out-right
• nebula-fade-in
• nebula-fade-in-up
• nebula-fade-in-down
• nebula-fade-in-left
• nebula-fade-in-right
• nebula-zoom-out
• nebula-zoom-in
• nebula-reveal-in
• nebula-reveal-out
• nebula-stretch-in
• nebula-stretch-out
• nebula-flip-in-x
• nebula-flip-in-y
• nebula-flip-out-x
• nebula-flip-out-y
• nebula-tap
• nebula-push
• nebula-shove
• nebula-shake
• nebula-nod

Hover Animations

• nebula-grow

Advanced

For more advanced integration, see the nebulaAnimate() JavaScript function.

Source File

Located in /assets/scss/partials/_animations.scss.

« Back to functions & variables list