MENU

Root TV Güzel 404 Sayfa Tasarımı Nasıl Yapılır?

Anasayfa » Makalelerim » Root TV Güzel 404 Sayfa Tasarımı Nasıl Yapılır?
Root TV Güzel 404 Sayfa Tasarımı Nasıl Yapılır?

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

http://4.bp.blogspot.com/-Yw0C3ggMQAo/UQ4ZSR_lt1I/AAAAAAAAPvE/ow34e0nJoqU/s1600/root-tv.jpg

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="http://1.bp.blogspot.com/-cuREuBowu7A/UNdDYsUHHQI/AAAAAAAANLw/MZiqaMix6I4/s1600/star-tv.jpg"/></li>
	  <li><img src="http://3.bp.blogspot.com/-FOPvnaXI19I/UNdDK5uokbI/AAAAAAAANLo/FKq35-JB40I/s1600/kanal-d-logo.png"/></li>
	  <li><img src="http://3.bp.blogspot.com/-FZi5fWao9Y8/UNdCmi0QNQI/AAAAAAAANLg/n4rrI2dna_s/s1600/show-tv.jpg"/></li>
	  <li><img src="http://1.bp.blogspot.com/-u9uWu2QDC70/UNdp-tOMesI/AAAAAAAANNw/stU1nyZLrB0/s1600/stv-logo.jpg"/></li>
	  <li><img src="http://2.bp.blogspot.com/-GeGZGY5jt0E/UO3LMnKmhpI/AAAAAAAAOo4/U_DAakoISCw/s1600/fox-tv.jpg"/></li>
	  <li><img src="http://1.bp.blogspot.com/-a6RgPbVoQKQ/UNdCNkBNHiI/AAAAAAAANLY/-KsmOmYaIq4/s1600/atv-tv.jpg"/></li>
	  <li><img src="http://2.bp.blogspot.com/-wFdZUWshn-o/UO3HCSIIs-I/AAAAAAAAOlo/7ILVdfuYWqw/s1600/ntvspor.jpg"/></li>
	  <li><img src="http://3.bp.blogspot.com/-Wyh5hkwU_9E/UNdqlqDGv8I/AAAAAAAANN4/wpy_1xnpYJI/s1600/trt-hd.png"/></li>
	  <li><img src="http://2.bp.blogspot.com/-AM0VtogFTzE/UNDMGiCkqAI/AAAAAAAAM6g/rhC1PqdNIDU/s1600/yumurcak-tv.jpg"/></li>
	  <li><img src="http://4.bp.blogspot.com/-WMuMPjy8HT8/UO3HW0rd1CI/AAAAAAAAOlw/ct7ibN4Xw-g/s1600/ntv-logo.jpg"/></li>
	  <li><img src="http://2.bp.blogspot.com/-cKixtqfH-PQ/UNdoYnb3ZII/AAAAAAAANNY/5B_Ul0w-9xg/s1600/cnbce-tv.gif"/></li>
	  <li><img src="http://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" > &copy; 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

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.