Merhaba Arkadaşlar. Bugün Root TV için güzel bi 404 sayfası oluşturdum öncelikle sizlerle ona bakalım ve kendi sitemizede bunu nasıl yapabiliriz ona bakalım. 🙂
Root TV 404 Sayfası : 404 – Root TV
404 Sayfası Yapmak
Root TV WordPress olduğu için kendi yaptığım tema içerisinde 404.php oluşturmam yeterli oluyor. Bu sayfada 1 tane slider var sadece resimler çok hızlı geçiyor birde yazı için mouse kodu var. Mouse nereye giderse yazı tipindeki gölgelikte oranın tersine gidiyor.
jQuery kütüphanesini ve eklentiyi çağırdıktan sonra fonksiyonumu şu şekilde çalıştırıyorum;
<script type="text/javascript"> jQuery(function($){ $('#tv-wrap').jrumble({ x: 4,y: 0,rotation: 0 }); $('#tv-wrap').trigger('startRumble'); $('.slides').addClass('active').cycle({ fx: 'none', speed: 1, timeout: 70 }).cycle("resume"); }); </script>
Buradaki kodda gördüğünüz gibi speed:1 olarak yazılı. Slaytı yavaşta yapabilirsiniz ama bu şekilde daha egzantrik ve daha güzel.
Yazı tipindeki gölgelik olayınıda alttaki jQuery fonksiyonu ile çalıştırıyorum bunu sayfanın en altına ekliyorum. text classı verdiğim div içerisine yazılar yazıyorum daha sonra alttaki kodu yapıştırıyorum. Text class’ı oluşturmak zorunda değilsiniz rooteto class yapabilirsiniz fonksiyondada o classı çağırmanız yeterli olacaktır.
<script type="text/javascript"> var text = document.getElementById('text'), body = document.body, steps = 7; function threedee (e) { var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)), y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)), shadow = '', color = 190, radius = 3, i; for (i=0; i<steps; i++) { tx = Math.round(x / steps * i); ty = Math.round(y / steps * i); if (tx || ty) { color -= 3 * i; shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), '; } } shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)'; text.style.textShadow = shadow; text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; } document.addEventListener('mousemove', threedee, false); </script>
Sayfanın tüm kodunu aşağıda paylaşıyorum birde not bırakıyorum sakın benim jquery linklerimi, css linklerimi değiştirmeyi unutmayın.
HTML Head Kodu
<meta charset="utf-8" /> <title>404 - Root TV</title> <link href="http://tv.rooteto.com/wp-content/themes/rootetotv/404/sieses.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://tv.rooteto.com/wp-content/themes/rootetotv/404/jquery.min.js"></script> <script type="text/javascript" src="http://tv.rooteto.com/wp-content/themes/rootetotv/404/jquery.cycle.all.js"></script> <script type="text/javascript" src="http://tv.rooteto.com/wp-content/themes/rootetotv/404/form.js"></script> <script type="text/javascript"> jQuery(function($){ $('#tv-wrap').jrumble({ x: 4,y: 0,rotation: 0 }); $('#tv-wrap').trigger('startRumble'); $('.slides').addClass('active').cycle({ fx: 'none', speed: 1, timeout: 70 }).cycle("resume"); }); </script> <style type="text/css"> html { background-image: none; } #versionBar { background-color:#212121; position:fixed; width:100%; height:35px; bottom:0; left:0; text-align:center; line-height:35px; } .copyright{ text-align:center; font-size:10px; color:#CCC; } .copyright a{ color:#A31F1A; text-decoration:none } .slides li img{ width: 100%!important; height: 100%!important; } </style>
Body Kodu
<div class="errorpage"> <div id="tv-wrap"><img src="http://tv.rooteto.com/wp-content/themes/rootetotv/404/tv.png" width="300" height="273" id="tv"/> <div class="slideshow-block"> <a href="http://tv.rooteto.com/" class="link"></a> <ul class="slides"> <li><img src="https://1.bp.blogspot.com/-cuREuBowu7A/UNdDYsUHHQI/AAAAAAAANLw/MZiqaMix6I4/s1600/star-tv.jpg"/></li> <li><img src="https://3.bp.blogspot.com/-FOPvnaXI19I/UNdDK5uokbI/AAAAAAAANLo/FKq35-JB40I/s1600/kanal-d-logo.png"/></li> <li><img src="https://3.bp.blogspot.com/-FZi5fWao9Y8/UNdCmi0QNQI/AAAAAAAANLg/n4rrI2dna_s/s1600/show-tv.jpg"/></li> <li><img src="https://1.bp.blogspot.com/-u9uWu2QDC70/UNdp-tOMesI/AAAAAAAANNw/stU1nyZLrB0/s1600/stv-logo.jpg"/></li> <li><img src="https://2.bp.blogspot.com/-GeGZGY5jt0E/UO3LMnKmhpI/AAAAAAAAOo4/U_DAakoISCw/s1600/fox-tv.jpg"/></li> <li><img src="https://1.bp.blogspot.com/-a6RgPbVoQKQ/UNdCNkBNHiI/AAAAAAAANLY/-KsmOmYaIq4/s1600/atv-tv.jpg"/></li> <li><img src="https://2.bp.blogspot.com/-wFdZUWshn-o/UO3HCSIIs-I/AAAAAAAAOlo/7ILVdfuYWqw/s1600/ntvspor.jpg"/></li> <li><img src="https://3.bp.blogspot.com/-Wyh5hkwU_9E/UNdqlqDGv8I/AAAAAAAANN4/wpy_1xnpYJI/s1600/trt-hd.png"/></li> <li><img src="https://2.bp.blogspot.com/-AM0VtogFTzE/UNDMGiCkqAI/AAAAAAAAM6g/rhC1PqdNIDU/s1600/yumurcak-tv.jpg"/></li> <li><img src="https://4.bp.blogspot.com/-WMuMPjy8HT8/UO3HW0rd1CI/AAAAAAAAOlw/ct7ibN4Xw-g/s1600/ntv-logo.jpg"/></li> <li><img src="https://2.bp.blogspot.com/-cKixtqfH-PQ/UNdoYnb3ZII/AAAAAAAANNY/5B_Ul0w-9xg/s1600/cnbce-tv.gif"/></li> <li><img src="https://3.bp.blogspot.com/-IYmjCtIlYlY/UO3Hn9I4j8I/AAAAAAAAOl4/OXraalDHNJg/s1600/cnn-turk.jpg"/></li> </ul> </div> </div> <div id="text"> <h1> 404 Bulunamadı!</h1> <h2>Root TV'de yanlış yerdesiniz.</h2> </div> <center><a href="http://tv.rooteto.com/">Ana Sayfaya Dön :)</a></center> </div> <div class="clear"></div> <div id="versionBar" > <div class="copyright" > © Copyright - rooteto.com</div> <!-- // copyright--> </div> <script type="text/javascript"> var text = document.getElementById('text'), body = document.body, steps = 7; function threedee (e) { var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)), y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)), shadow = '', color = 190, radius = 3, i; for (i=0; i<steps; i++) { tx = Math.round(x / steps * i); ty = Math.round(y / steps * i); if (tx || ty) { color -= 3 * i; shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), '; } } shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)'; text.style.textShadow = shadow; text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; } document.addEventListener('mousemove', threedee, false); </script>
İşte bu kadar inşallah işinize yarar 🙂 jQuery slayt eklentiside ararsanız onada daha önceden açmış olduğum sayfadan inceleyebilirsiniz: 8 Esnek jQuery Slayt Eklentisi – Kaynak: Admin 404