25 ressources jQuery et CSS3 pour vos sites web

Pour que votre futurs projets web soit encore plus beaux, plus agréables et plus utilisables, je vous propose de découvrir 25 plug-ins et tutoriels utilisant jQuery et CSS3.

Certains sites de référence comme Codrops méritaient des articles quasi hebdomadaires, tant la qualité des ressources proposées y est impressionnante. Pour garder que le meilleur de cet amas de ressources disponibles sur le web, j’ai sélectionnés pour vous quelques outils utiles pour posséder les ingrédients d’un site moderne.

Commençons par des effets de chargement, suivi d’effets de pages, des effets de survol, quelques sliders et gestionnaires d’images. Pour terminer, je vous propose de découvrir quelques ressources bonus qui méritent d’être testées.

Avant de vous lancer corps et âme dans l’implémentation d’une ressource, n’oubliez pas d’en vérifier le bon fonctionnement dans les navigateurs plus anciens. En attendant : découvrez, testez et inspirez-vous !

Effets de chargement

Une collection d’introduction d’articles

Cette impressionnante collection d’introductions sublimera l’expérience utilisateur sur vos sites a fort contenus. Propres, nets et efficaces.

ressources-jquery-1

Une collection de chargements de pages

Encore une idée de Codrops, oui, mais cette collection de chargements donne simplement de superbes idées.

ressources-jquery

jQuery Loading Animation

Un loader jQuery très simple à implémenter et à styliser (2 divs et le tour est joué !)

ressources-jquery

CSS3 Spin Loader

Un élégant petit spinner animé en CSS3.

ressources-jquery

Pace – Barre de progression

Pace est une librairie de barre de progressions proposant des dizaines de thèmes variés pour s’adapter facilement à votre site.

ressources-jquery

Effets de pages

Vide – Vidéo plein écran

Un plug-in jQuery ultra simple pour adapter une vidéo à l’écran du navigateur.

ressources-jquery

jQuery multiScroll

Comme son nom l’indique, il s’agit d’un plug-in pour créer des pages avec du scroll multiple. Très utile pour créer un effet style double scroll par exemple.

ressources-jquery

jQuery PagePiling

Un sympathique effet d’empilement de pages lors du scroll.

ressources-jquery

Animsition jQuery

Un plug-in avec de très nombreuses possibilités de configurations pour créer simplement et facilement des transitions de pages en CSS.

ressources-jquery

jQuery Smooth State

Ce plug-in vous permet ici aussi d’ajouter des transitions de pages plutôt agréables à utiliser. La navigation devient alors plus rapide, plus fluide et surtout plus adaptée à l’utilisation tactile.

ressources-jquery

Draggable Dual View Slideshow

Un des effets que je trouve personnellement parmi les plus intéressants. Ce slideshow peut-être contrôlé à la fois à la souris mais aussi au clavier. Jusque-là, rien de révolutionnaire, mais cliquez sur « Switch View« . Vous avez-dit magique ?

ressources-jquery

FullScreen Vertical Scroller

Un petit bout de code pour créer des mises en page fullscreen en CSS3, avec un fallback jQuery pour les plus anciens navigateurs notamment.

ressources-jquery

Créer une section plein écran en une seule ligne de CSS ?

Grâce aux unités de Viewport CSS3 comme notamment vw et vh, il est possible de réaliser cet effet grâce à un peu de style.

ressources-jquery

Effets de survol

Effets de survol d’icônes

Une collection très complète d’effets de survols pour vos icônes circulaires. Certains effets sont expérimentaux et réservés aux navigateurs basé sur webkit. Pas toute récente, mais toujours utile !

ressources-jquery

Survol avec effet 3D

Un petit snippet chez The Code Player, vraiment sympa ! À tester.

ressources-jquery

Des simples effets de survols en CSS3

Rien de plus à ajouter, testez par vous même ! Simple mais efficace pour rendre votre site plus interactif.

ressources-jquery

Sliders / Images

Simple jQuery Slider

Comme son nom l’indique, Simple jQuery Slider est un slider basique, très simple à implémenter.

ressources-jquery

Justified.js

Créer une grille de photo paramétrable facilement est désormais possible avec Justified.js.

ressources-jquery

Un slider divisé en boxes

Pour sortir du cadre d’un simple slideshow, cette solution permet de créer un slider divisé en 4 éléments qui scindent l’écran de l’utilisateur de différentes manières.

ressources-jquery

jQuery Shuffle Images

Le célèbre effet de défilement rapide d’images au survol de la souris, adapté à une page contenant une grille de photo.
ressources-jquery

Bonus

Hide Seek

Un plug-in simple mais complet pour créer un moteur de recherche dynamique sur votre site.

ressources-jquery

Clock Picker

Offrez la possibilité à vos utilisateurs, de choisir l’heure dans un formulaire comme si ils utilisaient Android.

ressources-jquery

Simple Morphing Search

Une mise en page de moteur de recherche qui vient se superposer à votre site, tout ça en plein écran. Nul doute que l’on retrouvera se procédé dans quelques sites web à sortir. Affaire à suivre…

ressources-jquery

Un menu animé en rond

Une bonne idée pour rendre l’arrivée du menu plein écran moins triste.

ressources-jquery

Guardian jQuery

Grâce à se plug-in, sublimez l’interface de vos formulaires lorsque vos utilisateurs font des erreurs. Simple mais essentiel !

ressources-jquery

N’hésitez pas à ajoutez vos ressources favorites en commentaire !

13 commentaires

Répondre Animation | Pearltrees Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.