Selasa, 03 Juni 2014

Dodecahedron: Pentagonal Efek Hover CSS

Dodecahedron: Pentagonal Efek Hover CSS - Entahlah apa namanya, yang pasti saat saya melakukan pencarian dengan kata kunci pentagon css dan css modern akhirnya saya temukan sebuah website yang hanya menampilkan efek hover yang sangat menakjubkan. Bahkan dari kata kunci css modern, saya juga mendapatkan script dan css yang disebut Modernizr. Dan dibeberapa forum ternyata kode Modernizr ini telah banyak dibahas juga, namun yang pastinya yang saya ketahui sumber asli dari pentagon efek hover ini berasal dari themaninblur dan menamakan efek hover ini sebagai Dodecahedron

Dodecahedron: Pentagon Efek Hover CSS

Sumber dari Dodecahedron: Pentagonal Efek Hover CSS ini saya dapatkan dari sebuah situs yang hanya menayangkan dari efek hover tersebut dan pentagonal, saya namakan sendiri karena ada bentuk segi lima yang terdapat pada tampilannya (seperti gambar diatas). Dan disitus itu sendiri tidak terdapat panduan atau artikel yang menjelaskan cara membuat efek hover tersebut. Sehingga, karena tidak ada penjelasannya dari situs tersebut, saya pun mencuri kode dari Dodecahedron tersebut atau dari kode Modernizr

Untuk situsnya silahkan Anda buka CSS3 Dodecahedron

Dodecahedron: Pentagonal Efek Hover CSS

Jika Anda kesulitan untuk menemukan kode yang terdapat pada situs yang menayangkan tampilan langsung dari efek hover Dodecahedron dan Modernizr ini, silahkan gunakan kode yang telah saya ambil berikut ini. Saya mengambil kode ini bukan untuk tujuan komersial tapi hanya sebagai pembelajaran dengan tetap menyertakan sumber dari situs yang telah menayangkannya. Begitupun dengan kode CSS dan javascript dari kode Modernizr ini masih sesuai aslinya. Jika anda ingin menggunakan kode berikut ini, silahkan saja dan saya tidak bertanggungjawab dari penggunaan yang Anda lakukan

DEMO
Silahkan mainkan mouse Anda pada kubik segi lima ini dan keluarkan kursor mouse kearah tepi atau pinggir


























KODE CSS3 DODECAHEDRON
#dodecahedron {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -90px 0 0 -70px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 70px 80px -100px;
 -moz-transform-origin: 70px 80px -100px;
 transform-origin: 70px 80px -100px;
}

.group {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 transform-origin: 0 100%;
 -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

#group1 {
 left: -23px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed #group1 {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

.groupB {
 left: 55px;
 top: -173px;
 -webkit-transform: rotateZ(36deg) rotateX(20deg);
 -moz-transform: rotateZ(36deg) rotateX(20deg);
 transform: rotateZ(36deg) rotateX(20deg);
}

#dodecahedron.closed .groupB {
 -webkit-transform: rotateZ(36deg) rotateX(63deg);
 -moz-transform: rotateZ(36deg) rotateX(63deg);
 transform: rotateZ(36deg) rotateX(63deg);
}

.groupC {
 left: -24px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed .groupC {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

#group2 {
 left: 43px;
 top: 26px;
 -webkit-transform: rotateZ(-108deg) rotateX(20deg);
 -moz-transform: rotateZ(-108deg) rotateX(20deg);
 transform: rotateZ(-108deg) rotateX(20deg);
}

#dodecahedron.closed #group2 {
 -webkit-transform: rotateZ(-108deg) rotateX(63deg);
 -moz-transform: rotateZ(-108deg) rotateX(63deg);
 transform: rotateZ(-108deg) rotateX(63deg);
}

#group3 {
 left: 162px;
 top: -4px;
 -webkit-transform: rotateZ(-180deg) rotateX(20deg);
 -moz-transform: rotateZ(-180deg) rotateX(20deg);
 transform: rotateZ(-180deg) rotateX(20deg);
}

#dodecahedron.closed #group3 {
 -webkit-transform: rotateZ(-180deg) rotateX(63deg);
 -moz-transform: rotateZ(-180deg) rotateX(63deg);
 transform: rotateZ(-180deg) rotateX(63deg);
}

#group4 {
 left: 169px;
 top: -128px;
 -webkit-transform: rotateZ(-252deg) rotateX(20deg);
 -moz-transform: rotateZ(-252deg) rotateX(20deg);
 transform: rotateZ(-252deg) rotateX(20deg);
}

#dodecahedron.closed #group4 {
 -webkit-transform: rotateZ(-252deg) rotateX(63deg);
 -moz-transform: rotateZ(-252deg) rotateX(63deg);
 transform: rotateZ(-252deg) rotateX(63deg);
}

#group5 {
 left: 54px;
 top: -173px;
 -webkit-transform: rotateZ(-324deg) rotateX(20deg);
 -moz-transform: rotateZ(-324deg) rotateX(20deg);
 transform: rotateZ(-324deg) rotateX(20deg);
}

#dodecahedron.closed #group5 {
 -webkit-transform: rotateZ(-324deg) rotateX(63deg);
 -moz-transform: rotateZ(-324deg) rotateX(63deg);
 transform: rotateZ(-324deg) rotateX(63deg);
}

.pentagon {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 opacity: 0.67;
}

.p {
    position: absolute;
}

.p1 {
    position: absolute;
    left: 31px;
    top: 58px;
    width: 100px;
    height: 96px;
    background-color: #ff0000;
}

.p2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 59px solid #ff0000;
    border-left: 81px solid transparent;
    border-right: 81px solid transparent;
}

.p3 {
    position: absolute;
    left: 0px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-right: 32px solid #ff0000;
}

.p4 {
    position: absolute;
    left: 130px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-left: 32px solid #ff0000;
}

#pentagon2 .p1 {
 background-color: #ff6600;
}

#pentagon2 .p2 {
 border-bottom-color: #ff6600;
}

#pentagon2 .p3 {
 border-right-color: #ff6600;
}

#pentagon2 .p4 {
 border-left-color: #ff6600;
}

#pentagon3 .p1 {
 background-color: #ffcc00;
}

#pentagon3 .p2 {
 border-bottom-color: #ffcc00;
}

#pentagon3 .p3 {
 border-right-color: #ffcc00;
}

#pentagon3 .p4 {
 border-left-color: #ffcc00;
}

#pentagon4 .p1 {
 background-color: #ccff00;
}

#pentagon4 .p2 {
 border-bottom-color: #ccff00;
}

#pentagon4 .p3 {
 border-right-color: #ccff00;
}

#pentagon4 .p4 {
 border-left-color: #ccff00;
}

#pentagon5 .p1 {
 background-color: #66ff00;
}

#pentagon5 .p2 {
 border-bottom-color: #66ff00;
}

#pentagon5 .p3 {
 border-right-color: #66ff00;
}

#pentagon5 .p4 {
 border-left-color: #66ff00;
}

#pentagon6 .p1 {
 background-color: #00cc33;
}

#pentagon6 .p2 {
 border-bottom-color: #00cc33;
}

#pentagon6 .p3 {
 border-right-color: #00cc33;
}

#pentagon6 .p4 {
 border-left-color: #00cc33;
}

#pentagon7 .p1 {
 background-color: #00cc99;
}

#pentagon7 .p2 {
 border-bottom-color: #00cc99;
}

#pentagon7 .p3 {
 border-right-color: #00cc99;
}

#pentagon7 .p4 {
 border-left-color: #00cc99;
}

#pentagon8 .p1 {
 background-color: #00ccff;
}

#pentagon8 .p2 {
 border-bottom-color: #00ccff;
}

#pentagon8 .p3 {
 border-right-color: #00ccff;
}

#pentagon8 .p4 {
 border-left-color: #00ccff;
}

#pentagon9 .p1 {
 background-color: #0066ff;
}

#pentagon9 .p2 {
 border-bottom-color: #0066ff;
}

#pentagon9 .p3 {
 border-right-color: #0066ff;
}

#pentagon9 .p4 {
 border-left-color: #0066ff;
}

#pentagon10 .p1 {
 background-color: #0000ff;
}

#pentagon10 .p2 {
 border-bottom-color: #0000ff;
}

#pentagon10 .p3 {
 border-right-color: #0000ff;
}

#pentagon10 .p4 {
 border-left-color: #0000ff;
}

#pentagon11 .p1 {
 background-color: #6600ff;
}

#pentagon11 .p2 {
 border-bottom-color: #6600ff;
}

#pentagon11 .p3 {
 border-right-color: #6600ff;
}

#pentagon11 .p4 {
 border-left-color: #6600ff;
}

#pentagon12 .p1 {
 background-color: #cc00ff;
}

#pentagon12 .p2 {
 border-bottom-color: #cc00ff;
}

#pentagon12 .p3 {
 border-right-color: #cc00ff;
}

#pentagon12 .p4 {
 border-left-color: #cc00ff;
}

p {
 margin: 1em 0 0 0;
 -webkit-transform: translateZ(9999px);
 -moz-transform: translateZ(9999px);
 transform: translateZ(9999px);
 text-align: center;
}

p a:last-child {
 margin-left: 1em;
 border-left: 1px solid #4c4c4c;
 padding-left: 1em;
}

KODE HTML DODECAHEDRON
 <div id="dodecahedron">
  <div id="pentagon1" class="pentagon">
   <div class="p p1"></div>
   <div class="p p2"></div>
   <div class="p p3"></div>
   <div class="p p4"></div>
  </div> <!-- /.pentagon -->
  <div id="group1" class="group">
   <div id="pentagon2" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon3" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
     <div class="group groupC">
      <div id="pentagon4" class="pentagon">
       <div class="p p1"></div>
       <div class="p p2"></div>
       <div class="p p3"></div>
       <div class="p p4"></div>
      </div> <!-- /.pentagon -->
     </div> <!-- /.groupC -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group1 -->
  <div id="group2" class="group">
   <div id="pentagon5" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon6" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group2 -->
  <div id="group3" class="group">
   <div id="pentagon7" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon8" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group3 -->
  <div id="group4" class="group">
   <div id="pentagon9" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon10" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group4 -->
  <div id="group5" class="group">
   <div id="pentagon11" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon12" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group5 -->
 </div> <!-- /#dodecahedron -->

KODE JAVASCRIPT MODERNIZR 1
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Contains: csstransforms3d | teststyles | testprop | prefixes
 */
;window.Modernizr=function(a,b,c){function z(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(m.join(a+";")+(b||""))}function v(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n={},o={},p={},q=[],r=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["&shy;","<style>",a,"</style>"].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)};var A=function(a,c){var d=a.join(""),f=c.length;r(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);n.csstransforms3d=function(){var a=!!z(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a};for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));v(""),i=k=null,e._version=d,e._prefixes=m,e.testProp=function(a){return z([a])},e.testStyles=r;return e}(this,this.document);

KODE JAVASCRIPT MODERNIZR 2
var lastEventX = null;
var lastEventY = null;
var velocityX = 0;
var velocityY = 0;
var movementTimer = null;

$(init);

function init() {
 if (!Modernizr.csstransforms3d) {
  alert('This demo requires a browser that has 3D CSS transforms. As of December 15, 2011 that means the latest Chrome, Safari or Firefox Aurora');
 }
 
 $(document).mousemove(function(event) {
  if (movementTimer != null) {
   clearTimeout(movementTimer);
  }
  
  $('#dodecahedron').addClass('closed');
  
  movementTimer = setTimeout(function() {
   $('#dodecahedron').removeClass('closed');
  }, 1600);
  
  if (lastEventX != null) {
   var velocityX = (event.clientX - lastEventX) * 0.025;
   var velocityY = (event.clientY - lastEventY) * 0.025;
   var maxVelocity = velocityX;
   
   if (Math.abs(velocityX) < Math.abs(velocityY)) {
    maxVelocity = velocityY;
   }
   
   window.velocityX += velocityX;
   window.velocityY += velocityY;
  }
  
  lastEventX = event.clientX;
  lastEventY = event.clientY;
 });
 
 var body = document.getElementsByTagName('body')[0];
 body.addEventListener('touchmove', touchMove, false);
 body.addEventListener('touchstart', touchStart, false);
 body.addEventListener('touchend', touchEnd, false);

 setTimeout(function() {
  $(document).mousemove(hideInstructions);
  body.addEventListener('touchmove', hideInstructions, false);
  
  function hideInstructions() {
   $('#instructions').animate({opacity: 0}, 500, function() {
    $(this).remove();
   });
  }
 }, 2000);

 draw();
}

function draw() {
 var FRICTION = 0.96;
 var MIN_VELOCITY = 0.01;
 
 var dodecahedron = $('#dodecahedron');
 
 if (dodecahedron.data('angleX') == null) {
  dodecahedron.data('angleX', 0);
  dodecahedron.data('angleY', 0);
 }
 
 var angleX = dodecahedron.data('angleX');
 var angleY = dodecahedron.data('angleY');
 
 angleX = (angleX + velocityX) % 360;
 dodecahedron.data('angleX', angleX);
 velocityX *= FRICTION;
 if (Math.abs(velocityX) < MIN_VELOCITY) {
  velocityX = 0;
 }

 angleY = (angleY + velocityY) % 360;
 dodecahedron.data('angleY', angleY);
 velocityY *= FRICTION;
 if (Math.abs(velocityY) < MIN_VELOCITY) {
  velocityY = 0;
 }

 dodecahedron
  .css('-webkit-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('-moz-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')

 setTimeout(draw, 25);
}

function touchStart(event) {
 event.preventDefault();
}

function touchEnd(event) {
 event.preventDefault();
}

function touchMove(event) {
 event.preventDefault();

 if (lastEventX != null) {
  var velocityX = (event.touches[0].pageX - lastEventX) * 0.025;
  var velocityY = (event.touches[0].pageY - lastEventY) * 0.025;
  var maxVelocity = velocityX;
  
  if (Math.abs(velocityX) < Math.abs(velocityY)) {
   maxVelocity = velocityY;
  }
  
  window.velocityX = window.velocityX + velocityX;
  window.velocityY = window.velocityY + velocityY;
 }
 
 lastEventX = event.touches[0].pageX;
 lastEventY = event.touches[0].pageY;
}

Untuk cara penggunaannya salin kode CSS diatas kedalam template blog dan untuk penggunaan kode javascript, saya sarankan lebih baik di simpan di Google Drive dan letakkan kode javascript tersebut sebelum kode </head>

Maaf, saya tidak bisa menjelaskan secara langsung penggunaan dari Dodecahedron: Pentagonal Efek Hover CSS ini. Toh manfaat dari efek hover ini tidak begitu penting untuk blog, Namun jika Anda ingin memasangnya, silahkan gunakan saja dan jangan lupa pasang kode jQuery jika di template blog belum tersedia

Dodecahedron: Pentagonal Efek Hover CSS Rating: 4.5 Diposkan Oleh: ana sriwahyuni

4 komentar:

  1. ya,,kreatifitas memang penting,,,salut buat si pembuat ini,,meskipun bentuk di atas tidak begitu penting,tp dr dasar di atas kita bisa mengembangkannya lebih dalam lagi untuk keperluan lain tentunya,,terutama buat mempercantik blog kita

    BalasHapus
  2. wah mantap ..mksh telah berbagi

    BalasHapus
  3. wah mantap ..mksh telah berbagi

    BalasHapus
  4. jadi lebih cantik dan menarik ya buk kalau blog kita di hias dengan efek hover ini, kelihatan cool banget ;)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia