This popular stack has recently been updated for Stacks 2.0, and uses some of the new API features. However it remains just as simple to use as before. The FadeIn stack is built around some basic jQuery Javascript code, which powers the animated fade effect. All major web browser are supported, including IE7, IE8, IE9, IE10, IE11, Safari, Firefox, Opera and Chrome. Plus the FadeIn stack works well on popular Android and iOS devices.

Settings exist to customise the fade-in speed (in milliseconds) and an option to delay the animation. A customisable height ensures the area enclosing the FadeIn stack has a fixed height, and thus you won't get an ugly jumping effect as the animation fires. An optional setting is also provided, enabling the FadeIn stack to execute on either the (document).ready or (window).load event handlers.

Example

If you missed the example, refresh your browser window again (hit F5 or CMD + R).
Stacks Image 211
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Setup

  1. After installation, drag and drop a FadeIn stack into your page. It can either standalone or be nested within another stack, like a grid or columns stack.
  2. Drag and drop content into the FadeIn placeholder. You can use many different content types, including text, images or HTML code.
  3. Change any of the FadeIn stack settings like the speed, delay, height or load type, if required.

Tip Most RapidWeaver experts recommend you only use one type of animated stack per-page, to avoid a depreciation in page performance or an increased risk on code conflicts. Don't forget that quite a few RapidWeaver themes like Black & White, Flood, Photogenic and Media already provide options to have content fade-in on page load. Content set to fade-in on page load will continue to print normally.


Source Code

This is the HTML source code used to create each FadeIn stack:
<div id="fadeinWrapper" style="height:400px; display:block; position:relative;">
<div id="fadeIn">
<h1>Hello World!</>
</div>
</div>

And this is the jQuery Javascript code, which would need to be pasted into the Custom Header box, within the RapidWeaver page inspector:
<script type="text/javascript">
var $fi = jQuery.noConflict();
$fi(document).ready(function(){
$fi('#fadeIn').hide().delay(0).fadeIn(2000);
});
</script>

You will need to have jQuery Javascript called before this script is loaded. Most third-party RapidWeaver themes already contain a version of jQuery. In the above code, you can change the delay speed (0) or fade-in speed (2000) if required.

@import((Code Snippets))
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.