FadeIn A nice little fade-in effect for your pages.
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, Safari, Firefox and Chrome. Plus the FadeIn stack works well on iOS devices like the iPhone and iPad.
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).
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
- 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.
- Drag and drop content into the FadeIn placeholder. You can use many different content types, including text, images or HTML code.
- 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.
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.
This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.