Really awesome jQuery Parallax Animated Header Background... A Honey Bear Playhomes tip...

  • 1
  • Idea
  • Updated 7 years ago
If you have Yola silver within the hour you can have a super duper banner that interacts with any mouseover... Faster than the 3 hours it took for me to write this... LOL

Check out mine so far... http://beartest.yolasite.com/index4.php Mouse over my banner, up and down and all around... Pretty cool huh???

When I get it the way that I want I will add it to my main site later...

The following is ONLY for the style "Squared Glass". If you want to use any other style you will need to figure out the necessary changes yourself.

1) Right click and save the following images/files to your file manager to test on your website (Note: When you alter the images they images need to be the same size as the originals so open them in GIMP, add your vector PNG images with transparent backgrounds over mine and then simply hide the original then save your changed one in its place)















http://beartest.yolasite.com/resource...

http://beartest.yolasite.com/resource...

2) Drag a 2-column widget and slide the center divider all the way to the right.

3) Open your CSS editor and paste the following into the editor. (I changed the CSS for my style of squared glass and added the following to the editor to take the place of the original. Note: For the image URLs to the original banner, banner shadow, menu image and shadow I simply deleted the link and left a blank space in all but the last as that is the new and taller banner background image.)

div.ys_layout div#sys_banner {
background: url() top left no-repeat;
margin:0 0 0 0;
height:161px;
padding:1px 0 0 0;
voice-family: "\"
}

div.ys_layout div#content {
background:#fff url() top left repeat-x;
padding:16px 0 0 0;
}

div.ys_nav {
background:#fff url() bottom left no-repeat;
margin:0;
padding:0;
}

div.ys_nav_wrap {
background:url() top left repeat-x;
_behavior: url();
width:100%;
margin:0;
padding:0;
}

div.ys_nav ul {
background:#fff url() bottom left no-repeat;
list-style:none;
margin:0;
padding:5px 10px 0 10px;
}

#parallax {position:relative; overflow:hidden; width:880px; height:350px;
background-image:url('resources/bluesky.jpg');
}

4) Drag an HTML widget into the left side of the 2-column widget and paste the following into the editor.

<script type="text/javascript" src="resources/1/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="resources/1/jquery.jparallax.0.9.1.js" ></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
//alert("hi");
jQuery('#parallax').jparallax();
});
</script>

5) Drag an additional HTML widget below the first and paste the following into the editor.

<div id="parallax">

<img src="resources/rainbow.png" alt="" style="width: 1029px; height: 300px; position: absolute; left: 8.94186%; margin-left: -107.302px; bottom: 0.0941553%; margin-bottom: -0.282466px;">

<img src="resources/grass.png" alt="" style="width: 1200px; height: 350px; position: absolute; left: 8.94186%; margin-left: -107.302px; bottom: 0.0941553%; margin-bottom: -0.235388px;">

<img src="resources/smallbees.png" alt="" style="width: 700px; height: 193px; position: absolute; left: 8.94186%; margin-left: -107.302px; top: 0.0941553%; margin-top: -0.282466px;"></a>

<img src="resources/honeybearlogo.png" alt="" style="width: 700px; height: 349px; position: absolute; left: 8.94186%; margin-left: -107.302px; top: 0.0941553%; margin-top: -0.282466px;">

<img src="resources/boy.png" alt="" style="width: 1200px; height: 300px; position: absolute; left: 8.94186%; margin-left: -107.302px; top: 0.0941553%; margin-top: -0.282466px;">

<img src="resources/largebees.png" alt="" style="width: 912px; height: 228px; position: absolute; left: 8.94186%; margin-left: -107.302px; top: 0.0941553%; margin-top: -0.282466px;"></a>

</div>

6) Open the margin settings for the very first two-column widget from step 2 and set the upper variable to (-190) and set the left variable to (-5) then click "OK"

7) Republish your site and wait a few minutes until your banner has been changed to the new interactive one.

Please note that this has now made your banner 350 pixels high and nearly doubles it from the original.

If for some reason you mistakenly add too high a variable in the upper margin setting and loose the ability to edit the margin settings simply open your CSS editor and change the (padding: 16px) to a (padding: 160px) in the second from the top "div.ys_layout div#content" section. Then click "OK" to change the margin setting once visible. You will need to return the padding to 16 after you have corrected your margin settings.

Tip: play around with the layer image dimensions to get the animation speeds that you want. The smaller the image compared to the background layer the faster it will move when the mouse hovers. The bear only moves left and right, this is achieved by having the same height as the window (background element) but a smaller width. The bees have the opposite effect and move when the mouse goes up and down.

If you have any questions feel free to ask and I will see if I can answer them but as my laptop is still very fried I don't do much editing these days. I am amazed that it has lasted this long today... ;) Does anybody have one they can spare ;) ;) ;)

Happy site building
Ed

If you do use this or any of my other tips please do me the solid of sharing my website with your social networks and friends... I always can use more links... ;) You can find me with my head in the honey pot here...

You can find resources for vector images with transparent backgrounds in my Honey Bear Playhomes Tips thread... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Wow Ed, stunning as usual :) Thanks for sharing!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Em...

I have to admit that my site is what one would call busy but to a child or parent as I have been told it has always been fun and inviting. I really dig the interaction and simply love the brightness, vivid colors and uniformity.

I couldn't be happier with the new parallax banner with its 7 layer and even a flash cloud background. Man do I love that motion on mouseover. Too cool... Makes me want to do a banner with a nautical theme as it would be perfect with a boat and many layers of waves.

So many possibilities with this parallax effect and now that I figured out all the bits and bobs of it and made it work with Yola flawlessly I only wish that more would make one and post their results/websites here so that we all might see what they have created. Come on guys it really isn't all that hard...

I think that it looks super on my site. http://www.honeybearplayhomes.com/
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Looks amazing, Ed! I do hope other Yola users participate here.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Nazlie... Me too

LOL I love moving the mouse in big figure eights over the banner... LOL the little things. ;)
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
I just referenced your page along with another prominent user here on the Yola forums as an example of what you can do with some coding to really transform a website from the basic template into something spectactular! I'm so glad that we have users like you (and Andi of MangoPear) here to share your ideas and give us all a helping hand!! Impressive work as always, Ed!
PS ~ I STILL love to stop in once a day and click on the little bee hive to hear the bee inside chatter at me; please don't let him disappear!
Peach :o)~
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
I don't think the little guy will go anytime soon as he is one of my favorites as well. Making his hive match the big hive at the bottom of the page with the bear in disguise was a challenge to say the least. ;)

Once a day huh??? Glad to hear that he is humor therapy for you... ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
So I had a few hours before bed and thought to give the pirate ship on the ocean a try...

If I was doing it for a website or a paid client then I would make it far better that it is. ;)

http://www.honeybearplayhomes.com/pir...
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Ed, the banner looks very weierd on my side. I don't know whether it's my browsers problem or you're code's problem. Look at the image and you'll see what I mean. I'm using the latest version of chrome.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks Kevin

I usually try to ensure that the site looks the same in each browser so I did a comparison and come up with no abnormalities so I am left to conclude that your browser didn't fully load the entire website. The fact that the banner is higher than it should be and the lack of images say that is the case.

Thanks for the concern Chief... It is appreciated... ;)

Chrome



Firefox



IE



Safari

Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
LOL Code??? You talking bad about my code? LOL Kidding...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This is totally awesome! I don't see how you make this stuff, it's amazing! Great work Ed, it is fantastic.

Also, I like that new slide show thing below the banner, it looks great!

Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Honestly Nathan I don't know how I do some stuff as well... Really... LOL With the damage to my brain (seizures caused from right temporal lobe damage) I forget a great deal and after I do something only to come back after a few months I am like "What the eh, I did that???" Nice when you can amaze yourself LOL

Glad that you like it and use so many cool adjectives to describe it... Always nice to hear... ;)

If you like the slide show You can find it here. http://forum.yola.com/yola/topics/som...

Just follow the link and scroll down to the "Start-stop slider" It is pretty easy to implement. If you already have a jquery feature on the page that you want to add the slider to just link to the jquery-1.2.6.js file already in your file manage in the script for the slider.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Okay I am falling in love with this parallax... Mouse over my grass footer now... LOL too cool indeed. ;)

I need to work on the code tonight to allow for movement after you scroll the page as it at present only functions before you scroll. The little things that drive you nuts. ;)

http://www.honeybearplayhomes.com/
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Put the sun in the banner and inserted two girls inside the house with a wood paneling interior (behind actually) all of which move as the house does. Got that 3D feeling to it all. ;)

I think that I am at last done... I have to admit that it was fun...
I'm gonna go and relax now that I am complete with my parallax...

(bad rhyming) LOL