La vague de ressources #11

28 avril 2014

La Vague de ressources #11 vous présente 8 ressources de qualité à découvrir : un plugin jQuery pour réaliser des panoramas, une librairie JS pour animer des éléments au scroll, ou encore une mixin Sass pour des ombres avancées.

Panorama Viever

Si vous êtes passionné par la photo panoramique à 360°, Panorama Viever est fait pour vous ; ce plugin jQuery vous permet de mettre en place des panoramas responsive via l’élément HTML embed, point d’intégration pour du contenu interactif. Le principe est simple : la photo est intégrée sur toute la largeur de son conteneur et navigable via du drag-&-drop, puis, arrivé au bout, la photo boucle sur elle-même de manière transparente. Pratique pour réaliser une visite virtuelle.

panorama_jquery

Simple Stack Effects

Simple Stack Effects est une collection d’effets CSS d’empilement développée par l’équipe de Codrops, destinée principalement pour les galeries d’images : l’idée est de mettre en avant un élément, puis, via un déclencheur (clic, survol), de révéler les différents items présents sous la pile. Une bonne dose d’inspiration à prendre. Notez que certains des effets comme les perspectives et les transformations 3D fonctionnent uniquement dans les navigateurs modernes.

css_stack_effect

Wow.js

Wow.js est une bibliothèque JavaScript permettant d’animer facilement des éléments HTML au scroll de la page. Comparable à l’excellent ScrollReveal.js, le script propose toutefois une personnalisation plus poussée que son compère, notamment grâce à l’utilisation de la feuille de style Animate.css et ses nombreux types d’animation. Les avantages ? Un script plus léger que les autres (Superscrollorama), une installation simple et un code rapide d’exécution.

wow_js

Crumpet

Crumpet est un nouveau framework SASS/SCSS qui se veut simple et léger pour construire rapidement une structure HTML « propre ». Une des particularités du framework est de proposer une alternative à la directive @extend de Sass particulièrement utile qui permet à un sélecteur d’hériter des styles d’un autre. Il s’agit des sélecteurs placeholder (%) qui génèrent un code CSS légèrement plus plus optimisé. L’outil intègre également un système de grille responsive.

crumpet

jInvertScroll

jInvertScroll est un plugin jQuery qui manipule le comportement de défilement par défaut pour forcer un défilement horizontal. La configuration est minimaliste : il suffit d’ajouter une classe CSS spécifique sur chacun des éléments que vous voulez voir défiler. Attention tout de même, ce genre d’effet peut rapidement montrer ses limites côté affichage : par exemple, si la hauteur de l’écran est plus petite que le contenu, ce-dernier sera tronqué. Le script propose également un effet de parallaxe.

jinvertscroll

Trianglify

Trianglify est une bibliothèque JavaScript basée sur D3.js, librairie JS permettant entre autres de manipuler des SVG, qui permet de générer des images graphiques vectorielles au format SVG composées d’éléments triangulaires. Si le choix des couleurs proposées est aléatoire, le service en ligne mis à disposition permet de jouer sur la taille, le flou et l’espacement des motifs. Un petit outil utile pour générer facilement de jolis arrière-plans.

trianglify

Stroll.js

Stroll.js est une bibliothèque JavaScript proposant une collection d’une douzaine d’effets de défilement pour vos listes HTML via des transitions et transformations CSS (2D et 3D) avec un support spécial des interfaces tactiles de iOS et Android. Il vous suffit d’ajouter une classe CSS spécifique à la liste ciblée, et le script s’occupe du reste.

stroll_js

Shade

Shade est une mixin Sass spécialisée dans la génération d’ombres CSS avancées en combinant text-shadow, box-shadow et plusieurs variables (couleur, opacité, angle d’inclinaison, etc). On retrouve principalement deux types d’ombrage : l’ombre dite « classique » (avec variation de la couleur et de la profondeur) et le fameux long shadow aussi bien sur des « boites » que sur du texte. En jouant avec les paramètres, vous obtiendrez des ombres assez originales.

shadow_css_mixin

» Voir toutes les Vagues de ressources

Commentaires

  • Bertruand

    Super comme d’habitude. Merci !