Morphist stack

Morphist Stack

Rotate any content with cool CSS3 animations

The Morphist stack makes it possible to rotate pieces of content, one after the other with groovy CSS3 animations. Awesome for making slide shows, carousels, etc.
Looking for a more simple stack that rotates (inline) text only, but with the same array of animations? The Morphext stack may be what you’re looking for.
Below is a preview where you can set all 43(!) effects available:

This example 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.

When using effects with
In or Out in their name, best results are often obtained when selecting matching couples like bounceInDown with bounceOutDown; or combining *InUp with *InDown, *InLeft with *InRight etc.

If you just want to use one effect (e.g.
wobble), set the effect (in) to none.
  • 1962: Ursula Andress (Honeyrider)
    in Dr No
  • 1964: Honor Blackman (Pussy Galore)
    in Goldfinger
  • 1969: Diana Rigg (Teresa di Vicenzo)
    in On Her Majesty’s Secret Service
  • 1973: Jane Seymore (Solitaire)
    in Live And Let Die
  • 1974: Britt Ekland (Mary Goodnight)
    in The Man With The Golden Gun
  • 1977: Barbara Bach (Anja Amasova)
    in The Spy Who Loved Me
  • 1983: Kim Basinger (Domino)
    in Never Say Never Again
  • 1983: Maud Adams (Octopussy)
    in Octopussy
  • 1985: Tanya Roberts (Stacey Sutton)
    in A View To A Kill
  • 1987: Maryam d’Abo (Kara Milovi)
    in The Living Daylights
  • 1989: Carey Lowell (Pam Bouvier)
    in Licence To Kill
  • 1995: Famke Janssen (Xenia Onatopp)
    in Goldeneye
  • 1999: Denise Richards (Dr Christmas Jones)
    in The World Is Not Enough
  • 2002: Halle Berry (Giacinta ‘Jinx’ Johnson)
    in Die Another Day
  • 2006: Eva Green (Vesper Lynd)
    in Casino Royal
  • 2008: Olga Kurilenko (Camille Montes)
    in Quantum Of Solace
  • 2015: Monica Bellucci (Lucia Sciarra)
    in Spectre
select effects:
 

Demos
The Morphist stack is great for rotating banners, sliders, slideshows, carousels and other content you want to rotate. Here’s an example of a rotating banner using the actual stack. And how about a quote rotator – which is also great idea for showing customer testimonies:
  • There's an old Wayne Gretzky quote that I love. 'I skate to where the puck is going to be, not where it has been.' And we've always tried to do that at Apple. Since the very very beginning. And we always will.



    Steve Jobs
  • I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long. Just figure out what’s next.




    Steve Jobs [NBC Nightly News, May 2006]
  • Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works. The design of the Mac wasn’t what it looked like, although that was part of it. Primarily, it was how it worked. To design something really well, you have to get it. You have to really grok what it’s all about. It takes a passionate commitment to really thoroughly understand something, chew it up, not just quickly swallow it. Most people don’t take the time to do that.
    Steve Jobs
  • Because almost everything — all external expectations, all pride, all fear of embarrassment or failure - these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.

    Steve Jobs
Usage
To add items to this stack, click the plus button at the bottom. You can’t drag stacks into the Morphist stack!
Drag any stack(s) into the Morphist Item drop zone.
When using effects with In or Out in their name, best results are often obtained when selecting matching couples like bounceInDown with bounceOutDown; or combining *InUp with *InDown, *InLeft with *InRight etc.
If you just want to use one effect (e.g. wobble), set the effect (in) to none.
Set the speed.

Background

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

Limitations
Use this stack sparingly. Too many animated items on your page will make it look like a pinball machine.
In Internet Explorer 9 and worse, or when the visitor has JavaScript disabled in his browser, only the first item will be shown.
Some of the effects will benefit from a generous padding.
The height of each item is set automatically. This may result in ‘jumping’ of the content below it. To avoid that, make sure that all items have the same height (with images for example) or set a fixed height to all the items.
Overflow with fixed height
When a fixed height on Morphist items is set, there are three options for overscroll: hide, scroll and ellipsis.
These setting only make a difference for items that are not high enough to show all the content. See this example page for the difference between the three options.
N.B. overscroll: ellipsis only works on text! Images will still be cut off; overscroll: scroll will show vertical scroll bars when necessary. That’s usually not a good idea with rotation items, unless you set the speed to some really slow.

IMHO, overflow is something that best should be avoided, but it covers at least those situations where you can’t avoid it.

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].
Morphist HUD
© 2012-2017 Marathia Web Design | Contact