Text Animation Effect
3 Stunning and Cool text effects that are made possible with CSS.
Variant one
Usage
To apply this feature you need to create specific HTML structure (see Source Code below). The class names to be used for primary <DIV> element: initial class .sp-container with sub-class .variant1.
GetSimple CMS!
It's an XML based lite Content Management System
It's save, fast and highly extensible
Probably!
The best CMS. All the earth. Just try it.
Join us!Source Code
<div class="sp-container variant1" style="height: 300px; box-shadow: 0px 0px 10px 0px #323232; border-radius: 6px;">
<div class="sp-content">
<div class="sp-globe" style="background: transparent url(data/uploads/images/sp-globe.png) no-repeat center center;background-size: 25% auto;"> </div>
<h2 class="frame-1">GetSimple CMS!</h2>
<h2 class="frame-2">It's an XML based lite Content Management System</h2>
<h2 class="frame-3">It's save, fast and highly extensible</h2>
<h2 class="frame-4">Probably!</h2>
<h2 class="frame-5"><span>The best CMS.</span> <span>All the earth.</span> <span>Just try it.</span></h2>
<a class="sp-circle-link" href="#"><span class="sp-link-span">Join us!</span></a>
</div>
</div>
Variant two
Usage
To apply this feature you need to create specific HTML structure (see Source Code below). The class names to be used for primary <DIV> element: initial class .sp-container with sub-class .variant2.
Do you know what GetSimple can do?
The best-in-class user interface Great!? Yeah, really so!
Get help with anything related to GetSimple CMS!
Sign up now!Source Code
<div class="sp-container variant2" style="box-shadow: 0px 0px 10px 0px #323232; border-radius: 6px;">
<div class="sp-content">
<div class="sp-wrap sp-left">
<h2><span class="sp-top">Do you know what</span> <span class="sp-mid">GetSimple</span>
<span class="sp-bottom">can do?</span></h2>
</div>
<div class="sp-wrap sp-right">
<h2><span class="sp-top">The best-in-class user interface</span>
<span class="sp-mid">Great<i>!</i><i>?</i></span>
<span class="sp-bottom">Yeah, really so!</span></h2>
</div>
</div>
<div class="sp-full">
<h2>Get help with anything related to GetSimple CMS!</h2>
<a href="index3.html">Sign up now!</a>
</div>
</div>
Variant three
Usage
Create primary <DIV> element with class .anim-text-fx then add needed text lines.
Attention!
Skeleton-FX - GetSimple Theme