Catégorie : Blog / Trucs et astuces

8 tutoriaux en jQuery pour vos interfaces web

Aujourd’hui j’ai pensé qu’il serait sympa de partager une petite collection de tutoriaux jQuery, qui m’ont bien dépanner sur certains projets. Des tutorieux simple, bien fichus, avec sources et demos à la clef, qui permettent de démarquer vos créations, avec des animations et des mises en page originales.


Le Révélateur de photos

Voici un “slider” ultra simple et particulièrement sympa pour une galerie de photo.  Une animation simple qui, d’un simple clic, révèle progressivement votre image originale.

Des fenêtres coulissantes pour vos vignettes

Votre Portfolio présente, ainsi, de manière originale vos travaux grâce a un effet de porte coulissantes qui révèle les informations de chaque projets. Cela mettra sasn aucun doute en valeur votre site ! N’oubliez pas cependant qu’il existe une multitude de technique similaire plus “à l’ordre du jour” notamment grâce aux effets CSS3 et HTML 5.

Voir le tutorielVoir la demo

Une autre technique de fenêtre coulissante

Ce tutoriel est une alternative très professionnelle pour mettre en valeur ses travaux.

Voir le tutorielVoir la demo

Defilement vertical de votre site tout en douceur :)

Il est souvent recommandé de permettre a vos utilisateurs de remonté rapidement vers l’entête de votre site, alors pourquoi pas le faire de manière élégantes tout en douceur.

Voir le tutoriel et la demo

Un menu déroulant

Encore un tutoriel pour un menu déroulant géré en jQuery, indispensable et super simple a réaliser, on gagne énormément d’espace pour les autres éléments du site.

Voir le tutoriel Voir la demo

Une  navigation verticale avec transition horizontale

Positionner de manière fixe ce menu minimaliste est parfait pour des designs d’interfaces simples et épurées.

Voir le tutoriel – Voir la demo

Des infos-bulles en toute simplicité

Permettre d’ajouter des informations complémentaires grâce a des infos-bulles qui s’affiche au survole d’un bouton ou d’une image c’est souvent très pratique !

Voir le tutoriel (voir exemple 5a.) – Voir la demo

Un slider de contenu

Gagner de l’espace et mettre en valeur certains éléments importants, c’est désormais possible avec ce slider de contenu.  Il permet de proposer plusieurs volets de contenus et une navigation latérale pour faire défiler chaque onglet.

Voir le tutoriel Voir la demo

Répondre

Vous devez être connecté pour ajouter un commentaire.