Ressources jQuery/CSS pour vos sites web

Ressources jQuery

Pour être toujours au top lors de la création d’un webdesign ou pendant le développement, je vous ai préparé une petite sélection de ressources fraîches et utiles à base de jQuery et CSS.

Les métiers de webdesigner et intégrateur (appelé plus souvent développeur front-end) sont aujourd’hui exercés en majorité par deux personnes différentes. En généralisant, on peut dire que cette affirmation est valable aujourd’hui principalement dans le monde des agences. Dans cette configuration, lors de la conception d’un projet, nous sommes souvent amenés à choisir un plug-in, une astuce, une ressources en ligne pour rendre notre site unique et nous faire gagner du temps.

Dans le but de vous aider à trouver les dernières ressources qui font parler d’elles sur le web, je vous propose une petite sélection. Au programme, du responsive, des animations, du fullscreen, bref de quoi réaliser un site dans les tendances actuelles. Inspirez-vous, testez et bien-sûr donnez-moi votre avis !

Sly

Sly est une bibliothèque basée sur jQuery pour créer facilement un effet de défilement. On pourrait, à première vue, le percevoir comme un effet cover flow assez has-been… Pourtant vous pouvez l’utiliser pour créer un défilement de produits par exemple ou encore pour un site en parallaxe.

Sly

Webdesign pleine page avec transitions

Un tutoriel très intéressant pour créer un site pleine page. Idéal pour une bonne UX sur écrans tactiles par exemple.

Ressources jQuery

Flexisel

Un carrousel basique mais responsive s’il vous plait. Simple mais toujours utile !

Flexisel

Astuce pour animer un arrière-plan en CSS

Grâce aux animations CSS, gérez en quelques lignes une légère animation d’un fond d’élément HTML.

Animation background CSS

jQuery Plugins, bibliothèque officielle

Le registre officiel des plugins jQuery, récemment mis à jour. Toujours pas optimal d’après moi, mais tout de même bien amélioré depuis la dernière version. Pratique pour trouver LE plug-in adapté à votre besoin.

Bibliothèque Jquery

Séquence d’ouverture textuelle avec des animations CSS

Les animations CSS permettent de faire des choses vraiment sympathiques. Une preuve en plus avec cette petite séquence de typographies presque cinématographique. Tout est expliqué dans un tutoriel de qualité.

CSS animation

Snap.js

Snap JS permet de faire « bouger » le contenu principal de votre site, pour laisser apparaître un menu vertical à gauche ou à droite. Il suffit de pincer avec vos doigts ou bien de faire un drag avec votre souris.

Snap JS

Responsive Nav

Un plug-in Javascript « indépendant » basé sur aucune librairie, qui vous permet de créer un menu responsive. L’avantage tient dans sa légèreté et sa facilité d’utilisation.

Responsive Nav

Unslider

Un simple slider jQuery responsive.

jQuery Slider

Boutons de partage

La mode est aux boutons de partage en deux clics. Encore un autre exemple en CSS.

Boutons partage

Pile de photo animée avec CSS3

Tout est dans le titre ! Plutôt expérimental pour l’implémenter dans un projet réel, mais le tutoriel est assez détaillé.

Ressources jQuery

CSS Beautifier

Vous allez me dire « encore un outil pour rendre mon CSS plus beau ? » et je vais vous répondre oui ! Mais celui-ci fonctionne vraiment bien, il vous permet de formater correctement votre fichier en un clic et aussi de le ranger par ordre alphabétique par exemple.

CSS Beautifier

Pour conclure, j’espère que vous trouverez votre bonheur parmi toutes ces ressources !

Vous aimerez aussi :

Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

3 commentaires sur Ressources jQuery/CSS pour vos sites web

  1. Damien dit :

    Des choses intéressantes comme Sly ou Snap. Mais je trouve toujours ça gênant de charger des plug-in très vastes de 50kb alors que les 3/4 des fonctions qu’ils offrent restent bien souvent inutilisées.

  2. Spartan dit :

    J’aime beaucoup ce genre d’articles sympas ! Merci

  3. Ping : Jquery et scripts | Pearltrees

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>