Javascript & Webdesign » Fading

Moodular — Fabrique de Carousel avec jQuery

Bruno Bichet — Sun, 08 Apr 2012 12:55:37 +0000

Moodular — Ce plugin jQuery créé par @GouZ permet de créer des carousels (aussi appelés : diaporama ou slider) très facilement. Le nom du script est la contraction de mood (humeur, ambiance) et de modular (modulaire) : tout un programme ! Moodular est composé de nombreuses options que vous pouvez activer depuis la page du site via un formulaire. Il est également possible de créer vos propres effets.

Le code

Le carousel de base peut être une simple simple non-ordonnée :

Accompagné d’un peu de CSS :

#demo, #demo li { margin:0; padding:0; width:900px; height:495px; list-style:none; }
#demo { overflow: hidden; }
#demo li { float:left; }

L’appel jQuery :

jQuery('#demo').moodular({
    effects: 'left',
    controls: '',
    auto: true,
    easing: '',
    speed: 1000,
    dispTimeout: 3000
});

Paramètres supplémentaires

Moodular ne s’arrête pas là et propose des options telles que :

Mouvement du carousel vers le bas, le haut ou la droite (en plus de la gauche),
Effet de Fading pour les transitions,
Affichage d’une légende,
Flèches de navigation Suivant – Précédent (mais aussi Bas – Haut),
Index (liste de nombre) pour naviguer dans les slides,
Affichage des miniatures de chaque slide sous l’image principale.

→ Moodular est disponible sur Github.

Du même auteur : voir DyLay — Tri et maquette dynamiques avec jQuery

ResponsiveSlides.js — Slideshow responsive poids-plume

Bruno Bichet — Wed, 15 Feb 2012 14:10:24 +0000

ResponsiveSlides.js est un tout petit plugin jQuery permettant de créer des Slideshows qui s’adaptent à la taille de l’écran de l’utilisateur, dans un grand nombre de navigateurs (y compris IE6 !). Seules contraintes : nécessite jQuery et une même taille d’images pour chaque Slideshow. Son point fort ? Une taille de moins de 800 bytes pour un défilement automatique avec fading ou au clic via la pagination. Via Megaptery.

Effets « lightbox » CSS & Javascript sans framework

Bruno Bichet — Wed, 03 Mar 2010 10:06:12 +0000

Effets lightbox sans framework — L’ouverture de nouvelles fenêtres popup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS et comportant, une fois n’est pas coutume, du Javascript intrusif pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

Slick Page Transition — Effet de transition (fading) entre les pages d’un site

Bruno Bichet — Sat, 27 Feb 2010 01:00:04 +0000

Slick Page Transition est un script jQuery (à placer dans votre fichier Javascript global.js ou fonctions.js, etc.) qui produit un effet de fading lorsqu’on passe d’une page à une autre. L’effet peut s’appliquer sur tout ou partie des liens il suffit de spécifier le sélecteur approprié. Il est conseillé de préciser la couleur de votre balise html pour qu’elle s’harmonise avec l’effet de transition. Voir la démonstration.

Ce qui est drôle, c’est que j’avais déjà vu cet effet dans les années 2000 : il était produit avec le logiciel FrontPage de Microsoft… Avec jQuery, ça claque quand même un peu mieux, non ? ;)

Via Rémi Garcia.