11521 sujets

JavaScript, DOM et API Web HTML5

Eléments d'une liste qui apparaissent petit à petit

Bonsoir

je cherche à créer un effet "d'apparition" de texte. En bas de ma page web, je possède une liste contenant 6 éléments. Je souhaite que lorsqu'un utilisateur arrive sur la page et scroll, les éléments de la liste apparaissent un par un.
En gros on arrive sur la page, la liste est masqué et lorsque l'on scroll et qu'on arrive à admettons 100px de la liste, les items de la liste apparaissent un à un.
Je sais qu'il faut utiliser javascript et notamment jquery, mais je débute et je ne sais pas du tout comment commencer. Je sais faire apparaitre un bouton au scroll (pour le retour en haut de page) mais des éléments les uns après les autres.

Voilà le code html de la partie en question :

<section id="section4">
      <h2>Mon titre/h2>
      <ul>
        <li>? Element 1</li>
        <li>? Element 2</li>
        <li>? Element 3</li>
        <li>? Element 4</li>
        <li>? Element 5</li>
        <li>? Element 6</li>
      </ul>
    </section>


Concernant le css, à part des styles de caractères je n'ai rien. Je sais qu'il va falloir mettre un display none sur la liste.
Je ne sais vraiment pas comment faire l'effet que je veux, pouvez vous me donner quelques pistes svp ?

Merci d'avance
Bonsoir.

Pardonnez cet aparté mais est-ce judicieux ? Si l'utilisateur ne scrolle pas, la liste n'apparaîtra pas...

Smiley sweatdrop
Oui effectivement je me suis mal exprimé.
Cet effet débuterait lorsque l'utilisateur sera à la moitié (admettons) de la section précédente, de manière à ce qu'il voit l'effet et ne passe pas à coté de ces informations.

Le titre de la section va commencer à répondre à une question que l'utilisateur se posera et la liste ce sont en quelques sortes des preuves, donc en voyant le titre il va forcément vouloir voir ce qui se "cache" dessous. Mais c'est aussi pour ça que je souhaite que l'effet débute lorque l'utilisateur est au milieu de la section précédente, comme ça je suis sur qu'il ne passera pas à côté Smiley smile
Bonsoir Conra59,
ce que Zelena semble nous indiquer est qu'il ne faut guère stupéfier le visiteur.

Certes tu pourras tout faire (ou presque en javascript), mais un tel effet radicalement visuel devrait être utilisé avec la parcimonie la plus juste ! Et limitée.

Mais du css3 pourra te satisfaire comme ceci : http://sentrais.eu/chinon-art/index.htm

Non ? Mais je maintiens que ton "effet" est délicatement visuel ... Et parce que visuel, tu t'en inquiéteras.
Modifié par pictural (15 Dec 2016 - 22:21)
Modérateur
Hello,

Une librairie Jquery qui s'appelle jquery-visible fait ça très bien...
À toi de jouer ensuite avec les class pour afficher ou non tes éléments. Ensuite un peu de transitions pour les faire rentrer de manière fluide. Smiley cligne
D'accord merci à tous, je vais voir comment je peux faire

Pictural, je ne vois pas de quel effet tu veux parler sur le site que tu m'as envoyé...
Les trucs qui apparaissent conditionnellement au scroll sont définitivement à bannir.

Vous allez sûrement me prendre pour un extraterrestre, mais je vous confirme que je ne scrolle pas pour lire du contenu. Ce qui m'empêche tout bonnement d'accéder à tout ce qui est caché derrière ce système, sans aucune solution alternative.

Oui, je suis un utilisateur de lecteur d'écran, et non, je ne scroll jamais.
Désolé de commencer l'année 2017 en en balançAnt une vérité qui fait mal, mais c'est ainsi.
Modifié par QuentinC (01 Jan 2017 - 00:26)
Sujet clos
Aller à