Bloglar ve Siteler İçin Animasyonlu Tardis Girişi! by Kod Dostu on 8/23/2014 02:36:00 ÖS animasyonlu, blog intro, blogger, css3, dalek, doctor who, giriş, intro, kod dostu, koddostu, sitene ekle, tardis, tumblr adfxq yayınaef son ..xva baslikntd urlname Reklam İster blogger, ister tumblr, ister wordpress kullanıcısı olun, blogunuza veya sitenize bu muhteşem doctor who introsunu eklemek çok kolay! Tek yapmanız gereken, aşağıdaki kodu sitenize veya blogunuza, şablonunuzun en son satırlarından birinde bulunan </body> kodunun hemen öncesine yerleştirmek. Sitenize girmek isteyen ziyaretçilere, zaman vortexinin içinde savrulan 3 boyutlu bir tardis eşlik edecek.Tardis İntro Kodu, tabi ki sadece koddostu.com'da! Önizlemeyi Görmek İçin Tıklayın <!-- Koddostu - Bloglar İçin Animasyonlu Tardis Girişi START --> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <koddostu></koddostu> <style> #ortucux{ position:fixed; top:0px;left:0px;width:100%; height:100%; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xer2_QTSmIn6lZrM_gQcn24LeWL3CSiQqG1_flhc0ZC4DDhRmuXMgPq1cho7W4ZNDEBEcZEEKqRgxVkcvTa-H4KcD98SZ1o4UnSxiZ4EoF2j5neIqFf-S78Y16q8nvKQucAzHlkTzxUd/s1600/anigif.gif) no-repeat center center; z-index:77777; background-size:cover; -webkit-transition:-webkit-transform 1.4s 0.2s ease-in; transition:transform 1.4s 0.2s ease-in; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #ortucux.gidiyor{ -webkit-transform:scale(6,6); transform:scale(6,6); } #koddostu-tardis{ position:fixed; z-index:88888; top:100%; left:0%; width:285px; height: 400px; -webkit-transition:all 2.67s linear; transition:all 2.67s linear; margin:0px 0 0 -600px; } #koddostu-tardis.birazsag{ top:40%; margin:-200px 0 0 400px; left:100%; } #koddostu-tardis.birazsol{ top:20%; left:0%; margin: -200px 0 0 -400px; } #koddostu-tardis.birazorta, #koddostu-tardis.defol{ top:50%; left:50%; margin: -200px 0 0 -142px; } #koddostu-tardis.birazsag #topluca{ transform:scale(0.8,0.8); -webkit-transform:scale(0.8,0.8); } #koddostu-tardis.birazorta #topluca{ cursor:pointer; transform:scale(1,1); -webkit-transform:scale(1,1); } #koddostu-tardis.defol #topluca{ -webkit-transition:-webkit-transform 1.6s linear, opacity 0.2s 1.4s ease; transition:transform 1.6s linear, opacity 0.2s 1.4s ease; opacity:0; transform:scale(0.01,0.01); -webkit-transform:scale(0.01,0.01); } #topluca{ position:relative; width:285px; height: 400px; -webkit-perspective: 1200px; perspective: 1200px; -webkit-transition:-webkit-transform 2s 0.6s linear; transition:transform 2s 0.6s linear; transform:scale(0.1,0.1); -webkit-transform:scale(0.1,0.1); } #kutu { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 2s linear; transition: transform 2s linear; } #kutu figure { display: block; position: absolute; border: 2px solid black; } #kutu .front, #kutu .back { width: 196px; height: 196px; } #kutu .right, #kutu .left { width: 396px; height: 196px; left: -100px; } #kutu .top, #kutu .bottom { width: 196px; height: 396px; top:-100px; } #kutu .front { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiHXV192UJFKb_NSRQQYqHZCBCX8PqJFc-w3cvh94pc46Cy5ymWSxMm14poR4hAMyON4-XZRvHyOoX_Akh8vJ0e6H5mw8usFyfC9dmG41N94Ks97f1L6XkU6dqxBsySm_dzHkJA0uYBhu/s1600/fh.png); } #kutu .back { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9ilsGTS0Mqle1N7DlZ-IhN2KB8MEWLtaYkAr-I_lRYGtIbuHioibKwYmjVDt53tyc__fencNmcI8-mGWG962umR7KpDHrnnJZq3G6pKYMx-52O8aziTOgyD_T4DEI5mVoTiuW6DBKgHk/s1600/55w.png); } #kutu .right { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .left { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .top { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIHy1qMo4-sL_5VZqSl4gZ0MHfdwgSLpTMqBUTV0RWkAr3XGzMLsJkDJZAeKaJKuvBinMUqnm39B7B60XE38bgrkEvK6b5oLottwnYPuAltJxLZopJGFwj_yLUqISek31yOYXxgrJm_Tz/s1600/2.png); } #kutu .bottom { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .front { -webkit-transform: translateZ( 200px ); transform: translateZ( 200px ); } #kutu .back { -webkit-transform: rotateX( -180deg ) translateZ( 200px ); transform: rotateX( -180deg ) translateZ( 200px ); } #kutu .right { -webkit-transform: rotateY( 90deg ) translateZ( 100px ); transform: rotateY( 90deg ) translateZ( 100px ); } #kutu .right:after{ content:''; position:absolute;top:-100px;left:100px; width:196px; height:396px; -webkit-transform:rotate(90deg); transform:rotate(90deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu .left { -webkit-transform: rotateY( -90deg ) translateZ( 100px ); transform: rotateY( -90deg ) translateZ( 100px ); } #kutu .left:after{ content:''; position:absolute;top:-100px;left:100px; width:196px; height:396px; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu .top { -webkit-transform: rotateX( 90deg ) translateZ( 100px ); transform: rotateX( 90deg ) translateZ( 100px ); } #kutu .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 100px ); transform: rotateX( -90deg ) translateZ( 100px ); } #kutu .bottom:after{ content:''; position:absolute;top:0px;left:2px; width:196px; height:396px; -webkit-transform:rotate(180deg); transform:rotate(180deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu.on { -webkit-transform: translateZ( -200px ) rotateX( -90deg ); transform: translateZ( -200px ) rotateX( -90deg ); } #kutu.sag{ -webkit-transform: translateZ( -50px ) translateX( 20px ) translateY( -7px ) rotateX( -50deg ) rotateZ( -90deg ); transform: translateZ( -50px ) translateX( 20px ) translateY( -7px ) rotateX( -50deg ) rotateZ( -90deg ); } #kutu.arka{ -webkit-transform: translateZ( -80px ) translateX( -100px ) translateY( -7px ) rotateX( -480deg ) rotateZ( -180deg ); transform: translateZ( -80px ) translateX( -100px ) translateY( -7px ) rotateX( -480deg ) rotateZ( -180deg ); } #kutu.ok { -webkit-transition: -webkit-transform 2.8s linear; transition: transform 2.8s linear; -webkit-transform: translateZ( -200px ) rotateX( -450deg ); transform: translateZ( -200px ) rotateX( -450deg ); } #kutu.defol { -webkit-transition: -webkit-transform 2.8s linear; transition: transform 2.8s linear; -webkit-transform: translateZ( -200px ) rotateX( 450deg ) rotateY( 450deg ); transform:translateZ( -200px ) rotateX( 450deg ) rotateY( 450deg ); } </style> <div id="ortucux"></div> <div id="koddostu-tardis"> <div id="topluca" onclick="defol();"> <div id="kutu" class="on"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </div> </div><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><script src="http://kdostu.googlecode.com/svn/koddostu-tardis.js"></script> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!-- Koddostu - Bloglar İçin Animasyonlu Tardis Girişi STOP --> <!-- Koddostu - Bloglar İçin Animasyonlu Tardis Girişi START --> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <koddostu></koddostu> <style> #ortucux{ position:fixed; top:0px;left:0px;width:100%; height:100%; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xer2_QTSmIn6lZrM_gQcn24LeWL3CSiQqG1_flhc0ZC4DDhRmuXMgPq1cho7W4ZNDEBEcZEEKqRgxVkcvTa-H4KcD98SZ1o4UnSxiZ4EoF2j5neIqFf-S78Y16q8nvKQucAzHlkTzxUd/s1600/anigif.gif) no-repeat center center; z-index:77777; background-size:cover; -webkit-transition:-webkit-transform 1.4s 0.2s ease-in; transition:transform 1.4s 0.2s ease-in; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #ortucux.gidiyor{ -webkit-transform:scale(6,6); transform:scale(6,6); } #koddostu-tardis{ position:fixed; z-index:88888; top:100%; left:0%; width:285px; height: 400px; -webkit-transition:all 2.67s linear; transition:all 2.67s linear; margin:0px 0 0 -600px; } #koddostu-tardis.birazsag{ top:40%; margin:-200px 0 0 400px; left:100%; } #koddostu-tardis.birazsol{ top:20%; left:0%; margin: -200px 0 0 -400px; } #koddostu-tardis.birazorta, #koddostu-tardis.defol{ top:50%; left:50%; margin: -200px 0 0 -142px; } #koddostu-tardis.birazsag #topluca{ transform:scale(0.8,0.8); -webkit-transform:scale(0.8,0.8); } #koddostu-tardis.birazorta #topluca{ cursor:pointer; transform:scale(1,1); -webkit-transform:scale(1,1); } #koddostu-tardis.defol #topluca{ -webkit-transition:-webkit-transform 1.6s linear, opacity 0.2s 1.4s ease; transition:transform 1.6s linear, opacity 0.2s 1.4s ease; opacity:0; transform:scale(0.01,0.01); -webkit-transform:scale(0.01,0.01); } #topluca{ position:relative; width:285px; height: 400px; -webkit-perspective: 1200px; perspective: 1200px; -webkit-transition:-webkit-transform 2s 0.6s linear; transition:transform 2s 0.6s linear; transform:scale(0.1,0.1); -webkit-transform:scale(0.1,0.1); } #kutu { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 2s linear; transition: transform 2s linear; } #kutu figure { display: block; position: absolute; border: 2px solid black; } #kutu .front, #kutu .back { width: 196px; height: 196px; } #kutu .right, #kutu .left { width: 396px; height: 196px; left: -100px; } #kutu .top, #kutu .bottom { width: 196px; height: 396px; top:-100px; } #kutu .front { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiHXV192UJFKb_NSRQQYqHZCBCX8PqJFc-w3cvh94pc46Cy5ymWSxMm14poR4hAMyON4-XZRvHyOoX_Akh8vJ0e6H5mw8usFyfC9dmG41N94Ks97f1L6XkU6dqxBsySm_dzHkJA0uYBhu/s1600/fh.png); } #kutu .back { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9ilsGTS0Mqle1N7DlZ-IhN2KB8MEWLtaYkAr-I_lRYGtIbuHioibKwYmjVDt53tyc__fencNmcI8-mGWG962umR7KpDHrnnJZq3G6pKYMx-52O8aziTOgyD_T4DEI5mVoTiuW6DBKgHk/s1600/55w.png); } #kutu .right { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .left { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .top { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIHy1qMo4-sL_5VZqSl4gZ0MHfdwgSLpTMqBUTV0RWkAr3XGzMLsJkDJZAeKaJKuvBinMUqnm39B7B60XE38bgrkEvK6b5oLottwnYPuAltJxLZopJGFwj_yLUqISek31yOYXxgrJm_Tz/s1600/2.png); } #kutu .bottom { background: #008070 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png); } #kutu .front { -webkit-transform: translateZ( 200px ); transform: translateZ( 200px ); } #kutu .back { -webkit-transform: rotateX( -180deg ) translateZ( 200px ); transform: rotateX( -180deg ) translateZ( 200px ); } #kutu .right { -webkit-transform: rotateY( 90deg ) translateZ( 100px ); transform: rotateY( 90deg ) translateZ( 100px ); } #kutu .right:after{ content:''; position:absolute;top:-100px;left:100px; width:196px; height:396px; -webkit-transform:rotate(90deg); transform:rotate(90deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu .left { -webkit-transform: rotateY( -90deg ) translateZ( 100px ); transform: rotateY( -90deg ) translateZ( 100px ); } #kutu .left:after{ content:''; position:absolute;top:-100px;left:100px; width:196px; height:396px; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu .top { -webkit-transform: rotateX( 90deg ) translateZ( 100px ); transform: rotateX( 90deg ) translateZ( 100px ); } #kutu .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 100px ); transform: rotateX( -90deg ) translateZ( 100px ); } #kutu .bottom:after{ content:''; position:absolute;top:0px;left:2px; width:196px; height:396px; -webkit-transform:rotate(180deg); transform:rotate(180deg); background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdAVuB2PIVzI1lfkK0iblddp3SOy5PGuF76-VYX05OQ3ix_Z5z72_OVXt-iI21sFFCNnxfN1GIWqgtazGaD0W1pL75DsYUDJAa5iigEfcAe0RjaLhxfyxu_yntQT6SHETb6RegTR5xd8H/s1600/1.png) no-repeat top left; } #kutu.on { -webkit-transform: translateZ( -200px ) rotateX( -90deg ); transform: translateZ( -200px ) rotateX( -90deg ); } #kutu.sag{ -webkit-transform: translateZ( -50px ) translateX( 20px ) translateY( -7px ) rotateX( -50deg ) rotateZ( -90deg ); transform: translateZ( -50px ) translateX( 20px ) translateY( -7px ) rotateX( -50deg ) rotateZ( -90deg ); } #kutu.arka{ -webkit-transform: translateZ( -80px ) translateX( -100px ) translateY( -7px ) rotateX( -480deg ) rotateZ( -180deg ); transform: translateZ( -80px ) translateX( -100px ) translateY( -7px ) rotateX( -480deg ) rotateZ( -180deg ); } #kutu.ok { -webkit-transition: -webkit-transform 2.8s linear; transition: transform 2.8s linear; -webkit-transform: translateZ( -200px ) rotateX( -450deg ); transform: translateZ( -200px ) rotateX( -450deg ); } #kutu.defol { -webkit-transition: -webkit-transform 2.8s linear; transition: transform 2.8s linear; -webkit-transform: translateZ( -200px ) rotateX( 450deg ) rotateY( 450deg ); transform:translateZ( -200px ) rotateX( 450deg ) rotateY( 450deg ); } </style> <div id="ortucux"></div> <div id="koddostu-tardis"> <div id="topluca" onclick="defol();"> <div id="kutu" class="on"> <figure class="front"></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </div> </div><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><script src="http://kdostu.googlecode.com/svn/koddostu-tardis.js"></script> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!-- Koddostu - Bloglar İçin Animasyonlu Tardis Girişi STOP --> Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: