Scrollbar olmadan efektif site nasıl oluşturulur?

lossie in the hole · 10 Ocak 2024

Selam öncelikle,

Açıkçası var olan bir sitenin mantığını değiştirmek istiyorum. Sağ tarafta scrollbar olmadan tek bir scroll kaydırması ile aşağıya doğru bir sonraki sayfaya geçmesini istiyorum. Bunu sadece kodlama yaparak mı yapabiliriz yoksa herhangi bir site ya da araç var mı bunun gibi bir şey yapabilmek için?

Siteye göz atmanızı tavsiye ederim. Tıpkı buradaki gibi olmasını istiyorum.

WhoIstcode

who.istcode.com

xScpit · 10 Ocak 2024

lossie in the hole dedi:
Selam öncelikle,

Açıkçası var olan bir sitenin mantığını değiştirmek istiyorum. Sağ tarafta scrollbar olmadan tek bir scroll kaydırması ile aşağıya doğru bir sonraki sayfaya geçmesini istiyorum. Bunu sadece kodlama yaparak mı yapabiliriz yoksa herhangi bir site ya da araç var mı bunun gibi bir şey yapabilmek için?

Siteye göz atmanızı tavsiye ederim. Tıpkı buradaki gibi olmasını istiyorum.

WhoIstcode

who.istcode.com

Bunu kod ile yapabiliriz HTML CSS ve JS kullanarak sizin istediğiniz tarzda yapma imkanımız isterseniz kodları yazıp atabilirim örnek olarak.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-size: 2em;
            display: flex;
            flex-direction: column;
            transition: transform 1s ease;
        }

        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <section>1. Sayfa</section>
    <section>2. Sayfa</section>
    <section>3. Sayfa</section>
    <section>4. Sayfa</section>
    <section>5. Sayfa</section>
    <section>6. Sayfa</section>
  

    <script>
        let currentPage = 0;
        const totalPages = document.querySelectorAll('section').length;

        window.addEventListener('wheel', (event) => {
            if (event.deltaY > 0 && currentPage < totalPages - 1) {
                currentPage++;
            } else if (event.deltaY < 0 && currentPage > 0) {
                currentPage--;
            }

            document.body.style.transform = `translateY(-${currentPage * 100}vh)`;
        });
    </script>
</body>
</html>

dgknbzglu · 10 Ocak 2024

xScpit dedi:

Bunu kod ile yapabiliriz HTML CSS ve JS kullanarak sizin istediğiniz tarzda yapma imkanımız isterseniz kodları yazıp atabilirim örnek olarak.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-size: 2em;
            display: flex;
            flex-direction: column;
            transition: transform 1s ease;
        }

        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <section>1. Sayfa</section>
    <section>2. Sayfa</section>
    <section>3. Sayfa</section>
    <section>4. Sayfa</section>
    <section>5. Sayfa</section>
    <section>6. Sayfa</section>
 

    <script>
        let currentPage = 0;
        const totalPages = document.querySelectorAll('section').length;

        window.addEventListener('wheel', (event) => {
            if (event.deltaY > 0 && currentPage < totalPages - 1) {
                currentPage++;
            } else if (event.deltaY < 0 && currentPage > 0) {
                currentPage--;
            }

            document.body.style.transform = `translateY(-${currentPage * 100}vh)`;
        });
    </script>
</body>
</html>

Arkadaşın attığı şekilde de yapabilirsin.

Bahsettiğin sitede fullPage.js kullanılıyor.
Github adresi : GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Bir çok örneği var zip dosyasında. Kendine uygun olanı kullanabilirsin.

Scrollbar olmadan efektif site nasıl oluşturulur?

Ayrıntılı düzenleme

lossie in the hole

Centipat

WhoIstcode

xScpit

Hectopat

WhoIstcode

dgknbzglu

Megapat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz