03/02/16 | Mys2010 on Codepen

Memasang kode 3D Images Gallery
Code ini dapat menampilkan Gambar Slide Auto. 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">
body {);color:red;height:100%;overflow:hidden;} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  font-size:  6px;
  background: #f0f;
  border-bottom: 3px solid #dad;
} 
.ap {
position: fixed;
right: 0;
bottom:-23px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #f00;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #0a0 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:35px;
} 
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
} 
#gradient { 
position: fixed; 
bottom:-119px; 
width: 600%;
height: 600%;
left:-20px;
position: absolute;
background: linear-gradient(270deg, #9400D3, #003366, #b27000, #06617d, #CC0099, #A10048, #067370, #B0E0E6, #009999, #330099, #B20000, #8E006B,  #8B4513, #CC0099, #87CEEB, #0066B3,  #DC143C, #4B0082 ,  #8B008B, #FF7F50, #DDA0DD, #6B006B, #B0E0E6 , #990099 ,   #D8BFD8, #40E0D0 ,   #DA70D6, #FF69B4, #9400D3  );
background-size: 800% 800%; 
-webkit-animation: colors 160s ease infinite;
-moz-animation: colors 160s ease infinite;
animation: colors 160s ease infinite;
}
@-webkit-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes colors { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
*{Carausel}
*{
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
 box-sizing: border-box;
}
*:before,
*:after{
 box-sizing: border-box;
}
html,
body{
 min-height: 100%;
}
h1{
 display: table;
 margin: 60% auto 0;
 text-transform: uppercase;
 font-family: 'Agency FB', sans-serif;
 font-size: 4em;
 font-weight: 400;
 text-shadow: 0 1px white, 0 2px black;
}
.container{
 margin: 4% auto;
 width: 210px;
 height: 140px;
 position: relative;
 perspective: 1000px;
}
#carousel{
 width: 100%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 animation: rotation 20s infinite linear;
}
#carousel:hover{
 animation-play-state: paused;
}
#carousel figure{
 display: block;
 position: absolute;
 width: 186px;
 height: 116px;
 left: 10px;
 top: 10px;
 background: black;
 overflow: hidden;
 border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
img{
 -webkit-filter: grayscale(1);
 cursor: pointer;
 transition: all .5s ease;
}
img:hover{
 -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}
@keyframes rotation{
 from{
  transform: rotateY(0deg);
 }
 to{
  transform: rotateY(360deg);
 }}
</style>

<div id="gradient"></div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size: 10pt">CAROUSEL WITH SONG MP3</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#f00;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#f00;"> COPYRIGHT <a href="http://codepen.io/Myscript2010"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Visit Website"><img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2>
</a></div>
</div>
<div class="container">
<h1>CAROUSEL</h1><br>
<div class="container">
<br><br>
<div class="container">

<div id="carousel">
          <figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure>
   

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 
   
<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 
   
<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure> 

<figure>
    <div class="picture">
<a href="http://Link Judul" target="_blank" title="Link Anda">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKK8dy5_SYko9eforGnwYb3l7uGqNMPIn4nv_tb9wVtkTPlcM1KpxJWlriU0kk2FT4zYuden8aHT7RAwhojrTiMtcH3TrzGvEEWkq4C7Sz2Q48MVLv56a9UidV8ugvgGdhCDjsytj284/s1600/No-Image-M2010s.png" alt=""/>
            <div class="image-overlay-link"></a>            
</div> 
    </div>
       </figure>

<script>
var camera, // Core 3.js component
 scene, // Core 3.js component
 renderer, // Core 3.js component
 mouseX = 0, // Tracking Mouse Positions
 mouseY = 0, // Tracking Mouse Positions
 charCounter = 0,
 particles= []; // Array to store all particles 
 init(); //Call Initializer 
 //Initializer function
 function init(){
  //Focus of View( Camera view angle), Aspect Ratio, near Clipping Frame and Far Clipping Frame
  camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 10000 );   
  //Set Z-index of Camera backward to see some 3D view
  camera.position.z = 100;  
  //Creating a Scene for 3D Data
  scene = new THREE.Scene();
  scene.add(camera); // Adding a camera to Scene  
  renderer = new THREE.CanvasRenderer(); //Create a renderer for Canvas
  renderer.setSize(window.innerWidth, window.innerHeight); //Set to window size or your size  
  document.body.appendChild(renderer.domElement); //We are adding three.js canvas element to DOM Here
  makeParticles(); // Create Particles
 //document.addEventListener("mousemove",onMove,false); // Add handler to all mouse movements
 setInterval(updateCanvas,1000/14);  // take 1000 (the number of mils in a second) and divide it by our frame rate. 
 } 
 function makeParticles(){
  var particle, //Creating Core Particles
  material; //Creating Material with which particle is to be made  
  //Iterate from a zone of -1000 to 1000 and position particles at random place SO WE CREATE 100 Particles
  for(var zindex = -1000; zindex <1000; zindex+=20){
   //Create a Material with a color and pass reference to a rendered to draw and define its shape
   material = new THREE.ParticleCanvasMaterial({color:0xffffff,program: particleRender}); //Initializing Object with   
   Constructor Parameters
   particle = new THREE.Particle(material);   
   //Place Positions of X and Y
   particle.position.x = Math.random() *2000 -1000;
   particle.position.y = Math.random() *1000 -500;   
   particle.position.z = zindex; // Place it on out iterator   
   particle.scale.x = particle.scale.y = 4; // Scale to our factor   
   scene.add(particle); // Add to scene
   particles.push(particle); //Push to out list of particles
    } }
   function particleRender( context ) { 
 /*/ we get passed a reference to the canvas context
 context.beginPath();
 // and we just have to draw our shape at 0,0 - in this
 // case an arc from 0 to 2Pi radians or 360º - a full circle!
 context.arc( 0, 0, 1, 0,  Math.PI * 2, true );
 context.fill();*/
  var text = new Array();
    text[0] ="θ";
    text[1] = "ι";
    text[2] = "κ";
    text[3] = "λ";
    text[4] ="μ";
    text[5] = "ν";
    text[6] = "ξ";
    text[7] = "ο";
  context.font = '20pt Calibri';
  context.fillStyle = 'cyan';
  context.fillText(text[charCounter], 0, 0);
  charCounter = charCounter + 1; 
  if(charCounter >7){
  charCounter = 0;
  }
 }
 function onMove(){
 // store the mouseX and mouseY position 
  mouseX = event.clientX;
  mouseY = event.clientY;
 }
 function updateParticles(){
  // iterate through every particle
  for(var i=0; i<particles.length; i++) {  
   particle = particles[i];   
   // and move it forward dependent on the mouseY position. 
   particle.position.z +=  20;  
   // if the particle is too close move it to the back
   if(particle.position.z>1000) particle.position.z=-1000; 
    } } 
 function updateCanvas(){ // This is called for a frame rate of 30fps
  updateParticles(); // Update DOM
   // and render the scene from the perspective of the camera
  renderer.render( scene, camera );
 }
</script>

Edited by. Myscript2010
Sources by. Bobby on Codepen

DEMOSHOW

Category: 3d Images Gallery

Mys2010 on Codepen

3d Images Gallery

POPULAR

Blog Archive