HTML

Avec le développement de CSS3, les capacités de mise en page augmentent de façon exponentielle. De plus en plus de fonctionnalités peuvent être implémentées en utilisant du CSS « ​​pur ». Cet article montre le processus de développement interactif curseur de boucle sans une seule ligne de JavaScript. Rotation automatique, sélection de n'importe quelle diapositive avec transition en douceur – sur du CSS "pur". Exemple en action

Informations générales.

Normes et préfixes

Les propriétés de transition, d'animation et de transformation sont depuis longtemps implémentées sous une forme ou une autre dans tous les navigateurs populaires. Le 6 juin 2012, le W3C a annoncé que cette partie du standard CSS 3.0 en développement ne changerait pas radicalement et a recommandé que tous les navigateurs l'implémentent aujourd'hui.

Pour les développeurs front-end, cela signifie une norme sur laquelle s’appuyer. Désormais, vous n'avez plus à craindre qu'à l'avenir, certains navigateurs abandonnent leur propriété non standard de préfixe - après tout, elle sera dupliquée par la propriété standard et la remplacera si nécessaire.

Les versions obsolètes d'Internet Explorer, qui incluront bientôt même la version 9, ne prennent pas en charge la transition, l'animation et la transformation sous quelque forme que ce soit. Mais leur part dépasse toujours 10 %. Pour IE7-9, un « stub » js est proposé, mais il n'y a rien pour l'effet de commutation fluide entre les diapositives.

Pourquoi CSS et pas JS ?

De nombreuses tâches peuvent être résolues à l'aide de CSS : galeries interactives, menus déroulants à plusieurs niveaux, construction et animation de graphiques en trois dimensions... Pourquoi utiliser CSS quand vous pouvez tout faire en JS, surtout compte tenu de la masse de fichiers prêts à l'emploi. -des développements réalisés ? Les principaux arguments pourraient être :

• Dans la plupart des cas, les effets CSS sont plus rapides car leur exécution est gérée exclusivement par les moteurs de navigation. Ceci est particulièrement visible sur les appareils mobiles.
• Pour mettre en œuvre la tâche, vous n'avez pas besoin de connaissances en JS ou en tout langage de programmation en général. En règle générale, l'édition CSS est disponible même pour l'utilisateur moyen. De plus, « casser des choses » en CSS est beaucoup plus difficile qu'en JS.

Mise en œuvre

BEM

Ainsi, la méthodologie Block Element Modifier (BEM) a été utilisée pour nommer les classes CSS. L'essentiel est que la mise en page est basée sur la mise en page de la page à partir de blocs indépendants. Selon BEM, un bloc peut avoir des éléments, mais uniquement à l'intérieur du bloc.

Cours de curseur :
.slider /* Bloc contenant un flux d'images */ .slider__radio /* Bouton radio */ .slider__item /* Diapositive */ .slider__img /* Image à l'intérieur de la diapositive */ .slider__number-list /* Conteneur avec boutons bascule */ . slider__number /* Un bouton pour activer la diapositive associée */ .slider__number-after /* implémenté pour supporter IE7 et IE8, qui ne supportent pas respectivement les pseudo-éléments :after et ::after */ .slider_count_X /* Modificateur spécifiant le numéro de diapositives X */

Animation

La séquence d'animation d'images clés pour trois diapositives ressemble à ceci :
@keyframes slider__item-autoplay_count_3 ( 0%(opacité:0;) 10%(opacité:1;) 33% (opacité:1;) 43% (opacité:0;) 100%(opacité:0;) )
La particularité de l'implémentation du slider est que toutes les diapositives et tous les boutons se voient attribuer la même animation :
slider_count_3 .slider__item, slider_count_3 .slider__number-after ( -moz-animation : slider__item-autoplay_count_3 15 s infini ; -webkit-animation : slider__item-autoplay_count_3 15 s infini ; -o-animation : slider__item-autoplay_count_3 15 s infini ; animation : slider__item- autoplay_count_3 15 s in fini ; )
Cette approche vous permet de réduire considérablement la quantité de code, car toutes les animations doivent toujours être dupliquées avec des versions de préfixe (@-webkit-keyframes, @-moz-keyframes et @-o-keyframes), et chacune de ces « pile » de les règles doivent être décrites séparément pour chacune du nombre de diapositives souhaité (par le client). Si vous décrivez l'animation séparément pour chaque diapositive, la quantité de code peut atteindre des dizaines de kilo-octets.

Pour éviter cela, mais animer séquentiellement toutes les diapositives et boutons à l'aide d'une seule animation, il suffit de définir le décalage du début de l'animation dans le temps pour chaque paire diapositive + bouton :
.slider__item:nth-of-type(2), .slider__number:nth-of-type(2) > .slider__number-after ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o- délai d'animation : 5 s ; délai d'animation : 5 s ; ) .slider__item: nth-of-type (3), .slider__number: nth-of-type (3) > .slider__number-after ( -moz-animation-delay : 10 s ; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; ) ...
Pour la première paire, la valeur par défaut reste - décalage zéro.

Il est également important que le décalage ne dépende pas du nombre de diapositives et puisse être décrit une fois pour le nombre maximum de diapositives.

En conséquence, une transition animée fluide entre les diapositives ressemble à ceci :

Pause au survol

Dans le cas où l'utilisateur souhaite maintenir la diapositive sur l'écran, mais ne souhaite pas désactiver la rotation, vous pouvez utiliser le mode pause en passant le curseur sur la diapositive :
.slider: survol .slider__item, .slider: survol .slider__number-after ( -moz-animation-play-state : en pause ; -webkit-animation-play-state : en pause ; -o-animation-play-state : en pause ; animation -état de lecture : en pause ; )

Cliquez pour changer

Il existe un certain nombre d'"événements" CSS qui modifient l'état d'un élément HTML. Si l'on parle d'un clic de souris, alors c'est l'apparition de pseudo-classes : focus, :target, ou : vérifié sur l'un des éléments de la page. La pseudo-classe:focus ne peut pas avoir plus d'un élément par page à la fois ; pseudo-class:target obstrue l'historique du navigateur et nécessite la présence de la balise « a » ; pseudo-class:checked se souvient de l'état avant de quitter la page et, dans le cas des boutons radio, il s'agit d'un commutateur discret lorsqu'un seul élément d'un groupe spécifique peut être sélectionné - c'est ce qui est nécessaire.
.slider__radio (styles pour le bouton radio non sélectionné) .slider__radio:checked (styles pour le bouton radio sélectionné)

Dans les sélecteurs inférieurs au niveau 4, vous pouvez changer l'état d'un élément arbitraire (par exemple, l'opacité d'une diapositive) uniquement en conjonction avec un bouton radio, en utilisant les sélecteurs voisins + et ~. Vous pouvez changer à la fois les styles du voisin et les styles des descendants du voisin, mais dans tous les cas, le voisin doit être localisé après le bouton radio.
/* Style de la première diapositive à l'état « non sélectionné » */ .slider__radio:nth-of-type(1) ~ .slider__item:nth-of-type(1) ( opacity : 0.0; ) /* Style de la faites d'abord glisser dans "l'état sélectionné" */ .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1) ( opacité : 1.0; )
L'opacité de la diapositive, le conteneur qui contient l'image, a été modifiée. Il s'agit d'une méthode plus universelle que de changer les propriétés de l'image, car le conteneur div, contrairement à un élément img vide, peut contenir toute information supplémentaire (par exemple, le titre de la diapositive ou une description associée, y compris des liens).
Les diapositives ont des propriétés de transition qui vous permettent de basculer facilement entre elles.
.slider__item ( -moz-transition : opacité 0,2 s linéaire ; -webkit-transition : opacité 0,2 s linéaire ; -o-transition : opacité 0,2 s linéaire ; transition : opacité 0,2 s linéaire ; )

Arrêter la rotation lors de la sélection d'une diapositive

Lorsque l'utilisateur sélectionne une diapositive, l'animation de toutes les diapositives et boutons doit être arrêtée. Cela est dû au fait que la priorité des valeurs de propriété d'une animation en cours d'exécution est toujours supérieure à toutes les autres valeurs des mêmes propriétés (vous pouvez même remplacer les propriétés en ligne avec !important).

Étant donné que chaque diapositive a une animation, même si sa structure est la même, et que l'animation de toutes les diapositives doit être désactivée (sinon trois diapositives participeront à une transition en douceur), tous les boutons radio doivent être placés avant la première diapositive.
...

De plus, tous les boutons (étiquettes des boutons radio) doivent être regroupés dans un bloc séparé et placés après les boutons radio, sinon des problèmes peuvent survenir avec le positionnement universel des étiquettes pour un nombre arbitraire de diapositives.

L'arrêt de l'animation de toutes les diapositives et boutons lors de la sélection d'une diapositive est défini comme suit :
.slider__radio:checked ~ .slider__item, .slider__radio:checked ~ .slider__number-list > .slider__number-after ( opacité : 0.0 ; -moz-animation : aucune ; -webkit-animation : aucune ; -o-animation : aucune ; animation : aucun; )

N'importe quel nombre de diapositives

Il est impossible de créer un curseur universel pour un nombre quelconque de diapositives, car chaque numéro nécessite sa propre « pile » de règles d'animation CSS. Chacune de ces « pile » (si elle est décrite) peut être connectée via le modificateur de bloc curseur :
.slider_count_X
où X est le nombre de diapositives.

Pour prendre en charge certains navigateurs plus anciens, la première diapositive n'est pas animée. Pour cette raison, le conteneur de la première image a toujours une opacité de 1,0. Un problème se pose : lors du basculement en douceur de deux autres diapositives entre elles, la première apparaît (cela peut également être l'arrière-plan du parent du bloc curseur). Pour supprimer l'effet de transparence, définissez un délai de transition pour toutes les diapositives sauf celle sélectionnée ; pour celui sélectionné, le z-index est défini comme supérieur à celui de tous les autres :
.slider__item ( opacité : 1,0 ; position : relative ; -moz-transition : opacité 0,0s linéaire 0,2s ; -webkit-transition : opacité 0,0s linéaire 0,2s ; -o-transition : opacité 0,0s linéaire 0,2s ; transition : opacité 0,0s linéaire 0,2s ; ) .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1), .slider__radio:nth-of-type(2):checked ~ .slider__item: nième de type (2), .slider__radio: nième de type (3): vérifié ~ .slider__item: nième de type (3), .slider__radio: nième de type (4): vérifié ~ . slider__item:nth-of-type(4), .slider__radio:nth-of-type(5):vérifié ~ .slider__item:nth-of-type(5)( -moz-transition : opacité 0,2s linéaire ; -webkit- transition : opacité 0,2 s linéaire ; -o-transition : opacité 0,2 s linéaire ; transition : opacité 0,2 s linéaire ; indice z : 6 ; )
Pour garantir que les slides n'entrent pas en conflit avec d'autres éléments du site (par exemple, elles ne chevauchent pas un menu déroulant avec un z-index inférieur ou égal à 6), nous créons notre propre contexte d'empilement pour le bloc en définition du z-index minimum requis pour la visibilité :
.slider (index z : 0 ; )

Donc

Même aujourd'hui, sans compétences en programmation ni bibliothèques spécialisées, avant sa standardisation définitive, CSS 3.0 permet de mettre en œuvre des tâches complexes et intéressantes. Le curseur interactif décrit est actuellement entièrement fonctionnel pour 80 % des utilisateurs de RuNet. Pour la plupart des utilisateurs restants, à savoir les utilisateurs des navigateurs IE7-9, vous pouvez utiliser un « stub » js qui implémente la fonctionnalité principale du slider.

Un exemple fonctionnel peut être vu

1. Excellent diaporama jQuery

Un grand diaporama spectaculaire utilisant les technologies jQuery.

2. Plugin jQuery « Scale Carousel »

Diaporama évolutif à l'aide de jQuery. Vous pouvez définir les tailles de diaporama qui vous conviennent le mieux.

3. Plugin jQuery « slideJS »

Curseur d'image avec description textuelle.

4. Plugin « JSliderNews »

5. Curseur CSS3 jQuery

Lorsque vous survolez les flèches de navigation, une vignette circulaire de la diapositive suivante apparaît.

6. Joli curseur jQuery « Cycle de présentation »

Curseur jQuery avec indicateur de chargement d'image. Un changement automatique de diapositive est fourni.

7. Plugin jQuery « Parallax Slider »

Curseur avec un effet de fond volumétrique. Le point fort de ce curseur est le mouvement de l'arrière-plan, qui se compose de plusieurs calques, dont chacun défile à une vitesse différente. Le résultat est une imitation de l'effet volumétrique. C'est très beau, vous pouvez le constater par vous-même. L'effet s'affiche de manière plus fluide dans les navigateurs tels qu'Opera, Google Chrome, IE.

8. Curseur jQuery frais et léger «bxSlider 3.0»

Sur la page de démonstration dans la section « exemples », vous pouvez trouver des liens vers toutes les utilisations possibles de ce plugin.

9. Curseur d'image jQuery, plugin « slideJS »

Un slider jQuery élégant peut certainement décorer votre projet.

10. Plugin de diaporama jQuery « Easy Slides » v1.1

Un plugin jQuery facile à utiliser pour créer des diaporamas.

11. Plugin jQuery Slidey

Plugin jQuery léger dans différentes versions. Un changement automatique de diapositive est fourni.

12. Galerie CSS jQuery avec changement automatique de diapositive

Si le visiteur ne clique pas sur les flèches « Suivant » ou « Retour » dans un certain temps, la galerie commencera à défiler automatiquement.

13. Curseur jQuery «Nivo Slider»

Plugin très professionnel, de haute qualité et léger avec un code valide. Il existe de nombreux effets de transition de diapositives différents.

14. Curseur jQuery « MobilySlider »

Curseur frais. Curseur jQuery avec divers effets de changement d'image.

15. Plugin jQuery « Slider² »

Curseur léger avec changeur de diapositives automatique.

16. Nouveau curseur javascript

Curseur avec changement d'image automatique.

Plugin pour implémenter des diaporamas avec changement automatique de diapositives. Il est possible de contrôler l'affichage à l'aide de vignettes d'images.

Curseur d'image CSS jQuery à l'aide du plugin NivoSlider.

19. Curseur jQuery « jShowOff »

Plugin pour la rotation du contenu. Trois possibilités d'utilisation : sans navigation (avec changement automatique du format diaporama), avec navigation sous forme de boutons, avec navigation sous forme de vignettes d'images.

20. Plugin « Portefeuille d'effets d'obturation »

Nouveau plugin jQuery pour concevoir le portfolio d'un photographe. La galerie a un effet intéressant de changement d’images. Les photos se succèdent avec un effet similaire au fonctionnement d’un obturateur d’objectif.

21. Curseur CSS javascript léger « TinySlider 2 »

Implémentation d'un slider d'image en utilisant javascript et CSS.

22. Super curseur « Tinycircleslider »

Curseur rond élégant. La transition entre les images s'effectue en faisant glisser le curseur en forme de cercle rouge sur la circonférence. Il s’intégrera parfaitement à votre site Web si vous utilisez des éléments ronds dans votre conception.

23. Curseur d'image avec jQuery

Curseur léger « Slider Kit ». Le curseur est disponible en différents modèles : vertical et horizontal. Différents types de navigation entre les images sont également mis en œuvre : à l'aide des boutons « Suivant » et « Précédent », à l'aide de la molette de la souris, à l'aide du clic de souris sur la diapositive.

24. Galerie de miniatures « Slider Kit »

Galerie "Kit Slider". Le défilement des vignettes s'effectue aussi bien verticalement qu'horizontalement. La transition entre les images s'effectue à l'aide : de la molette de la souris, d'un clic de souris ou du passage du curseur sur la vignette.

25. Curseur de contenu jQuery « Slider Kit »

Curseur de contenu vertical et horizontal utilisant jQuery.

26. Diaporama jQuery « Slider Kit »

Diaporama avec changement automatique des diapositives.

27. Curseur CSS3 javascript professionnel léger

Un curseur jQuery et CSS3 soigné créé en 2011.

Diaporama jQuery avec vignettes.

29. Diaporama jQuery simple

Diaporama avec boutons de navigation.

30. Superbe diaporama jQuery « Skitter »

Plugin jQuery Skitter pour créer de superbes diaporamas. Le plugin prend en charge 22 (!) types d'effets d'animation différents lors du changement d'images. Peut fonctionner avec deux options de navigation dans les diapositives : utiliser les numéros de diapositive et utiliser les vignettes. Assurez-vous de regarder la démo, une trouvaille de très haute qualité. Technologies utilisées : CSS, HTML, jQuery, PHP.

31. Diaporama « Gênant »

Diaporama fonctionnel. Les diapositives peuvent être : des images simples, des images avec des légendes, des images avec des info-bulles, des vidéos. Vous pouvez utiliser les flèches, les liens numériques de diapositive et les touches gauche/droite de votre clavier pour naviguer. Le diaporama se décline en plusieurs versions : avec et sans vignettes. Pour voir toutes les options, suivez les liens Démo #1 - Démo #6 situés en haut de la page de démonstration.

Un design très original pour le slider d'image, qui rappelle un éventail. Transition de diapositive animée. La navigation entre les images s'effectue à l'aide de flèches. Il existe également un changement de vitesse automatique qui peut être activé et désactivé à l'aide du bouton Lecture/Pause situé sur le dessus.

Curseur jQuery animé. Les images d'arrière-plan sont automatiquement mises à l'échelle lorsque la fenêtre du navigateur est redimensionnée. Pour chaque image, un bloc avec une description apparaît.

34. Curseur « Flux Slider » utilisant jQuery et CSS3

Nouveau curseur jQuery. Plusieurs effets animés sympas lors du changement de diapositives.

35. Plugin jQuery « jSwitch »

Galerie jQuery animée.

Un diaporama jQuery simple avec changement automatique des diapositives.

37. Nouvelle version du plugin « SlideDeck 1.2.2 »

Curseur de contenu professionnel. Il existe des options avec changement automatique de diapositive, ainsi qu'une option utilisant la molette de la souris pour se déplacer entre les diapositives.

38. Curseur jQuery « Curseur Sudo »

Curseur d'image léger utilisant jQuery. Il existe de nombreuses options de mise en œuvre : changement d'images horizontal et vertical, avec et sans liens vers le numéro de diapositive, avec et sans légendes d'image, divers effets de changement d'image. Il existe une fonction de changement automatique de diapositive. Des liens vers tous les exemples de mise en œuvre peuvent être trouvés sur la page de démonstration.

39. Diaporama jQuery CSS3

Le diaporama avec vignettes prend en charge le mode de changement automatique des diapositives.

40. Curseur jQuery « Curseur de flux »

Curseur avec de nombreux effets de changement d'image.

41. Curseur jQuery simple

Curseur d'image élégant utilisant jQuery.

Un curseur sans JavaScript avec un effet de retournement de diapositive sympa. S'adapte parfaitement à n'importe quel appareil. Sources disponibles.

Fonctionnalité : curseur CSS

Un curseur CSS pur est un curseur prêt à l'emploi avec changement automatique de diapositive sans l'aide de scripts JS. En règle générale, ce type de curseurs est apprécié par les développeurs débutants ou dans les cas où il n'est pas possible/nécessaire d'inclure des bibliothèques.

Bien sûr, il est plus facile d'utiliser des plugins spéciaux pour créer des sliders (il y en a beaucoup, par exemple jQuery). Mais ce slider séduit par son effet inhabituel de feuilletage des slides. De plus, avec une productivité élevée.

Comment utiliser cet exemple sur votre site Web

À partir du lien ci-dessus, vous pouvez télécharger l'archive dans laquelle se trouvera le fichier slider-css.html. En théorie, tout ce dont vous avez besoin pour exécuter un slider CSS sur votre site se trouve dans ce fichier. Voici votre algorithme d'actions :

1. Copiez tous les styles du bloc slider, ils sont dans la balise

Veuillez noter que containers.untitled a des propriétés position: absolue et vous devrez peut-être l'adapter un peu par vous-même.

2. Toutes les diapositives sont enveloppées

< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div >

3. Il n’est pas difficile de comprendre le code HTML de la diapositive elle-même.

< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >Londres< / span > < span >Scout< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Profil Unsplash< / a >

Collection de gratuit Curseur HTML et CSS exemples de code : carte, comparaison, plein écran, réactif, simple, etc. Mise à jour de la collection juin 2018. 7 nouveaux articles.

Table des matières

Articles Liés

🔥 Tous les nouveaux sliders CSS dans cette vidéo (2019)

À propos du code

Un ensemble d'écrans d'intégration en HTML/CSS/JS. Une expérience personnelle avec la superposition d'icônes PNG, de transitions CSS3 et de flexbox.

Curseur de carte d'information HTML, CSS et JavaScript.
Réalisé par Andy Tran
23 novembre 2015

Curseur de photos fonctionnant sur les navigateurs de bureau et mobiles.
Réalisé par Taron
29 septembre 2014

Curseurs de comparaison (avant/après)

À propos du code

Un curseur de comparaison d'images simple et propre, entièrement réactif et prêt au toucher avec CSS et jQuery.

À propos du code

Un curseur avant et après avec uniquement du HTML et du CSS.

À propos du code

Jouer avec une nouvelle idée en utilisant mon curseur d'image à deux calques avant/après. Le garder minimal. En gardant la vanille. Aimez-le si c'est utile :)

Vanilla JS, minimal, agréable à regarder.
Fabriqué par Huw
3 juillet 2017

À propos du code

Un élément de curseur « écran partagé » avec JavaScript.

Une petite expérience pour un curseur avant et après le tout dans un SVG. Le masquage rend les choses assez simples. Comme tout est SVG, les images et les légendes s’adaptent parfaitement. Les plugins Draggable et ThrowProps de GreenSock ont ​​été utilisés pour le contrôle du curseur.
Réalisé par Craig Roblewsky
17 avril 2017

Utilise une entrée de plage personnalisée pour le curseur.
Fabriqué par Dudley Storey
14 octobre 2016

Curseur de comparaison d'images réactif avec HTML, CSS et JavaScript.
Réalisé par Ege Görgülü
3 août 2016

Curseur de comparaison avant-après des vidéos HTML5, CSS3 et JavaScript.
Fabriqué par Dudley Storey
24 avril 2016

Un curseur déplaçable pratique pour comparer rapidement 2 images, optimisé par CSS3 et jQuery.
Réalisé par CodyHouse
15 septembre 2014

Curseurs plein écran

À propos du code

Curseur simple basé sur les entrées radio. 100% pur HTML + CSS. Fonctionne également avec les touches fléchées.

Réactif : oui

Dépendances : -

À propos du code

Bel effet de transition pour le curseur plein écran.

À propos du code

Curseur coulissant de parallaxe horizontale avec Swiper.js.

À propos du code

Curseur de perspective 3D fluide et réactif lors du déplacement de la souris.

Curseur d'image de héros en plein écran (thème des panneaux de balayage) avec HTML, CSS et JavaScript.
Réalisé par Tobias Bogliolo
25 juin 2017

Un élément d'interaction avec un curseur utilisant les effets Velocity et Velocity (UI Pack) pour améliorer l'animation. L'animation est déclenchée via les touches fléchées, un clic de navigation ou une prise de défilement. Cette version inclut des bordures dans le cadre de l'interaction.
Réalisé par Stephen Scaff
11 mai 2017

Curseur simple dans un style minimal pour afficher les images. Une partie de l'image apparaît sur chaque diapositive.
Réalisé par Nathan Taylor
22 janvier 2017

La chose est assez facilement personnalisable. Vous pouvez modifier en toute sécurité la police, la taille de la police, la couleur de la police et la vitesse d'animation. La première lettre d'une nouvelle chaîne dans un tableau en JS apparaîtra sur une nouvelle diapositive. Il est facile de créer (ou de supprimer) une nouvelle diapositive : 1. Ajoutez une nouvelle ville dans le tableau en JS. 2. Modifiez la variable du nombre de diapositives et placez une nouvelle image dans la liste scss en CSS.
Réalisé par Ruslan Pivovarov
8 octobre 2016

1. Chemin de détourage pour la bordure du rectangle de masquage d'image (webkit uniquement).
2. Mode de fusion pour ce masque.
3. Système de couleurs intelligent, mettez simplement le nom et la valeur de votre couleur dans la carte Sass, puis ajoutez la classe appropriée avec ce nom de couleur aux éléments et tout fonctionnera !
4. Menu latéral sympa des crédits (cliquez sur le petit bouton au centre de la démo).
5. Vanilla js avec juste< 200 lines of code (basically it’s just adds/removes classes).

Réalisé par Nikolaï Talanov
7 octobre 2016

Ce curseur asymétrique avec défilement basé sur du JS et CSS purs (sans bibliothèques).
Réalisé par Victor Belozyorov
3 septembre 2016

Une animation de curseur avec un design Pokémon.
Réalisé par Pham Mikun
18 août 2016

Curseur HTML, CSS et JavaScritp avec animation complexe et texte incliné en demi-couleur.
Réalisé par Ruslan Pivovarov
13 juillet 2016

Effet de parallaxe du curseur avec HTML, CSS et JavaScript.
Réalisé par Manuel Madeira
28 juin 2016

Curseur HTML, CSS et JavaScript avec effet d'entraînement.
Réalisé par Pedro Castro
21 mai 2016

Curseur révélant Clip-Path avec HTML, CSS et JavaScript.
Réalisé par Nikolaï Talanov
16 mai 2016

Curseur GSAP + Slick avec aperçu des diapositives précédentes/suivantes.
Réalisé par Karlo Videk
27 avril 2016

Curseur pleine page HTML, CSS et JavaScript.
Réalisé par Joseph Martucci
28 février 2016

Prototype de slider complet avec HTML, CSS et JavaScript.
Fabriqué par Gluber Sampaio
6 janvier 2016

Un diaporama plein écran, en quelque sorte réactif, animé avec Greensocks TweenLite/Tweenmax.
Fabriqué par Arden
12 décembre 2015

Fabriqué par Arden
5 décembre 2015

Curseur plein écran (GSAP Timeline) #1 avec HTML, CSS et JavaScript.
Réalisé par Diaco M.Lotfollahi
23 novembre 2015

Curseur HTML et CSS avec effets personnalisés.
Réalisé par Nikolaï Talanov
12 novembre 2015

Glisseur plein écran avec parallaxe avec HTML, CSS et JavaScript.
Réalisé par Nikolaï Talanov
12 novembre 2015

Curseur rotatif de preuve de concept. Utilise un chemin de clip et beaucoup de mathématiques.
Réalisé par Tyler Johnson
16 avril 2015

Un simple curseur CSS et jQuery plein écran utilisant la fluidité de TranslateX et Translate3D !
Réalisé par Joseph
19 août 2014

Curseurs réactifs

À propos du code

Curseur d’opacité des images

Curseur d'opacité des images en HTML et CSS.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Disposition des diapositives flexibles empilées

Cet exemple illustre comment créer une disposition de diapositives empilées les unes sur les autres (particulièrement utile pour les transitions de fondu entrant/sortant). Ceci est réalisé sans régler leur hauteur et en évitant la position : absolue ; ils sont donc entièrement flexibles et faciles à maintenir dans le flux normal des pages.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Curseur réactif

Curseur réactif animé en HTML, CSS et JavaScript.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : animer.css

À propos du code

Curseur avec texte masqué

Curseur CSS uniquement avec texte masqué.

Navigateurs compatibles : Chrome, Edge (partiel), Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Image et contenu avec effet de parallaxe.

À propos du code

Galerie de diapositives CSS uniquement.

Navigateurs compatibles : Chrome, Edge, Firefox, Opera, Safari

Réactif : oui

Dépendances : -

À propos du code

Curseur HTML/CSS pur

Curseur HTML/CSS pur avec barre de progression SVG circulaire.

Navigateurs compatibles : Chrome, Edge (partiel), Firefox (partiel), Opera, Safari

Réactif : oui

Dépendances : font-awesome.css

À propos du code

Une expérience pour créer un curseur vertical entièrement réactif avec des vignettes en utilisant uniquement CSS et en conservant le rapport hauteur/largeur des images.

À propos du code

Un simple curseur/carrousel d'image Flexbox réalisé avec du JavaScript vanille.

À propos du code

Il s'agit d'une expérience qui simule un effet de flou de mouvement à chaque changement de diapositive. Il tire parti du filtre Flou gaussien SVG et de certaines animations d'images clés CSS. Bien que l'effet ne nécessite aucun Javascript pour fonctionner correctement, dans cet exemple, Javascript n'est utilisé que pour la fonctionnalité du curseur.

À propos du code

Cool anime le curseur avec JS.

À propos du code

Il s'agit d'une expérience sur la façon dont les modèles SVG peuvent nous aider à créer des images de type masqué pour un curseur d'image CSS uniquement.

Explorer quelques transitions de curseur. Curseur Swiper avec option de parallaxe activée. Jouer avec les filtres CSS principalement ici.
Réalisé par Mirko Zorić
12 juin 2017

Curseur GSAP simple avec quelques animations subtiles.
Réalisé par Goran Vrban
9 juin 2017

Interface utilisateur du curseur avec HTML, CSS et JavaScript.
Réalisé par Mergim Ujkani
6 juin 2017

Curseur GSAP version 2.
Réalisé par Em An
4 mai 2017

Un petit curseur de transition tranché utilisant un simple accord d'ajout de classe. Il faut lisser un peu les timings et décider de la meilleure approche pour mobile (il suffit d'empiler, d'ajouter des événements tactiles, de créer une fenêtre d'affichage complète des images, etc. Prend en charge la molette de défilement (scroll jacking), les boutons de navigation et les touches fléchées. Peut également augmenter le wrapper de contenu pour que les images remplissent la fenêtre dans leur état non animé, ce qui est plutôt cool aussi.
Réalisé par Stephen Scaff
3 janvier 2017

Utilisation de la bordure-image et du chemin de clip CSS pour créer un effet d'animation de curseur.
Réalisé par Emily Hayman
31 décembre 2016

Petit slider construit avec flexbox. Un peu réactif et peut avoir des éléments fixes à côté de la zone du curseur.
Réalisé par Robert
28 novembre 2016

Curseur de canevas HTML, CSS.
Réalisé par Nvagelis
29 octobre 2016

Curseur fluide 3D HTML, CSS et JavaScript.
Réalisé par Eduardo Allegrini
19 octobre 2016

Slider de cupcake HTML et CSS avec des pépites !
Réalisé par Jamie Coulter
14 octobre 2016

Réalisé par Mario's Maselli
12 octobre 2016

Explorer l'animation de l'interface utilisateur n°2 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
22 septembre 2016

Explorer l'animation de l'interface utilisateur n°3 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
22 septembre 2016

Ecommerce Slider v2.0 avec HTML, CSS et JavaScript.
Réalisé par Pedro Castro
17 septembre 2016

Curseur HTML, CSS et JavaScript propre avec un arrière-plan incurvé.
Réalisé par Ruslan Pivovarov
13 septembre 2016

Explorer l'animation de l'interface utilisateur n°1 avec HTML, CSS et JavaScript.
Réalisé par Mario's Maselli
8 septembre 2016

Profitez de la puissance du CSS : haut et bas de chaque image du milieu et curseur paginé avec lightbox.
Réalisé par Kseso
15 août 2016

La double exposition est une technique photographique qui combine 2 images différentes en une seule.
Réalisé par Misaki Nakano
3 août 2016

Curseur utilisant le clip de propriété CSS3.
Réalisé par Pedro Castro
1er mai 2016

Curseur CSS réactif.
Réalisé par geekwen
19 avril 2016

Il s'agit d'une simple expérience de curseur affichant des mots avec de belles significations qui ne peuvent pas être directement traduits. Focus : typographie élégante et transitions simples mais séduisantes.
Réalisé par Joe Harry
5 avril 2016

L'idée de l'animation est de changer la valeur du chemin du clip CSS, créant ainsi un effet de masquage.
Réalisé par Bhakti Al Akbar
31 mars 2016

Curseur de points avec HTML, CSS et JavaScript.
Réalisé par Derek Nguyen
16 mars 2016

Curseur d'effet prisme avec HTML, CSS et JavaScript.
Fabriqué par Victor
12 mars 2016

Galerie d'arrière-plans coulissants avec HTML, CSS et JavaScript.
Réalisé par Ron Gierlach
30 novembre 2015

Solution de curseur HTML, CSS et JavaScript.
Réalisé par Jürgen Genser
30 septembre 2015

Un curseur de produit alimenté par Sequence.js. Sequence.js - Le framework d'animation CSS réactif pour créer des curseurs, des présentations, des bannières et d'autres applications uniques par étapes.
Réalisé par Ian Lunn
15 septembre 2015

Curseur personnalisé en petit cercle.
Réalisé par Bram de Haan
11 août 2015

Curseur GTA V réactif avec HTML, CSS et JavaScript.
Réalisé par Eduard Mayer
24 janvier 2014

C'est comme un curseur mais il tourne de manière cubique pour des raisons inconnues.
Réalisé par Eric Brewer
4 décembre 2013

Réalisé par Hugo DarbyBrown
28 août 2013

Curseurs simples

Curseur de superposition d'images avec HTML, CSS et JavaScript Vanilla.
Fabriqué par Yugam
7 juin 2017

Curseur d'image en vedette HTML et CSS.
Réalisé par Joshua Hibbert
16 juin 2016

Curseur d'image multi-axes

Curseur d'image multi-axes avec HTML, CSS et JavaScript.
Fabriqué par Burak Can
22 juillet 2013

Cube slider, une petite expérience avec les transformations 3D HTML5/CSS3.
Réalisé par Ilya K.
26 juin 2013

Dans ce tutoriel, nous allons créer un superbe curseur CSS3. Il utilisera un effet de fondu entre les diapositives. De plus, vous pouvez utiliser une description pour chaque image. Une liste non ordonnée sera utilisée pour organiser les informations. Les diapositives basculeront automatiquement à l'aide des animations CSS3.

Balisage HTML

Le balisage HTML est très simple. L'exemple comporte quatre diapositives. Chacun se compose d'une image (en arrière-plan) et d'un texte de description dans un élément div. Il est très simple d'insérer des diapositives supplémentaires.

CSS

Le slider utilise les animations CSS3 anim_slides et anim_titles . Le premier est utilisé pour les diapositives individuelles, le second pour le texte de description. La position et la transparence changent également pour la description.

/* Curseur */ .slides ( hauteur:300px; marge:50px auto; débordement:caché; position:relative; largeur:900px; ) .slides ul ( list-style:aucun; position:relative; ) /* Images d'animation # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacité:0; ) 6% ( opacité:1; ) 24% ( opacité:1; ) 30% ( opacité:0; ) 100% ( opacité:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacité:0; ) 6% ( opacité:1; ) 24% ( opacité:1; ) 30% ( opacité:0; ) 100% ( opacité:0; ) ) . slides ul li ( opacité :0 ; position :absolue ; top :0 ; /* animation css3 */ -webkit-animation-name : anim_slides ; -webkit-animation-duration : 24.0s ; -webkit-animation-timing-function : linéaire ; -webkit-animation-iteration-count : infini ; -webkit-animation-direction : normal ; -webkit-animation-delay : 0 ; -webkit-animation-play-state : en cours d'exécution ; -webkit-animation-fill-mode : forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linéaire; -moz-animation-iteration-count: infini; -moz-animation-direction : normal ; -moz-animation-délai : 0 ; -moz-animation-play-state : en cours d'exécution ; -moz-animation-fill-mode : avance ; ) /* délais css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay : 6.0s ; -moz-animation-delay : 6.0 s; ) .slides sur li:nth-child(3), .slides sur li:nth-child(3) div ( -webkit-animation-delay : 12,0 s ; -moz-animation-delay : 12,0 s ; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay : 18.0s ; -moz-animation-delay : 18.0s; ) .slides ul li img ( display:block; ) /* Images d'animation #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( gauche:100%; opacité:0; ) 5% ( gauche:10%; opacité:1; ) 20% ( gauche:10%; opacité:1; ) 25% ( gauche:100%; opacité:0; ) 100% ( gauche:100%; opacité:0; ) ) @-moz-keyframes anim_titles ( 0% ( gauche:100 %; opacité:0; ) 5% ( gauche:10%; opacité:1; ) 20% ( gauche:10%; opacité:1; ) 25% ( gauche:100%; opacité:0; ) 100% ( gauche :100%; opacité:0; ) ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; taille de police : 26 px ; gauche : 10 % ; marge : 0 automatique ; remplissage : 20 px ; position : absolue ; haut : 50 % ; largeur : 200 px ; /* Animation CSS3 */ -webkit-animation-name : anim_titles; -durée-animation-webkit : 24,0 s ; -webkit-animation-timing-function : linéaire ; -webkit-animation-iteration-count : infini ; -webkit-animation-direction : normal ; -webkit-animation-délai : 0 ; -webkit-animation-play-state : en cours d'exécution ; -webkit-animation-fill-mode : avant ; -moz-animation-name : anim_titles ; -moz-animation-durée : 24. 0 ; -moz-animation-timing-function : linéaire ; -moz-animation-iteration-count : infini ; -moz-animation-direction : normal ; -moz-animation-délai : 0 ; -moz-animation-play-state : en cours d'exécution ; -moz-animation-fill-mode : avance ; )