Ressources jQuery HTML et CSS pour les webdesigners

Me voilà de retour après un bon mois d'absence pour cause de vacances bien méritées. Alors on reprends un peu avec quelques trouvailles ici et là sur la toile pour vos créations et votre inspiration. Au menu de ce billet de ressources en ligne, on va trouver des arrière-plans de qualité pour iPhone 5 avec effet de parallax sur un site que j'adore, des ressources jQuery avec notamment jQuery ++, un peu de CSS avec les animations de l'arrière plan (background) sur la page ou un élément, ... Un peu de ressources, et du code surtout... A l'exception du site pour personnaliser son iPhone, nous allons découvrir quelques petites astuces pour améliorer la qualité de nos sites. On démarre par quoi alors ? Le graphisme on va le garder pour la fin !

jQuery ++

Vous l'aurez deviné, on est dans le domaine de jQuery. Mais pourquoi ces 2 symboles "++" à la fin alors ? jQuery++ est un rassemblement intélligent des options les plus utiles de différents addo-on ou plugins jQuery. Il regroupe des fonctionnalités avancées, présentes dans jQuery UI et dans jQueryTools. Avec un seul fichier, il regroupe plusieurs belles avancées comme le drag-and-drop par exemple, ainsi que beaucoup d'autres... jQuery ++ fait la même chose que son grand frère, mais il optimise le code et la rapidité d'écriture et d'éxécution du code. Il traite très simplement la gestion des cookies, la récupération de plusieurs propriétés CSS en une seule fonction et possède également un évènement "resize" pour retailler un bloc.  Le projet est encore jeune, puisqu'à l'heure où j'écris ces quelques lignes nous sommes à la version 1.0.1, mais cela semble très prometteur.

Le site officiel de jQuery ++

HoverFlow : plugin d'animations pour jQuery

HoverFlow est un tout petit petit plugin pour jQuery permettant de résoudre un bug connu sur les animations : lorsque l'on ajoute une animation (par exemple avec la fonction .animate();) sur un hover, jQuery crée une pile pour faire X animations en fonction du nombre de fois que l'on passe au dessus de l'évènement. La fonction stop() permet de contrer ce problème mais en rajoute un autre : on ne vois pas l'animation en entier, puisque jQuery arrète l'animation en cours pour appliquer la nouvelle. HoverFlow PlugIn permet de contrer un peu cette option stop en laissant terminer l'animation initiale, puis en rajoutant la nouvelle sans pour autant créer une pile d'évènements jQuery. Très pratique, et ça pèse que 1Ko dans la version mini.

Le plugin HoverFlow

Mmenu, un menu jQuery pratique pour les mobiles !

Si vous avez un smartphone et que vous utilisez Facebook vous connaissez son menu qui s'ouvre sur le coté, décalant la page sur la droite. Mmenu fait ça, et simplement ! En rajoutant une seule ligne de code, notre menu s'adapte maintenant sur les smartphones sur le coté avec un bouton pour laisser voir notre navigation. Dans les options du plugin jQuery, il est possible de positionner son menu en haut, en bas, à gauche comme à droite, de l'animer avec quelques options, ainsi qu'une personnalisation complète par thèmes.

le plugin Mmenu

CSS : l'animation du background directement en CSS

Pour animer un arrière plan, on utilisait un gif animé, puis le javascript est arrivé mais plantait un peu sur ces techniques d'animations "barbares". Puis est arrivé jQuery et MooTools qui permettent de la faire "assez" facilement. Mais CSS3 nous propose une nouvelle instruction : animation. L'animation se fait directement en CSS, sans ligne de code ! PAr contre attention, cela ne fonctionne pas sur tous les navigateurs

Animation du background en CSS

Des wallpapers pour iPhone 5 avec parallax

On termine cette sélection de ressources avec un site super sympa et riche en contenu : le site propose une multitude de fonds d'écrans pour iPhone 5, et notamment avec l'effet Parallax, nouveauté de iOS 7. Les arrières-plans sont superbes. Moi perso, je me fournis chez eux ;)

Fonds d'écrans pour iPhone 5

Et bien voilà, on a fait le tour je pense ! Des questions ? Bon bah je file !