Bu yazıda jQuery kütüphanesini kullanarak sayfalar arası geçiş yapacağız buradan örneklerini görebilirsiniz.Öncelikle Html sayfamızı oluşturuyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>jQuery ile sayfa geçiş efekti </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <!-- gerekli dosyalar --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!--#gerekli dosyalar --> </head> <body> <!-- html --> <nav class="menu"> <a href="#anasayfa">Anasayfa</a> <a href="#hakkimda">Hakkımda</a> <a href="#iletisim">İletişim</a> </nav> <div id="anasayfa"> <h1>ANASAYFA</h1> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> </div> <div id="hakkimda"> <h1>HAKKIMDA</h1> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> </div> <div id="iletisim"> <h1>İLETİŞİM</h1> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> </div> <!--#html --> </body> </html> |
yazıların tekrar tekrar yazılması sayfa geçişlerinin daha net görülebilmesi için daha sonra ufak bir css ile yazıları düzenleyelim.
<!-- style --> <style type="text/css"> * { margin:0; border:0; padding:0; text-decoration:none; } /* menü */ .menu { position:fixed; top:0; background:#EEE; width:100%; height:40px; text-align:center; border-bottom:1px solid red; } .menu a { color:#000; line-height:40px; margin-right:30px; padding: 2px; } h1 { text-align:center; padding-top:45px; } #anasayfa{ width:940px; margin:60px auto; background:lightyellow; } #hakkimda { width:940px; margin:60px auto; background:lightgreen } #iletisim { width:940px; margin:60px auto; background:lightblue } </style> <!--#style --> |
Jquery kodlarında geçtiğimizde ise scrollTop ve animate methodlarını kullanıyoruz animate methodu 2 parametre alır ilk parametre hareket yönünü ikinci parametre ise kaç milisaniye cinsinden değer alır
<!-- js --> <script type="text/javascript"> $(function() { $('.menu a').bind('click',function(event){ var link = $(this); $('html, body').stop().animate({ scrollTop: $(link.attr('href')).offset().top }, 1500); event.preventDefault(); }); });</script> <!--#js --> |
Herkeze İyi Çalışmalar