Créer un spot lumineux avec CSS3 et Javascript

css3-spotlight.jpg

Il y’a quelques mois, j’avais essayé de faire un effet de spot lumineux avec SVG. Pour expérimenter, j’ai voulu réaliser le même effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l’explication, je vous donne le lien pour tester avec un Webkit récent (Safari4 ou Chrome) ou Firefox:

Démo CSS3 Spotlight

Donc, pour réaliser cette démo, j’ai mélangé les ingrédients suivants:

  • des CSS gradients, pour générer le spot;
  • des web fonts, pour avoir une jolie typographie;
  • des CSS transforms, pour incliner le texte;
  • des couleurs RGBA, pour avoir de la transparence;
  • la propriété pointer-events, pour pouvoir cliquer sous le spot
  • et un peu de Javascript, pour rendre ça interactif.

La raison pour laquelle cette démo ne fonctionne qu’avec Webkit, c’est que je n’ai pas trouvé comment réaliser le même dégradé radial avec Firefox. Je sais que Firefox les supporte, mais la syntaxe est différente et ne permet pas de définir la taille du dégradé manuellement.

J’ai dit une connerie, ça marche très bien sous Firefox grâce à Florent Verschelde.

Je pense qu’il doit y avoir encore plein d’autres manières de créer cet effet (avec du <canvas> par exemple). Vous feriez ça comment vous?

Paris Web 2010: appel à orateurs

4005856635_7d6dd8b3d3_o.jpg

La préparation de Paris Web 2010 avance et nous pouvons déjà annoncer que l’événément aura lieu du 14 au 16 octobre 2010. Et comme tous les ans, Paris Web invite les orateurs potentiels à proposer des sujets de conférence. Cette année, le thème principal sera « Améliorer l’expérience utilisateur à travers un design et des contenus appropriés ». Si vous souhaitez partager votre expérience, proposez un sujet de conférence! Pour en savoir davantage sur le format, la date butoir, et tous les détails logistiques, ça se passe sur le site de Paris Web.

Photo CreativeCommons by-nc-nd : Hugues Moreno

Ne ratez pas la conférence Paris Web 2009, du 8 au 10 octobre 2009!

Comme chaque année depuis 2006, a lieu Paris Web, LA conférence qui s’adresse à ceux qui font le Web. Contrairement à d’autres conférences, Paris Web est une conférence réellement utile, où on apprend des choses. On y retrouve bon nombre d’experts pour discuter des sujets qui font le Web: technologies, design, accessibilité, standards, etc. Cette année encore, on retrouvera des têtes francophones connues comme Tristan Nitot, Daniel Glazman ou Amélie Boucher, mais également des orateurs internationaux comme Molly Holzschlag ou Nicole Sullivan. Tous les témoignages sont d’accord, Paris Web est l’une des meilleures conférences sur le sujet. Et pourtant, le tarif est très abordable. Tout ça pour dire qu’il ne faut pas rater cette conférence, donc foncez VOUS INSCRIRE!

Générer des anaglyphes avec javascript et canvas

Il n’y a pas très longtemps, j’ai trouvé des lunettes 3D sur une boîte de Chocapics. Ca m’a rappelé les essais d’images en 3D que je faisais il y a quelques années. La recette est super simple: on prend deux images, une pour l’oeil gauche et l’autre pour l’oeil droit. De l’une, on prend la composante rouge et de l’autre, la composante cyan (bleu+vert). On mélange le tout et… paf! Ca fait un anaglyphe!

Ayant joué récemment avec Javascript et l’élément canvas, je me suis dit que ça pourrait se faire facilement avec ces deux technologies. Après quelques essais, j’ai obtenu un Anaglyph generator qui fonctionne à peu près avec un Firefox, un Safari ou un Opera récent. Concernant Internet Explorer, aucune chance pour le moment: excanvas ne supporte pas encore getImageData ni putImageData.

Pour générer un anaglyphe, il suffit d’indiquer deux URLs d’images et de presser le bouton. Pour simplifier, le resultat est toujours affiché en 640×480 (N’hésitez pas à poster l’URL de votre anaglyphe dans les commentaires!).

Anaglyphe

Ceux que ça intéresse, peuvent jeter un oeil au code. C’est plutôt simple:

  • on charge deux images;
  • on attend qu’elles soient complètement chargées;
  • on crée deux canvas pour y copier les images;
  • on remplace la composante rouge d’un canvas par la composante rouge de l’autre;
  • et on affiche le résultat!

Les pièges à éviter

Même si la technique est simple, il y’a tout de même quelques pièges à contourner.

Le premier est la politique de sécurité du navigateur. Comme pour les requêtes XMLHttpRequest, le navigateur ne permet d’accéder aux pixel que des images du même domaine. Du coup, pour pouvoir afficher une image venant d’ailleurs, il faut passer un proxy.

Voilà à quoi ressemble le proxy:

 <?php if (isset($_GET['url']) && preg_match('/^http/i', $_GET['url'])) {     $url = $_GET['url'];     if (preg_match('/.png$/i', $url)) {         header('Content-type: image/png');     }elseif (preg_match('/.jpg$/i', $url)) {         header('Content-type: image/jpg');     }     readfile($url); } 

Le second, est qu’il faut s’assurer que les images sont bien chargées. En local, ça va forcément très vite et on n’a jamais de problème. Avec des images distantes, ça peut mettre un peu de temps et empêcher le script de fonctionner. Pour résoudre ce problème, deux trucs:

  • utiliser setTimeout pour attendre en boucle que les images soient chargées. La fonction Anaglyph.wait vérifie si les images sont totalement chargée en regardant l’attribut complete. Si ce n’est pas le cas, elle va attendre un peu et s’appeler elle-même à nouveau. Une fois que les deux images sont chargées, elle peut appeler Anaglyph.make qui va générer l’anaglyphe.
  • imbriquer le code qui manipules les canvas dans un try/catch pour éviter que le code ne casse.

Si l’élément canvas vous intéresse, il y’a déjà pas mal de ressources intéressantes sur le sujet:

Plein de choses intéressantes ont déjà été faites avec canvas: de la 3D, de la visualisation de musique, de la retouche d’images, des trucages vidéos, etc. Il y’a sûrement encore plein d’autres choses à faire. De quoi me faire réfléchir toute la nuit encore…