1. Ana Sayfa
  2. Teknoloji
  3. jQuery ile Kaydırma Efekti Yapmak!

jQuery ile Kaydırma Efekti Yapmak!

featured

Dinamik web sayfaları oluştururken en iyi kullanıcı deneyimi göz önünde tutulur. Bunlardan biride yazdığınız yazının içindekiler bölümünü oluşturmaktır. jQuery ile kaydırma efekti yapmak için bu içerik size rehberlik yapıcaktır. Böylece ziyaretçi yazıda istediği yeri rahatlıkla bulabilir ve yazıda kolayca gezinebilir. Bu yazımızda jQuery ile nasıl kaydırma efekti nasıl yapılır onu öğreneceğiz.

Ayrıca Okuyun: Wordpress Şifre Sıfırlama! (2 Kolay Yöntem)

jQuery ile Kaydırma Efekti Yapmak!
jQuery ile Kaydırma Efekti Yapmak!

Gerekli Dökümanın Hazırlanması

İlk olarak index.html sayfamızı oluşturarak kodlamamıza başlayalım.

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>
<body>

</body>
</html>

İşte HTML5 iskeletimizi oluşturduk. Hadi diğer adıma geçelim!

jQuery Kütüphanesinin Sayfaya Dahil Edilmesi

jQuery‘nin kendi sitesinden aldığımız linki sayfamıza dahil edelim.

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>

Güzel. Artık jQuery’ye erişimimiz var. Şimdi birbirine kaydırma efekti ekleyeceğimiz iki tane div elementi oluşturup kaydıracağımız div’e id verelim. Daha sonra kaydırma kodlarını kopyalayıp dosyamızı dahil edelim. Son olarak nereden nereye kaydırma yapacağımızı belirlemek kaldı. Ben burada bir buton oluşturdum ve basıldığında kaydırma fonksiyonumuzun çalışacağı onclick değeri atadım.

Gerekli Kodların Eklenmesi

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>

<body>
<div class="ilkbolge" style="margin-top: 200px;">
<input type="button" onclick="smoothScroll(document.getElementById('icerik'))" value="Buraya Tıklayın!"/>
</div>

<div class="ikincibolge" style="width: 100%; height: 200px; background: black; margin-top: 600px;" id="icerik"></div>

<script>
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
}
while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container        if (target == scrollContainer) break;
targetY += target.offsetTop;
}
while (target = target.offsetParent);
scroll = function (c, a, b, i) {
i++;  if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
scroll(c, a, b, i); }, 20); } // start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>

Sizin tek yapmanız gereken;

onclick=”smoothScroll(document.getElementById(‘icerik’))” buradaki icerik id’sini kendi id değerinizle değiştirmek olacaktır.

İşte bu kadar! Artık web sayfalarınızda gönül rahatlığıyla kullanabileceksiniz.

Yorum Yap

Yazar Hakkında

Sizler için güzel içerik hazırlamaya çalışıyoruz. Bunun için iyice araştırma yaparak dünyadaki ve ülkemizdeki gelişmelerden sizleri teknolojiden mahrum bırakmıyoruz.

Yorum Yap