Archives pour la catégorie Javascript

[JS] Ajouter un loader pendant le chargement de vos pages web

Il arrive parfois que certaines pages d’un site internet prennent un moment pour se charger complètement. Cela s’explique par une grande quantité d’images « lourdes » ou une masse de code à interpréter. Autant de notions qui n’existent pas dans la tête d’un utilisateur lambda qui viendrait visiter votre site.

Le meilleur moyen de l’informer et de ne pas risquer de perdre des visites reste d’utiliser un « loader » (animation au chargement) afin que le visiteur comprenne que le site est bien en train de se charger, et qu’il va s’afficher sous peu.

Voici comment ajouter une image de chargement avec jQuery.

1 – Insérer l’image dans la page de code html

  1. Soit insérant une div et en chargeant l’image en tant que « background » en utilisant le CSS.
  2. Soit en insérant l’image directement, via la balise img

N.B. Je privilégie la méthode n°1.

2 – Ajout du CSS pour afficher le loader dans une div

.loader{
	background: url('images/ajax-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}

Ce code CSS va forcer l’image de chargement à se placer au centre de l’écran. Libre à vous de personnaliser votre écran de chargement. Il est par exemple possible de changer la couleur de fond via la propriété « background-color ».

3 – Ajouter un effet fadeout grâce à jQuery.

Saisir le code après la balise d’ouverture du body :

Veuillez patientez pendant le chargement de la page.

jQuery(window).load(function(){ jQuery(".loader").fadeOut("200"); });

Et pour créer votre loader, vous pouvez le choisir sur ce site.

Source

[jQuery] Galerie photos jQuery responsive avec animations CSS3 : S Gallery

S Gallery est un plugin jQuery permettant de créer une galerie photos dynamique en jQuery, compatible responsive webdesign et composée de multiples transitions CSS3. Une belle ressource pour présenter vos créations / photos avec un style fort sympathique.

L’avantage de ce plugin réside dans les transitions parfaitement dosée qui donne un aspect moderne et dynamique à votre galerie d’images.

Au clic sur une des photos, les autres disparaissent et la photo sélectionnée s’agrandit avec description.
Il vous sera possible de naviguer en mode détail à travers toutes les photos ou même activer le mode plein écran.

Si vous souhaitez revenir sur la liste des images, un nouvel effet CSS3 reconstitue la liste avec style.

Le plugin s’adapte à la taille des navigateurs ce qui le rend intéressant pour une intégration dans un site responsive.

Continuer la lecture

[JS] Unslider : Slider jQuery

Unslider est un slider jQuery. Son point fort est la sobriété. Unslider fait le minimum et le fait bien ! Toutefois, ses 3kb n’empêche pas Unslider de répondre à un cahier des charges rigoureux :

  • Compatibilité avec les navigateurs : le grand jeu avec les derniers navigateurs, mais sait se tenir avec les plus anciens.
  • Support de la navigation au clavier : Utilisation des touches fléchées droite et gauche.
  • Hauteur d’image différente : Toutes les diapos ne sont pas égales et Unslider ajoute une subtile transition entre les slides de hauteur différente.
  • Responsive : Parce que les sites non-responsives se font de plus en plus rares.

Le marquage HTML

Un peu de CSS

.banner{ position: relative; overflow: auto; }
.banner li{ list-style: none; }
.banner ul li{ float: left; }

L’appel de Unslider

$(function(){ $('.banner').unslider(); });

Ajout des liens Suivant et Précédent







	var unslider = $('.banner').unslider();
	$('.unslider-arrow').click(function(){
		var fn = this.className.split(' ')[1];
		// Either do unslider.data('unslider').next() or .prev() depending on the className
		unslider.data('unslider')[fn]();
	});

Ecrans tactiles

Pour finir, si vous désirez ajouter à Unslider les fonctionnalités tactiles pour prendre en compte les écrans touch, il suffit d’inclure le plugin jQuery.event.swipe, et voilà !

Unslider est disponible sur GitHub.

[JS] Tooltipster – Tooltip jQuery moderne et flexible

Tooltipster est un plugin jQuery qui permet de mettre en place des tooltip (infobulles), au hover sur n’importe quel élément HTML. Facile à prendre en main, le script est moderne et flexible avec une interface totalement customisable.

tooltipster

Une infobulle à base de CSS

Le plugin génère des infobulles dont le style est entièrement personnalisable via CSS (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier.

Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, title d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre animation qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez modulable.
Continuer la lecture

[JS] ThreeSixty Slider – Slider d’image à 360°

Que ce soit pour mettre en place un panorama 360° d’un paysage sur votre site, ou un slider 360° pour présenter vos produits sur votre e-commerce, l’utilisation de slider 360° peut apporter une vraie plus value pour vos visiteurs. ThreeSixty Slider, est un plugin jQuery permettant de le faire.

Le fonctionnement est plutôt simple, vous découpez en plusieurs images votre panorama (Plus il y’a d’images, plus le slider est fluide) et l’API du plugin permet de créer vos propres contrôles personnalisés pour naviguer dans le 360. Il y a également une fonction lecture qui permet de faire défiler automatiquement le slider.

D’un point de vue code, vous définissez l’architecture HTML avec le spinner qui permettra d’indiquer les % de chargement à vos visiteurs (à styler en CSS):

0%

    Continuer la lecture

    [JS] AyaSlider – Slider avec des animations in-slides

    AyaSlider est un petit nouveau dans le monde des sliders jQuery fait son entrée. En plus de remplir ses fonctions de slider pour faire défiler les images ou contenu HTML, AyaSlider ajoute une dimension de contenu animé à l’intérieur des slides.

    Ainsi, le plugin jQuery propose 2 niveaux d’options, au niveau global :

    • easeIn : Effet d’animation à l’ouverture du slide
    • easeOut : Effet d’animation à la fermeture du slide
    • delay : Délai en ms entre 2 slides
    • next : Sélecteur jQuery pour passer à la slide suivante
    • previous : Sélecteur jQuery pour aller à la slide précédente
    • list : Conteneur des slides

    Puis pour chaque slide, on peut définir l’animation interne :

    • top : Point de départ de l’animation en vertical
    • left : Point de départ de l’animation en horizontal
    • opacity : Opacité de départ de l’animation
    • duration : Durée de l’animation
    • delay : Délai avant le démarrage de l’animation
    • ease : Effet

    Ainsi, vous pourrez faire apparaître par dessus une image, des contenus HTML designés via du CSS.
    Continuer la lecture

    [JS] Style sur les formulaires

    Si vous devez faire un design au « pixel près », vous serez embêté avec les formulaires.

    Cas 1 – Formulaire par defaut

    Si le graphiste à laissé les styles par défaut, ça devrais vous faciliter le travail, mais… Chaque navigateur à son propre rendu d’affichage et le plus embêtant dans ses styles c’est … (roulement de tambours)… Safari et Chome (moteur de rendu Webkit).

    Le champ de type search possède une appearance de type searchfield et non de type textfield et le champ de type select à lui aussi sont propre rendu.

    Pour écraser ce style par défaut de Webkit, voici une base CSS :

    [type="search"]{ -webkit-appearance: textfield; }
    select{ -webkit-appearance: none; }

    Ainsi, les styles seront comme les autres navigateurs

    Cas 2 – Formulaire personnalisé

    Continuer la lecture

    [JS] jBar – Créer une barre call to action avec jQuery

    jBar est une combinaison d’instructions jQuery permettant de créer des barres call to action qui permettent d’ajouter une zone d’information cachée par défaut (ou pas) avec un ruban incitant l’utilisateur à cliquer dessus pour afficher le contenu de cette dernière.

    jbar-barre-call-to-action-jquery

    Cette pratique est intéressante pour ajouter des infos sans détourner de prime abord l’attention de vos visiteurs de votre contenu principal. On peut par exemple y afficher le lien vers le téléchargement de la ressource, ou encore les dernières actus sur la mise à jour de votre service …
    Continuer la lecture

    [JS] Minimit Gallery – Un plugin jQuery pour créer sliders avancés

    Minimit Gallery est un plugin jQuery permettant de créer de nombreux types de galeries, sliders, carousels ou slideshows d’images.

    Il ne propose qu’une couche de logique permettant de gérer et créer rapidement des sliders de contenu de différents types, ce sera donc à vous de le personnaliser à vos souhaits.

    • Sliders de contenu basiques
    • Slideshows de contenus avec défilement automatique
    • Carousels de contenu
    • Pagination dynamique
    • Menus avancés
    • Etc

    Un bon exemple permet de mieux comprendre le fonctionnement:
    minimit_gallery
    Continuer la lecture

    [JS] floatShare – Boutons de partage sociaux sur vos pages

    Si vous souhaitez donner la possibilité à vos visiteurs de partager vos actus, vos produits, vos photos, vous devrez donc afficher les différents boutons sociaux: Facebook, Twitter, Google+, voire même LinkedIn, Digg … floatShare est un plugin jQuery qui permet d’afficher les boutons de partage sociaux sur le côté de votre site avec possibilité de leur donner un design personnalisé.

    Plutôt que de le faire à la main en allant chercher chaque script à mettre en place, pourquoi ne pas utiliser un plugin jQuery qui le fait bien ?

    J’ai déjà parlé du très bon Sharrre qui permet de mettre en place ces boutons sur vos pages en un rien de temps.

    Voici maintenant floatShare, un script qui vous permettra d’ajouter les boutons sur le côté de votre site en mode float, au scroll de la page, le widget vous suit dynamiquement avec un effet smooth.

    Continuer la lecture