La Vague du Web #3

10 février 2013

La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette chronique : un pack de 600 icônes PNG, un captcha interactif, ou encore un service en ligne de captures d’écran réalistes. Bref, place à la Vague du Web numéro #3 !

App Folders

App Folders est un plugin jQuery dédié aux smartphones qui imite le comportement des dossiers de l’interface iOS : lorsqu’on clique sur un dossier, les fichiers qui s’y trouvent s’affichent alors dans un volet coulissant. Ici, les « fichiers » sont des éléments HTML (images, textes, vidéos, etc) et les « dossiers » sont liés à des URL. Le script fonctionne sur tous les écrans (responsive) et peut être facilement customisé.

app_folders

Easing

Les fonctions Easing (easeOutElastic, easeInQuint, etc) permettent de préciser la vitesse d’exécution d’une animation pour la rendre plus réaliste. En effet, dans la réalité un objet ne commence pas son mouvement instantanément et à vitesse constante : il subit une accélération et une décélaration. Voici un site qui partage le code de plusieurs fonctions Easing en trois langages : JavaScript (via le plugin jQuery Easing), SASS et CSS3 (courbes de Bézier).

easing

Piecon

Piecon est une petite librairie JavaScript permettant de modifier à la volée le favicon d’une page afin de montrer un graphique de progression (pie chart) ou de modifier son title afin d’afficher un pourcentage de progression. Cela peut être utile dans le cas d’un upload de fichier : l’utilisateur peut continuer à naviguer et jeter un coup d’œil à l’onglet qui indique l’avancement de la mise en ligne.

piecon

Motio

Motio est un plugin jQuery spécialisé dans l’animation de sprites CSS, conçu aussi bien pour faire défiler un décor que pour mettre en mouvement un personnage. Plusieurs options sont configurables : sens de l’animation (vertical ou horizontal), mise en pause, nombre de FPS (images par seconde), vitesse de défilement, etc.

motio

Gemicon

Gemicon est un pack gratuit de plus de 600 icônes au format PNG et disponibles en plusieurs tailles (16×16, 32×32, 64×64). Le pack contient également les images vectorisées au format PSD, donc redimensionnables sans perte de qualité. Le set peut être utilisé aussi bien pour un usage personnel que pour un projet commercial.

gemicon

PlaceIt

PlaceIt est un outil vous permettant de générer en quelques secondes des captures d’écran réalistes via un simple drag-and-drop : il insère l’image dans le support de votre choix (iPad, iPhone, Android, etc) et applique automatiquement les reflets et les inclinaisons pour un rendu réaliste et contextuel de votre capture d’écran. Vous pouvez voir un exemple d’utilisation sur la couverture de la page Facebook Megaptery.

placeit

Flipping Circle Slideshow

Flipping Circle Slideshow est un mini slideshow circulaire développé avec jQuery par l’équipe de Codrops. Il s’agit d’un concept expérimental : l’idée est de retourner la slide dans le cercle (flip) avec un angle spécifique selon l’endroit où vous cliquez. L’effet est plutôt réussi.

flipping_slideshow

Bootsnipp

Bootsnipp est une collection de snippets (HTML/CSS, JS) et éléments graphiques qui viennent compléter le framework Bootstrap développé par Twitter. Vous retrouverez tout un tas d’interfaces externes au framework prêtes à l’utilisation : formulaires, barres de navigation, sliders, graphiques… mais aussi des cas très spécifiques (fenêtre de tweet, interface Gmail, etc). Bref, c’est assez varié. Un petit copier-coller et le tour est joué.

bootsnipp

One% CSS Grid

One% CSS Grid est un framework CSS responsive basé sur un système à 12 colonnes avec deux résolutions de départ (1024px et 1280px). Léger et facile en prendre en main, l’outil est compatible avec tous les terminaux mobiles et propose également une grille pour le logiciel Photoshop.

one_css_grid

PlayThru

Basé sur HTML5, PlayThru est une bonne alternative au célèbre Recaptcha de Google. En effet, ce service remplace le captcha traditionnel par un petit jeu interactif et ludique : une consigne vous décrit les opérations à effectuer (manipulation d’objets via la souris ou le tactile) pour être considérer comme un être humain, par exemple garer des voitures, poser des canettes dans une glacière… etc. Plutôt original ! Compatible avec tous les navigateurs récents.

areyouhuman

jQuery Snipe

Similaire à Zoomy, Snipe est un plugin jQuery qui permet de mettre en place un effet de loupe sur vos images au survolement de la souris. Pour cela, il est nécessaire de fournir deux images au script, l’image normale et l’image zoomée, ce qui donne la possibilité de jouer sur leurs différences (par exemple avec la couleur). Le style CSS de la loupe est totalement personnalisable.

jquery_snipe

Path

Path est un plugin jQuery pour générer des animations multidimensionnelles sur n’importe quel élément HTML selon un arc de cercle ou une courbe de Bézier. Pratique si vous souhaitez animer des éléments avec une grande précision. La compatibilité navigateur est très bonne avec un support IE6+.

» Voir toutes les Vagues du Web

Commentaires

  • JeremyP

    Merci pour ces bons liens! Sinon, dans le même genre que Motio, t’as JSMovieclip : https://github.com/jeremypetrequin/jsMovieclip qui reprend la logique de l’objet Movieclip en AS3 en javascript!

  • Klaitos

    Des plugins intéressants, merci !