Tiger Bird Webdesign: Pixel Bunny: Growing and Shrinking Objects with Offset and Client

Pixel Bunny

Grow or shrink the bunny!

The code does not work within this blog so please save the code on your desktop and try it out.

I was mindlessly doodling around on a Sunday afternoon when I had the idea to make a bunny with CSS and grow and shrink it with JavaScript.

The whole bunny is designed just with CSS. I won't go into details so please have a looksee at the code below.

I thought, I want to grow and shrink that little bunny. Yes, sounds like we need JavaScript. Growing and shrinking the body of the bunny means in other words adding pixels to it.

A perfect object for that are the 2 event objects offsetX and clientX. ClientX outputs the x-coordinate of the mouse pointer on the screen. For example, if you put the mouse on the top left corner of the browser the coordinate will be x = 0. OffsetX returns the x-coordinate of the div element.

Since it is an event object you have to write "event" inside the expression of the function otherwise nothing will fire. In the example it is "change(event)". The event is triggered when the move is moved horizontally.

HTML, CSS and JavaScript Code

The code below has to be saved as a .html file!

<html>
<head>
<title>Pixel Bunny</title>
   
  <style>

#pixel_bunny
    {position:relative;
    top:200px;
    left:100px;
    }
    
    #grow_shrink
    {position:absolute;
    top:170px;
    left:0px;
    width:300px;
    height:10px;
    background-color:#0099CC;
    }
    
    #head 
    {position:absolute;
    width:100px;
    height:100px;
    background-color:#CC6600;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #eye_left
    {position:absolute;
    top:15px;
    left:10px;
    width:40px;
    height:40px;
    background-color:white;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #left_iris
    {position:absolute;
    top:10px;
    left:10px;
    width:20px;
    height:20px;
    background-color:black;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #eye_right
    {position:absolute;
    top:15px;
    left:52px;
    width:40px;
    height:40px;
    background-color:white;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #right_iris
    {position:absolute;
    top:10px;
    left:10px;
    width:20px;
    height:20px;
    background-color:black;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #nose
    {position:absolute;
    top:55px;
    left:40px;
    width:20px;
    height:10px;
    background-color:pink;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    
    #mouth
    {position:absolute;
    top:66px;
    left:30px;
    width:40px;
    height:2px;
    background-color:red;
    }
    
    #teeth
    {position:absolute;
    top:67px;
    left:40px;
    width:20px;
    height:10px;
    background-color:white;
    display:-webkit-flex;
    display:flex;
    }
    
    #teeth .tooth
    {-webkit-flex:1;
    -ms-flex:1;
    flex:1;
    }
    
    .tooth
    {border-width:1px;
    border-style:solid;
    border-color:gray;
    }
    
    #left_ear
    {position:absolute;
    top:-80px;
    left:-10px;
    width:25px;
    height:100px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(145deg);
    -ms-transform:rotate(145deg);
    transform:rotate(145deg);
    }
    
    #left_inside_ear
    {position:absolute;
    top:10px;
    left:5px;
    width:15px;
    height:80px;
    background-color:pink;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(178deg);
    -ms-transform:rotate(178deg);
    transform:rotate(178deg);
    }
    
    #right_ear
    {position:absolute;
    top:-80px;
    left:80px;
    width:25px;
    height:100px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    transform:rotate(35deg);
    }
    
     #right_inside_ear
    {position:absolute;
    top:10px;
    left:5px;
    width:15px;
    height:80px;
    background-color:pink;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    -webkit-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    transform:rotate(2deg);
    }
    
    #bunny_body
    {position:absolute;
    top:50px;
    left:60px;
    width:80px;
    height:80px;
    z-index:-1;
    background-color:#CC6600;
    -webkit-border-radius:40%;
    -moz-border-radius:40%;
    border-radius:40%;
    }
    
    #tail
    {position:absolute;
    top:50px;
    left:130px;
    width:30px;
    height:30px;
    background-color:#CC6600;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
    }
    
    #front_leg
    {position:absolute;
    top:50px;
    left:20px;
    width:20px;
    height:50px;
     background-color:#CC6600;
    -webkit-border-radius:30%;
    -moz-border-radius:30%;
    border-radius:30%;
    }
    
    #back_leg
   {position:absolute;
    top:100px;
    left:115px;
    width:20px;
    height:50px;
     background-color:#CC6600;
    -webkit-border-radius:30%;
    -moz-border-radius:30%;
    border-radius:30%;
    }
    
  </style>

</head>
  
  <body>
  <div id="pixel_bunny">
  
  <div id="head">
    
    <div id="eye_left">
      <div id="left_iris">
</div>
</div>
<div id="eye_right">
      <div id="right_iris">
</div>
</div>
<div id="nose">
</div>
<div id="mouth">
</div>
<div id="teeth">
      <div class="tooth">
</div>
<div class="tooth">
</div>
</div>
<div id="left_ear">
      <div id="left_inside_ear">
</div>
</div>
<div id="right_ear">
      <div id="right_inside_ear">
</div>
</div>
</div>
<div id="tail">
        </div>
<div id="back_leg">
</div>
<div id="bunny_body">
 <div id="front_leg">
</div>
</div>
<div id="grow_shrink" onmousemove="change(event)">
<p>
Grow or shrink the bunny!</p>
</div>
</div>
</body>
</html>

Tiger Bird Webdesign

Monday, 12 January 2015

Pixel Bunny: Growing and Shrinking Objects with Offset and Client

HTML, CSS and JavaScript Code

No comments:

Post a Comment