• 0

Scroll Background jQuery

Scroll Background jQuery
Selain kita dapat merubah atau menggonta-ganti background dengan "Switch Stylesheets", kita dapat juga membuat effect scroll atau "bergerak keatas" pada "image background" dengan bantuan "Scroll Background jQuery". Tutorial ini saya contek dari web punya orang jepang yang beralamat di http://www.canarygraphics.jp. Jika anda tertarik sebelumnya lihat demo "Scroll Background jQuery" di "Blogger Template".

Penerapan "Scroll Background jQuery" sangat mudah.

  • 1. Javascript
a. Masukan script jQuery berikut sebelum kode

</head>

(jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :
Copy Codeprint?
  1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>  
b. Kemudian masukan pula Javascript "Scroll Background" berikut di bawah script jQuery tersebut.
Copy Codeprint?
  1. <script type='text/javascript'>  
  2. //<![CDATA[  
  3. $(function(){  
  4. // ***  
  5. // Scrolling background  
  6. // ***  
  7. // height of background image in pixels  
  8. var backgroundheight = 4000;  
  9. // get the current minute/hour of the day  
  10. var now = new Date();  
  11. var hour = now.getHours();  
  12. var minute = now.getMinutes();  
  13. // work out how far through the day we are as a percentage - e.g. 6pm = 75%  
  14. var hourpercent = hour / 24 * 100;  
  15. var minutepercent = minute / 30 / 24 * 100;  
  16. var percentofday = Math.round(hourpercent + minutepercent);  
  17. // calculate which pixel row to start graphic from based on how far through the day we are  
  18. var offset = backgroundheight / 100 * percentofday;  
  19. // graphic starts at approx 6am, so adjust offset by 1/4  
  20. var offset = offset - (backgroundheight / 1);  
  21. function scrollbackground() {  
  22. // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1  
  23. offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;  
  24. // apply the background position  
  25. $('body').css("background-position", "50% " + offset + "px");  
  26. // call self to continue animation  
  27. setTimeout(function() {  
  28. scrollbackground();  
  29. }, 70  
  30. );  
  31. }  
  32. // Start the animation  
  33. scrollbackground();  
  34. });  
  35. //]]>  
  36. </script>    
  • 2. CSS
Masukan kode css background berikut ini pada body
Copy Codeprint?
  1. background:url(http://2.bp.blogspot.com/-nukWrwwjHu0/ThthFnjUzHI/AAAAAAAAEaY/7v2qaFfV_c4/s1600/bgscroll.jpg);  
contoh:
Copy Codeprint?
  1. body {  
  2. background:url(http://2.bp.blogspot.com/-nukWrwwjHu0/ThthFnjUzHI/AAAAAAAAEaY/7v2qaFfV_c4/s1600/bgscroll.jpg);  
  3. margin:0;  
  4. color:$textcolor;  
  5. font:x-small Georgia Serif;  
  6. font-size/* */:/**/small;  
  7. font-size: /**/small;  
  8. text-align: center;  
  9. }  

DEMO

Posted by
Unknown

More
  • 0

cursor following menu

cursor following menu

  • Untuk membuatnya ikuti langkah-langkah dibawah ini.
   1. Login blogger
   2. Tata Letak/Layout - Edit HTML
   3. Klik pada Expand Template Widget.
   4.  Selanjutnya cari kode
]]></b:skin>
Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin>
Copy Codeprint?
  1. /* cursor following menu style */  
  2. #cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);} /* stupid IE needs a background value */  
  3. #cf_menu .container{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;}  
  4. #cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;}  
  5. #cf_menu ul{margin:0; padding:0; list-style:none; display:none;}  
  6. #cf_menu ul li{margin:0; padding:0;}  
  7. #cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;}  
  8. #cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;}  
  9. #cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;}  
  10. #cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;}  
  11. #cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;}  
  12. #cf_menu ul ul a:hover{background:#fff; color:#000;}  
  13. .cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;} /* menu opacity */  
Lalu masukan kode di bawah ini tepat di atas kode </head>
Copy Codeprint?
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
  2. <script type="text/javascript" src="http://generation-platinum.googlecode.com/files/jquery.easing.1.3panning.js"></script>  
  3. <script src='http://generation-platinum.googlecode.com/files/malihu.jquery.cfm.js'></script>  
Lalu sobat cari kode
</body>
dan masukan kode di bawah ini tempat di atas kode </body> tersebut
Copy Codeprint?
  1. <script type="text/javascript">  
  2. //cursor following menu config  
  3. $mouseover_title="+ MENU"; //menu title text on mouse-over  
  4. $mouseout_title="MENU"; //menu title text on mouse-out  
  5. $menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)  
  6. $menu_following_easing="easeOutCirc";   
  7. $menu_cursor_space=30; //space between cursor and menu  
  8. $menu_show_speed="slow"; //menu open animation speed  
  9. $menu_show_easing="easeOutExpo"; //menu open animation easing type  
  10. $menu_hide_speed="slow"; //menu close animation speed  
  11. $menu_hide_easing="easeInExpo"; //menu close animation easing type  
  12. </script>  
dan masukan kode berikut ini tepat di bawah kode <body>
Copy Codeprint?
  1. <div id="cf_menu">  
  2. <div class="container">  
  3.     <div class="title">  
  4. MENU</div>  
  5. <ul>  
  6. <li><a href="#" onclick="Animate2id('#home');return false">&uarr; Home</a></li>  
  7. <li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>  
  8. <li><a href="work">+ Work</a>  
  9. <ul>  
  10. <li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>  
  11. <li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>  
  12. <li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>  
  13. </ul>  
  14. </li>  
  15. <li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>  
  16. <li><a href="links">+ Interesting links</a>  
  17. <ul>  
  18. <li><a href="#" onclick="Animate2id('#freebies');return false">Freebies &amp; Resources</a></li>  
  19. <li><a href="#" onclick="Animate2id('#people');return false">People</a></li>  
  20. </ul>  
  21. </li>  
  22. <li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>  
  23. <li><a href="info">+ Script info</a>  
  24. <ul>  
  25. <li><a href="http://manos.malihu.gr/cursor-following-menu/">See the post</a></li>  
  26. <li><a href="http://manos.malihu.gr/tuts/cursor_following_menu.zip">&darr; Download</a></li>  
  27. </ul>  
  28. </li>  
  29. <li><a href="http://manos.malihu.gr">malihu</a></li>  
  30. </ul>  
  31. </div>  
  32. </div>  

DEMO

Posted by
Unknown

More

Copyright © / Info Indo

Template by : Urang-kurai / powered by :blogger