Ressources jQuery HTML et CSS pour les webdesigners

Blog du Freelance > Les trouvailles du web - Episode 8

Les trouvailles du web - Episode 8

Des ressources graphuites trouvées sur le web

Posté le 27 novembre 2013 | Rangé dans Ressources

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 !

A propos de l'auteur

jacques Danilo, blogueur et freelance

Jacques Danilo
www.pixelcrea.com

Graphiste indépendant depuis 11 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :

Contactez-moi

Sur le blog du freelance

Calendrier des animations e-commerce en 2017
oui

Calendrier e-commerce 2017

L'année 2017 approche à grand pas et il est grand temps de préparer sa stratégie e-commerce. Pour ne rien rater, j'ai préparé une onfographie ...

Prestashop 1.7 : Toutes les nouveautés
oui

Nouveautés Prestashop 1.7

Prestashop, le leader du CMS e-commerce vient (enfin!) de faire une grosse mise à jour, aussi bien sur le fond que sur la forme. Une grosse refonte qui concerne aussi bien la partie ...

10 points à vérifier avant d’acheter un thème Wordpress
oui

acheter un thème Wordpress : 10 points importants

Avant de partir tête baissée sur le thème coup de cœur vu sur une plateforme d’achat (ThemeForest, Elegant Themes, …) sous prétexte que le ...

5 infographies pour comprendre WordPress
oui

5 infographies pour WordPress

WordPress est le CMS le plus utilisé dans le monde, avec près de 25% des sites web dans le monde. Dans tous les domaines, à tout niveau, WordPress est l'outil ...

Vérifiez si votre site est optimisé pour la version mobile
oui

Testez si votre site est mobile-friendly

Un tout nouvel outil SEO pour la compatibilité mobile, le mobile-friendly, vient de sortir sur la plateforme Think With Google. Il s'agit d'une version remasterisée de ...

Partagez cet article sur les réseaux sociaux

Les commentaires

Julien M a commenté :

Et hop, dans les favoris !

Laissez un commentaire








* Champs obligatoires

» Retour au blog du freelance