Morphext stack

Morphext Stack

Rotate text with cool CSS3 animations

The Morphext stack makes it possible to show pieces of text in rotation (one after the other) with cool, hip, stylish, funky, snazzy, classy CSS3 animations. Awesome for displaying eye catching texts like testimonies, quotes, etc.
Looking for a more sophisticated stack that rotates (almost) everything, with the same array of animations? The Morphist stack may be what you’re looking for.
Below is a preview where you can set all 43(!) effects available:

The Morphext Stack is excellent, superb, outstanding, exceptional, marvelous, wonderful, magnificent, preeminent, perfect, matchless, unbeatable, peerless, supreme, prime, first-rate, first-class, superlative, splendid, fine, beautiful, great, terrific, tremendous, fantastic, fabulous, splendiferous, fab, top-notch, dandy, divine, bang-up, skookum, class, awesome, magic, wicked, mean, cool, out of this world, hunky-dory for rotating texts!

select effect:

The example above is not made with the stack and only meant for showing the different effects that are possible. The speed in this example is set to 2500ms.

Demos
I’m sure you’ve seen the recommending adjectives above. On the first line below Usage is another one. The Morphext stack also shines on splash pages. Here’s an example using the actual stack.

Usage
Using the Morphext Stack is extremely, exceedingly, exceptionally, extraordinarily, tremendously, immensely, hugely, intensely, acutely, abundantly, singularly, uncommonly, decidedly, particularly, supremely, highly, remarkably, really, truly easy:, uncomplicated:, undemanding:, unchallenging:, effortless:, painless:, trouble-free:, facile:, simple:, straightforward:, easy as pie:, a piece of cake:, child's play:, kids' stuff:, a cinch:, no sweat:, a breeze:, smooth sailing:, duck soup:, a snap:
Drag a stack that can contain text (or HTML) into the dropzone of the Morphext stack.
Separate the text parts you want to show in succession with comma's (or the separator you set in the HUD) (fig. 1).
Give the text part you want to show in succession the style underline (Format > Underline, cmd-U or manually with <u></u>).
For styling this text, use the options in the stack.

Background

This stack is based on the Morphext jQuery plugin by Ian Lai (aka MrSaints) and relies heavily on animate.css by Daniel Eden.

Limitations
When the visitor has JavaScript disabled in his browser, all rotating items will be shown.
You may see a slight difference in thickness between the animated text and the rest in Chrome, Safari and other Webkit browsers. This is caused by inconsistencies in rendering animated text by those browsers. I did all I could to minimize the difference, so I guess we have to live with that…
When you use headings (<h1>…<h6>) in a styled text area and you want to rotate a part of it, you will have to set the underlining manually with <u></u> (fig. 2). With headings, Rapidweaver will ignore underlining set otherwise, breaking the script.
Don't set separate styling (like color or font) on individual text items you want to morph. Setting a single color, font, etc. on all text items you want to morph however does work, preferably using the options of the stack.
Don't use any of the settings in Format > HTML or links on the text you want to morph. It will break the script.
In Internet Explorer 9 and worse, the text will be shown in succession, but without the fancy animations. Setting the effect to none does the same.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
Morphext stack (Edit mode)
fig. 1: Separate the text parts you want to show in succession with comma’s

Morphext stack (heading)
fig. 2: Using the Morphext stack with a heading
Morphext HUD
© 2012-2017 Marathia Web Design | Contact