Hareketli Küpler
Merhaba arkadaslar. İlk yazım olarak sizlere fazla kullanılmayan ancak İntro'lar için gerçekten güzel olan bir tasarım göstereceğim..Yazıları nasıl değiştireceğimize gelirsek, verdiğim kodlardaki "text1 = 'Yazi'.split('')," seklindeki kodda bulunan "Yazi" kısmını degistirebiliriz.
Resmini göstermek istersek:
Demo adresi: TIKLA!
<div id="content_container"> <div id="pre_content"></div> <div id="content"> <h2 id="title"><span>hkd</span></h2> <header class="clearfix"> <h1>Tasarim-co<span>Hareketli kup demosu.</span></h1><br> </header> <div class="main"> <div id="hexaflip-demo1" class="demo"> </div> <div id="hexaflip-demo2" class="demo"> </div> </div> <script src="http://tympanus.net/Tutorials/HexaFlip/hexaflip.js"></script> <script> var hexaDemo1, hexaDemo3, text1 = 'Yazi'.split(''), settings = { size: 150, margin: 12, fontSize: 100, perspective: 450 }, makeObject = function(a){ var o = {}; for(var i = 0, l = a.length; i < l; i++){ o['letter' + i] = a; } return o; }, getSequence = function(a, reverse, random){ var o = {}, p; for(var i = 0, l = a.length; i < l; i++){ if(reverse){ p = l - i - 1; }else if(random){ p = Math.floor(Math.random() * l); }else{ p = i; } o['letter' + i] = a[p]; } return o; }; document.addEventListener('DOMContentLoaded', function(){ hexaDemo1 = new HexaFlip(document.getElementById('hexaflip-demo1'), makeObject(text1), settings); hexaDemo2 = new HexaFlip(document.getElementById('hexaflip-demo2'), makeObject(text2), settings); hexaDemo3 = new HexaFlip(document.getElementById('hexaflip-demo3')); setTimeout(function(){ hexaDemo1.setValue(getSequence(text1, true)); hexaDemo2.setValue(getSequence(text2, true)); }, 0); setTimeout(function(){ hexaDemo1.setValue(getSequence(text1)); hexaDemo2.setValue(getSequence(text2)); }, 1000); setTimeout(function(){ setInterval(function(){ hexaDemo1.setValue(getSequence(text1, false, true)); hexaDemo2.setValue(getSequence(text2, false, true)); }, 3000); }, 5000); }, false); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script> <script src="http://tympanus.net/codrops/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script> <style type="text/css"> /* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); html { height: 100%; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { font-family: 'Lato', Calibri, Arial, sans-serif; background: #f9f9f9; font-weight: 300; font-size: 15px; color: #333; overflow: scroll; overflow-x: hidden; } a { color: #555; text-decoration: none; } .container { width: 100%; position: relative; } .main, .container > header { width: 90%; max-width: 1000px; margin: 0 auto; position: relative; padding: 0 30px 50px 30px; } .container > header { padding: 30px; } .container > header h1 { font-size: 34px; line-height: 38px; margin: 0; font-weight: 700; color: #333; float: left; } .container > header h1 span { display: block; font-size: 20px; font-weight: 300; } /* Header Style */ .codrops-top { line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.5); text-transform: uppercase; z-index: 9999; position: relative; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); } .codrops-top a { padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.8); color: #000; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } /* Demo Buttons Style */ .codrops-demos { float: right; padding-top: 10px; } .codrops-demos a { display: inline-block; margin: 10px; color: #666; font-weight: 700; line-height: 30px; border-bottom: 4px solid transparent; } .codrops-demos a:hover { color: #000; border-color: #000; } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { color: #aaa; border-color: #aaa; } .support-note { clear: both; } .support-note span{ color: #ac375d; font-size: 16px; display: none; font-weight: bold; text-align: center; padding: 5px 0; } .hexaflip-cube { font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; cursor: move; cursor: -webkit-grab; cursor: -moz-grab; display: inline-block; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; -ms-transition: -ms-transform 0.4s; transition: transform 0.4s; } .hexaflip-cube.no-tween { -webkit-transition-duration: 0; -moz-transition-duration: 0; -o-transition-duration: 0; -ms-transition-duration: 0; transition-duration: 0; } .hexaflip-cube > div { width: 100%; overflow: hidden; height: 100.5%; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; text-align: center; background-color: #333; color: #fff; font-weight: 100; text-shadow: 0 -2px 0 rgba(0,0,0,0.2); line-height: 1.5; } .hexaflip-left, .hexaflip-right { background-color: #555 !important; } .hexaflip-timepicker .hexaflip-cube:last-child > div:nth-child(odd) { background-color: #ff575b; } #choose-time { margin: 80px auto; width: 300px; text-align: center; } #set-button, #submit { background-color: #888; color: #fff; -webkit-border-radius: 3px; border-radius: 3px; padding: 2px 6px; padding-bottom: 4px; cursor: pointer; margin-left: 5px; opacity: 0.95; filter: alpha(opacity=95); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; font-size: 20px; } #set-button:hover, #submit:hover { opacity: 1; -ms-filter: none; filter: none; } .demo { margin: 0 auto; -webkit-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); -moz-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); } #hexaflip-demo1, #hexaflip-demo2 { margin-bottom: 4rem; } #hexaflip-demo1 .hexaflip-cube, #hexaflip-demo2 .hexaflip-cube { opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } #hexaflip-demo1 .hexaflip-cube .hexaflip-left, #hexaflip-demo2 .hexaflip-cube .hexaflip-left, #hexaflip-demo1 .hexaflip-cube .hexaflip-right, #hexaflip-demo2 .hexaflip-cube .hexaflip-right { background-color: #222 !important; } #hexaflip-demo1 .hexaflip-cube > div, #hexaflip-demo2 .hexaflip-cube > div { font-weight: 100; text-shadow: none; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1), #hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) { background-color: #069ad5; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2), #hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) { background-color: #fc5215; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3), #hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) { background-color: #30b71d; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4), #hexaflip-demo2 .hexaflip-cube > div:nth-child(4n+4) { background-color: #eee; color: #222; } #hexaflip-demo2 { margin-bottom: 6rem; } #hexaflip-demo5 .hexaflip-cube > div { color: rgba(255,255,255,0.3); font-weight: 900 !important; letter-spacing: -3px; text-shadow: none; } #hexaflip-demo5 + div { margin-top: 80px; text-align: center; } .buttons { position: relative; top: 230px; width: 640px; margin: 0 auto; z-index: 100; } .disc-button { background-color: #222; color: #fff; text-align: center; width: 30px; height: 30px; -webkit-border-radius: 100%; border-radius: 100%; font-weight: 100; font-size: 24px; cursor: pointer; } .disc-button:hover { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } #prev { float: left; } #next { float: right; } #output { line-height: 2; } </style> </div> --YORUMLAR--