Login   Register  
Icontem

File: sheeps.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of tobozo  >  jQuery Sheep  >  sheeps.html  >  Download  
File: sheeps.html
Role: Example script
Content type: text/plain
Description: Example Page and code
Class: jQuery Sheep
Animate graphics of sheep around page elements
Author: By
Last change:
Date: 2013-04-09 09:18
Size: 2,891 bytes
 

Contents

Class file image Download 
<!doctype html>
<html>
<head>
<title>jQuery Sheep Plugin</title>
<meta charset="UTF-8" />
<style type="text/css">

body {
  background-color:#cecece;
}

h1,p {
  text-align:center;
}

#main {
  height:500px;
  width:800px;
  background-color:#ababab;
  position:absolute;
  left:50%;
  margin-left:-400px;
}

.item {
  width:150px;
  height:75px;
  background:blue;
  border:10px solid green;
  position:absolute;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="sheep.php/jquery.sheep.js" type="text/javascript"></script>
</head>
<body>
  <h1>jQuery Sheep generator</h1>
  <p>
    A useless jQuery plugin to spawn noisy clickable sheeps<br />
    and other animated gifs all around your boxes.<br />
    Brought to you by <a target="_blank" href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fphpsecure.info%2Fsheep.php&region=follow_link&screen_name=TobozoTagada&tw_p=followbutton&variant=2.0">tobozo</a> (c+) 2013<br />
    <a href="sheep.php/jquery.sheep.js">view plugin source</a>
  </p>
<div id="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div style="margin-top:550px;text-align:center">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="TobozoTagada">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div align="center">
  <div style="white-space:pre;display:inline-block;text-align:center;font-size:10px;font-family:sans-serif;">
    Credits :

        - Tatsutoshi Nomura's 1994 'Sheep' for PC -
        - Fuji Television Animation 'Stray Sheep Poe' -
        - RIP Trivia  Village Center, Inc : Streisand Effect -
        - Gif Sprite : http://spritedatabase.net/file/12735 -
        - Help file : http://mentadd.com/sheep/ -
        - Microsoft Gif Animator (Gimp sucks eh) -
  </div>
</div>
<script type="text/javascript">

$(document).ready(function() {

  // this is only to give random 
  // positions to the example boxes 
  var w,h,tw,th,x,y,offset;
  offset = $('#main').offset();
  w = $('#main').width();
  h = $('#main').height();
  $('.item').each(function() {
     tw = $(this).width();
     th = $(this).height();
     x =  (w* Math.random()) - tw + (offset.left/2);
     y =  (h* Math.random()) + tw - offset.top;
     $(this).css({top:y,left:x});
  });


  // Plugin usage is as simple as any jQuery selector
  $('.item').sheep();

})

</script>
</body>
</html>