Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Kamis, 02 Juni 2016

Dodecahedron: Pentagonal Efek Hover CSS

Diposting oleh
di
CSS . CSS3 . css3 Dodecahedron . Dodecahedron . membuat efek hover . Modernizr . pentagon . pentagon css . pentagonal . pentagonal css
0 Komentar
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 sobat buka CSS3 Dodecahedron

Dodecahedron: Pentagonal Efek Hover CSS

Jika sobat 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 sobat ingin menggunakan kode berikut ini, silahkan saja dan saya tidak bertanggungjawab dari penggunaan yang sobat lakukan

DEMO
Silahkan mainkan mouse sobat 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 sobat ingin memasangnya, silahkan gunakan saja dan jangan lupa pasang kode jQuery jika di template blog belum tersedia




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

Konversi Kode di Sini! OOT (Out of Topic)
TOP