Home HTML5 Animated 3D Card HTML5 Animated 3D Card

HTML5 Animated 3D Card

Memasang kode HTML5 Animated 3D Card
Kode ini menampilkan Gambar serta musik Mp3. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="mys2010-styles">
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(http://Link Gambar.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}

div#scatter {
  perspective: 700px;
  width: 100%;
  height: 493px;
  overflow: hidden;
  background: linear-gradient(#000  0%, #fff 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#Sule  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#Sule  { transform: translateX(30%) rotateZ(700deg);
}
figure a#Mys2010 {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#Mys2010 {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}

figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }</style>
</head><body>
<div id="scatter">
<figure id="desk">
<a href="#" id="Sule">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
<a href="#" id="Mys2010">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
</figure>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
(function () {
    var desk = document.getElementById('desk');
    var links = desk.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        links[i].addEventListener('click', handler, false);
    }
    window.CP.exitedLoop(1);
    ;
    function handler(e) {
        e.preventDefault();
        var x = e.target;
        var video = x.querySelector('video');
        x.play();
        x.parentNode.classList.add('playing');
    }
    ;
}());
//# sourceURL=pen.js
</script>
Penjelsan :
Terapkan Link Musik dan Link Gambar pada kode yang diwarnai
Edited by. Myscript2010
Sources by. Dudley Storey  on Codepen
DEMOSHOW

Category: