Comment créer un effet de défilement réactif en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer un effet de défilement réactif en utilisant HTML, CSS et jQuery

WBOY

Libérer： 2023-10-27 16:35:06

original

1004 Les gens l'ont consulté

Comment créer un effet de défilement réactif en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer un effet de défilement réactif

Introduction :
Les effets de défilement sont l'un des éléments courants de la conception Web moderne. Cela peut améliorer l’expérience utilisateur et rendre les pages Web plus vivantes. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un effet de défilement réactif et fournit des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons préparer les tâches suivantes :

Un éditeur de texte, tel que Sublime Text, Visual Studio Code, etc.
Un navigateur, tel que Chrome, Firefox, etc.
Une structure HTML de base, nous allons créer des effets spéciaux autour de cette structure.

2. Structure HTML
Nous supposons que nous voulons créer une page avec des effets de défilement, comprenant une barre de navigation, une zone de contenu, etc. Voici un exemple de structure HTML :

<!DOCTYPE html>
<html>
<head>
    <title>滚动特效演示</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>
    <div id="section1" class="section">
        <h2>Section 1</h2>
        <p>这里是第一节内容</p>
    </div>
    <div id="section2" class="section">
        <h2>Section 2</h2>
        <p>这里是第二节内容</p>
    </div>
    <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>这里是第三节内容</p>
    </div>
</body>
</html>

Copier après la connexion

3. Styles CSS
Ensuite, nous devons ajouter quelques styles CSS de base à la structure HTML. Voici un exemple simple :

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 10px;
}

nav a {
    text-decoration: none;
    color: #fff;
}

.section {
    height: 500px;
    width: 100%;
    text-align: center;
}

.section h2 {
    margin-top: 200px;
    font-size: 30px;
}

.section p {
    font-size: 16px;
}

Copier après la connexion

Dans l'exemple ci-dessus, nous avons ajouté quelques styles de base, notamment la couleur d'arrière-plan de la barre de navigation, la couleur de la police, la hauteur de la zone de contenu, etc.

4. Effets spéciaux jQuery
Maintenant, nous commençons à écrire du code jQuery pour obtenir des effets spéciaux de défilement.

$(document).ready(function() {
    var navHeight = $('nav').outerHeight(); // 导航栏高度
    var sections = $('.section'); // 所有内容区域

    $(window).on('scroll', function() {
        var currentPosition = $(this).scrollTop(); // 当前滚动位置

        sections.each(function() {
            var top = $(this).offset().top - navHeight; // 内容区域距离顶部的距离

            if (currentPosition >= top) {
                var sectionId = $(this).attr('id'); // 当前内容区域的ID
                $('nav a').removeClass('active');
                $('nav a[href="#' + sectionId + '"]').addClass('active');
            }
        });
    });
});

Copier après la connexion

Dans l'exemple ci-dessus, nous écoutons l'événement de défilement de la fenêtre, déterminons la zone de contenu actuelle en fonction de la position de défilement et ajoutons le nom de la classe active au lien correspondant à la barre de navigation.

5. Améliorer les effets spéciaux
Afin d'améliorer l'expressivité des effets spéciaux, nous pouvons ajouter des effets de transition à des positions de défilement spécifiques. Voici un exemple :

$(document).ready(function() {
    var navHeight = $('nav').outerHeight();
    var sections = $('.section');

    $(window).on('scroll', function() {
        var currentPosition = $(this).scrollTop();

        sections.each(function() {
            var top = $(this).offset().top - navHeight;

            if (currentPosition >= top) {
                var sectionId = $(this).attr('id');
                $('nav a').removeClass('active');
                $('nav a[href="#' + sectionId + '"]').addClass('active');

                $(this).addClass('show');
                $(this).siblings().removeClass('show');
            }
        });
    });
});

Copier après la connexion

Dans l'exemple ci-dessus, nous avons ajouté le nom de la classe show à la zone de contenu actuelle et supprimé le nom de la classe dans d'autres zones de contenu. Grâce à la coopération des styles CSS, vous pouvez ajouter des effets de transition à la zone de contenu.

6. Résumé
Créer un effet de défilement réactif à l'aide de HTML, CSS et jQuery n'est pas compliqué. Il vous suffit de comprendre quelques concepts de base et compétences en codage. Avec l'exemple de code donné dans cet article, vous pouvez rapidement commencer à créer des effets de défilement sympas et les appliquer à votre site Web. J'espère que cet article vous sera utile et je vous souhaite de réussir à écrire des effets de défilement réactifs qui fonctionnent correctement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!