Positioning Backgrounds with Jquery

Positioning Backgrounds with Jquery

5 15005

Jquery Tutorial on how to Position Backgrounds

Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different design ideas with color/background changing.

As example, we want to create animated user friendly buttons or website navigation menu.

Someone can ask, why we need script if we can use hover effect + CSS styles. Here you will able to compare possibilities and see advantages of JQuery.

Here are Some very attractive samples:

Live Demo
download in package

How to do this? Not so difficult:


Step 1. HTML

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

<ul id="ex1">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex2">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex3">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex4">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex5">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

Step 2. CSS

<style type="text/css">
        h2 {padding-top:20px;clear:both;}
        ul {list-style:none;margin:0;padding:0;}
        li {float:left;width:100px;margin:0;padding:0;text-align:center;}
        li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
        li a:hover, li a:focus, li a:active {background-position:-150px 0;}
        li a {background:url(bg2.jpg) repeat 0 0;}
        #ex1 a {background:url(bg.jpg) repeat -20px 35px;}
        #ex2 a {background:url(bg2.jpg) repeat 0 0;}
        #ex3 a {background:url(bg3.jpg) repeat 0 0;}
        #ex4 a {background:url(bg4.jpg) repeat 0 0;}
        #ex5 a {background:url(bg4.jpg) repeat 0 0;}
</style>

Step 3. JQuery

<script type="text/javascript">
$(function(){
        $('#ex1 a')
                .css( {backgroundPosition: "-20px 35px"} )
                .mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
                                $(this).css({backgroundPosition: "-20px 35px"})
                        }})
                })
        $('#ex2 a')
                .css( {backgroundPosition: "0 0"} )
                .mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
                                $(this).css({backgroundPosition: "0 0"})
                        }})
                })
        $('#ex3 a')
                .css( {backgroundPosition: "0 0"} )
                .mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
                })
        $('#ex4 a')
                .css( {backgroundPosition: "0 0"} )
                .mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
                })

        $('#ex5 a')
                .css( {backgroundPosition: "0 0"} )
                .click(function(){
                        $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
                })
});
</script>

Step 4. Images

Also we need few images for these demos:

    bg
    bg2
    bg3
    bg4

View Demo of our samples

download in package

SIMILAR ARTICLES


5 COMMENTS

  1. …. a great collection of tutorials using Jquery for correctly positioning backgrounds on websites…. a dynamite post here at “ScriptTutorials” !!

  2. While the enumeration has different ‘id’ attributes, it is but well laid and easily understood. And before I forget, the live demo is very much helpful.

  3. haha ,,,i have finished a photo followed as your procedures ….thank you very much …Hope you teach me more knowledge …

Leave a Reply