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.
Pour ajouter un bouton « Remonter » ou « Retour en haut de page », il suffit d’ajouter un div transparent en bas de page qui permet de remonter tout simplement en haut de page. Bien entendu on va ajouter des petits effets jQuery histoire de rendre cela un petit peu plus agréable pour les yeux…
Le code jQuery
Il faut commencer par enregistrer tous les évènements de scroll sur la page et ajouter une div avec un lien a qui permette de retourner en haut de page :
$(window).scroll(function() {
if($(window).scrollTop() == 0){
$('#scrollToTop').fadeOut("fast");
} else {
if($('#scrollToTop').length == 0){
$('body').append('<div id="scrollToTop">'+'<a href="#">Retour en haut</a>'+'</div>');
}
$('#scrollToTop').fadeIn("fast");
}
});VintageJS est un plugin jQuery permettant d’ajouter un look vintage à vos images web. Avec le succès des effets Instagram, plusieurs scripts et classes PHP comme Instagraph ont vu le jour.
Son fonctionnement est très simple, comme tout plugin jQuery, il suffit d’initialiser le script sur un sélecteur précis:
$(function () {
$('img.vintage').click(function () {
$(this).vintage({
vignette: {
black: 0.8,
white: 0.2
},
noise: 20,
screen: {
red: 12,
green: 75,
blue: 153,
strength: 0.3
},
desaturate: 0.05
});
});
});De multiples options permettront de changer l’effet à appliquer à l’image. Une version de démo en ligne permet de tester les effets et sauvegarder l’image traitée.
Côté compatibilité navigateur, étant donné que l’on utilise du HTML5 Canvas, on peut dire adieu aux versions d’Internet Explorer 6,7 et 8 :
- Mozilla FireFox 3.16.14
- Google Chrome 9.0.597.107
- Apple Safari 5.0.3
- Opera 11.01
- Internet Explorer 9
Mais si vous voulez générer automatiquement ce genre d’effet sans que vos visiteurs ne puissent choisir eux même le paramétrage, il vaut sans doute mieux passer par du PHP (Instagraph).
Jarallax est un plugin jQuery permettant de créer des effets parallax lors du scroll vertical sur vos sites web, il permet de donner une dynamique de profondeur et d’animation à un site web ou une bannière. Il permet de combiner navigation en scrolling vertical et parallax en un plugin Javascript.
La navigation verticale peut se faire de différentes manières, grâce à des contrôleurs: Déplacement de souris, roulettes de souris, ou flèches directionnelles. Il est possible de développer ses propres contrôleurs.
Côté animation, le script utilise des keyframes et du CSS pour animer le tout et gagner en performance. Le site propose plusieurs tutoriels vidéos pratiques pour mettre en place rapidement le script sur son site. L’API est elle aussi bien documentée, et en regardant le code des démos présentées, vous n’aurez aucun mal à reproduire l’effet sur vos pages web.
(suite…)
Pour s’inscrire sur un service Web, un réseau social, créer un compte sur un site, c’est très facile, il suffit de quelque secondes. Par contre la manipulation inverse est souvent rendu difficile ou opaque, voire impossible sans fouiller très profondément sur les pages d’aide du site qui vont vos expliquer comment procéder.
Account Killer explique comment faire pour se désinscrire des services en ligne les plus répandus : Facebook, Google, Twitter, Yahoo, Groupon…
Les explications fournies sont en anglais avec un lien Delete xxx qui mène directement sur la page pour se désabonner du service choisi ou une courte explication pour savoir comment faire.
Un code couleur permet de savoir si la procédure est simple ou non :
- Blanc : facile de se désinscrire ou de se désabonner via un lien
- Gris : procédure opaque : envoi d’un mail ou d’un formulaire…
- Noir : impossible de supprimer son compte : c’est le cas notamment pour Skype, Evernote, Bitly, Minecraft…
A ce jour, Account Killer référence plus de 450 services.
(suite…)