jQuery "flicker - fade" Effect in Rapidweaver
If you like, you can look at the example site first. The effect taught here is the “flash-then-fade” effect that occurs when one hovers over the hearer image.
1) Go here and download jQuery.
Upload it to wherever you are planning on hosting the website. Find this file in a browser, copy the address, e.g.
Code:
http://pagesofinterest.net/jquery-1.2.3.js
Open RW, create a new project. Create a blocks page, select a theme (I recommend "blocksbox"). I advise you to create a duplicate of this theme, as we'll be changing one of the theme's files. To do this, right click on the theme's icon, select "duplicate theme". Name the new theme something like "jQuery Testing".
Right click on the theme's icon, select "Show Contents".
Locate "index.html" in the finder window that opens. Open this file in a text editor, like Text Wrangler. Look for this:
Code:
<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js">
Beneath this, insert the following. Be sure to replace PATH_TO_JQUERY with the url you copied earlier.
<script type="text/javascript" src="PATH_TO_JQUERY"></script>
Save your changes, close the text editor.
This page is now prepared!
* * *
2) Open the inspector and change the page width to 900px.
Select an image you would like to use for a header. For this tutorial I'll assume you're using the same sized image as me, being 900px x 240px. Choose an image that has some part you'd like to flash then fade back in.
Create another image, of the dimensions of the area you want to flash/fade, and the colour of the area of your header image you want it to fade from. You can see that I have used a black image in my example. I used the dimensions: 345px × 117px. Upload this image to wherever you are hosting this website, find it in a browser and copy the url, like you did above with the jQuery file.
Create a html block, place it over the area you wish to use as your "mouse hover" area. This will be the area the mouse must enter to initiate the effect. We'll be using CSS to define the area, but I find it helpful to be able to refer back to RW's edit page to remind myself where the action will go down. Also it means one doesn't have to mess around with positioning the div manually.
Inside this block, paste* the following:
<div id="headerHover"></div>
Create another html block of the same dimensions as the image you created above, and place it in the area you want to flash/fade when the mouse enters the above html block. This block should contain:
<div id="headerFade"></div>
All will become clear, don't worry.
We're now finished with the drag 'n' drop design, now we've got to move into CSS.
Open the page inspector, select the header tab, then select CSS.
Into this paste the code below, remembering to replace PATH_TO_IMAGE with the url you copied earlier:
#headerFade{
width: 345px;
height: 117px;
background-image: url('PATH_TO_IMAGE');
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
#headerHover{
width: 364px;
height: 237px;
}
Now it is time to move to the Javascript tab.
Into this paste:
$(document).ready(function(){
$("#headerHover").hover(function(){
$("#headerFade")
.animate({opacity: "1"}, 40)
.animate({opacity: "0"}, 40)
.animate({opacity: "1"}, 40)
.animate({opacity: "0"}, 40)
.animate({opacity: "1"}, 400)
},function(){
$("#headerFade")
.animate({opacity: "0"},10000)
});
});
Note I have set the opacity to 0 again, ready for the next time this animation is initiated.
Later on, we'll be adding to this. This, however, is all we need for the flash/fade effect.
The following code:
$(document).ready(function() {
});
Needs to be used only once, as it defines the start/end of jQuery code.
Preview your page.
.animate({opacity: "1"}, 400)
.animate({STYLE}, SPEED)
STYLE can be almost any css styling (so far as I am aware). separate each item with ",".
SPEED is the speed of this animation. One can use either a numerical value, milliseconds, or "slow" "fast" "normal". If using one of the latter three, remember to include the quotation marks.
Examples:
.animate({opacity: "1", left: "100px", width: "300px"}, 400)
The above won't be pretty. It is just an example of the syntax.
Other than .animate, there are more effects.
Below is an animation similar to the one described above. If uses slideDown/slideUp instead of fading the cover image away.
$(document).ready(function(){
$("#headerHover").hover(function(){
$("#headerFade")
.animate({opacity: "0.2"}, 400)
.animate({opacity: "0.2",width: "0"}, 4000)
},function(){
$("#headerFade")
.animate({opacity: "1", width: "345"}, 40)
.slideUp("slow")
.slideDown("fast")
.animate({opacity: "0"}, 400)
});
});
There you go!
For those who are unafraid, use the jQuery API Reference to learn more. There are a lot of things to play with, jQuery is very powerful.
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
