loading...

Thursday, September 30, 2010

Animating your blogger blog with spritely a jquery plugin

Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
You could have a look at their website for Demo and some more sites using Spritely in their Gallery.

But have you seen a blogger with the above  integrated feature.See yourself for a Demo and you can download the template for free.
Blogger Demo1(animation in header)
Blogger Demo1(animation in footer)

How to integrate to your Blogger blog in Header?
Step1
Go to Design->Edit html
Just above </head> paste the below code.(use Ctrl+f to locate it)
<script src='http://www.spritely.net/lib/jquery/1.3.2/jquery-1.3.2.min.js' type='text/javascript'/> 
    <script src='http://www.spritely.net/scripts/jquery-ui-1.7.2.spritely.custom.min.js' type='text/javascript'/> 
    <script src='http://www.spritely.net/lib/jquery/1.3.2/plugins/jquery.spritely-0.2.1.js' type='text/javascript'/> 
<script src='http://www.spritely.net/scripts/main.js' type='text/javascript'/>
Save your template
Step2
Find ]]></b:skin> and Add the below css code above ]]></b:skin>
Another way to add it is go to your template designer->advanced options->add CSS and add the below code
#stage {
            top: 0px;
            left: 0px;
            z-index: 100;
        }
.stage {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-width: 900px;
            height: 359px;
        }
#bg {
            background: #aedfe5 url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvwPnvGrI/AAAAAAAAAFg/Qbbq-4zMPBc/s1600/sky1.png) 0 0 repeat-x;
        }
#clouds {
            background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvtGzYMYI/AAAAAAAAAFU/E5A0QizNsQ4/s1600/cloud.png) 305px 102px repeat-x;
        }
#hill2 {
            background: transparent url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQvuX_kU8I/AAAAAAAAAFY/4a_VXNaGhXs/s1600/hill2.png) 0 263px repeat-x;
        }
#hill1 {
            background: transparent url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQvvpNqviI/AAAAAAAAAFc/Y_h0NLgEDVI/s1600/hill-with-windmill.png) 0 160px repeat-x;
        }
#bird {
            background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvslDVPRI/AAAAAAAAAFQ/vQ-mvk1qN6c/s1600/bird-forward-back.png) 0 0 no-repeat;
            position: absolute;
            top: 150px;
            left: 65px;
            width: 180px;
            height: 123px;
            z-index: 2000;
            cursor: pointer;
        }

#dragMe {
    position: absolute;
    top: 290px;
    left: 57%;
    z-index: 150;
    background: url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Oy1NJRI/AAAAAAAAAFs/g-j77pIBQgc/s1600/dragme_text.png) 0 0 no-repeat;
    margin-left: -50px;
    width: 100px;
    height: 65px;
}
#slider {
        display: none;/* show dynamically for non smart-phones or ipad */
    position: relative;
    z-index: 200;
    height: 14px;
    width: 100%;
    background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
}
#slider.ui-corner-all,
#slider .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
#slider.ui-widget-content {
    background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
    border: 0;
}
#slider .ui-state-default, #slider.ui-widget-content .ui-state-default {
    background: url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5NtTB0YI/AAAAAAAAAFk/2xojrhrue20/s1600/slider_handle.png) 0 0 no-repeat;
    width: 23px;
    height: 30px;
    border: 0;
}
#slider.ui-slider-horizontal .ui-slider-handle  {
    position: absolute;
    top: -9px;
    cursor: pointer;
    outline: none;
    height: 23px;
}
#bird2 {
    background: transparent url(http://3.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Od-6f6I/AAAAAAAAAFo/nOGk-5bkG3E/s1600/bird-forward-back-sm.png) 0 0 no-repeat;
    position: absolute;
    top: 70px;
    left: 155px;
    width: 140px;
    height: 96px;
    z-index: 1800;
    cursor: pointer;
}
Save your template
Step3
Since you are using this as your header you need to the delete the page header widget.
how to do it?

  1. Go to Design->Edit html
  2. Find <header> and delete everything inside it including  <header> and </header>
  3. then you will be prompted with a dialog whether to keep the widget or delete
  4. Hit delete widget 



<header>
.........
.........
</header>
Save your template

Step4
Adding Some extra piece code between the body Tag
Find this <body using ctrl+f And just below it add the following code


<div id="container" style="padding-top: 359px; ">
<div id="stage" class="stage"> 
        <div id="tap" class="stage"></div> 
        <div id="bg" class="stage"></div> 
        <div id="clouds" class="stage"></div> 
        <div id="hill2" class="stage"></div> 
        <div id="hill1" class="stage"></div>  
    </div>
<div id="bird2"></div> 
    <div id="bird"></div>

Then You have put the Div end tag be careful while doing this
find the below code (use ctrl+f to find </body>)
Place the </div> exactly shown below
</div>
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
</body>

Save your template if no error prompted then your are fine.
Thats it you should have a cool looking animated header.
Any problem Ask me through comments.

2 comments:

  1. Great tutorial!
    But please help me to apply the animation at the footer of the blog..
    Please...

    ReplyDelete
  2. Não consegui do step 3 em diante. Não encontrei o e não entendi como deve ser feito exatamente o fechamento da div que esta dando erro! Se puderem me ajudar serei muito grato. xD

    ReplyDelete

fuzionpro Headline

fuzionpro