Effet verre dépoli iOS7 avec HTML 5 et Javascript

Avec iOS7, Apple a introduit un tout nouveau design pour le système d’exploitation de 6 ans. Parmi tous les changements, celui qui a vraiment attiré l’attention de tout le monde était l’effet d’arrière-plan flou. Fondamentalement, certaines parties de l’interface utilisateur obtiennent un bel effet de verre dépoli. Il existe plusieurs façons d’obtenir cet effet en utilisant HTML et CSS. Le moyen le plus simple est d’utiliser des filtres CSS, cependant les performances sur les téléphones sont loin d’être utilisables. Dans cet esprit, j’ai décidé d’expérimenter avec Canvas et le résultat était assez bon.

Donc, dans cet article, je veux partager un peu l’idée derrière ce prototype.

Flux de travail de base

Ce que nous voulons accomplir ici est un moyen simple de brouiller le contenu une fois qu’il passe sous une partie de l’interface utilisateur. Pour ce prototype, nous utiliserons une barre d’action ou un en-tête. Pour faire cela en HTML, nous devrons utiliser un peu de Javascript. En gros, ce qu’on veut faire c’est :

1. Rendre le HTML
2. Dupliquez la zone de contenu et convertissez-la en canevas.
3. Déplacez le canevas vers la partie en-tête
4. Synchronisez le défilement du contenu avec le canevas dans l’en-tête

Code de base

Voir le stylo eJlfj de Fabio Sasso (@abduzeedo) sur CodePen

Javascript

Pour convertir la zone de contenu de HTML en Canvas, j’ai utilisé une bibliothèque appelée html2canvas (http://html2canvas.hertzen.com/). C’est assez simple à utiliser si vous suivez les étapes de la documentation :

html2canvas(element, { onrendered: function(canvas) { // canvas est l’élément <canvas> rendu final } });<br />

Une fois le canevas rendu, je le déplace ensuite vers l’en-tête. J’ai également ajouté un identifiant pour pouvoir jouer avec en CSS et appliquer l’effet de flou à l’avenir.

html2canvas($(« body »), { onrendered : function(canvas) { $(« .blurheader »).append(canvas); $(« canvas »).attr(« id », »canvas »); } } );<br />

Effet de flou

Pour appliquer le flou, j’ai utilisé une autre bibliothèque pour cela, elle s’appelle Stackblur et il applique le flou gaussien à un élément canvas.

html2canvas($(« body »), { onrendered : function(canvas) { $(« .blurheader »).append(canvas); $(« canvas »).attr(« id », »canvas »); stackBlurCanvasRGB( ‘canvas’, 0, 0, $(« canvas »).width(), $(« canvas »).height(), 20); } });<br />

Conclusion

Le résultat final fonctionne plutôt bien pour un simple prototype iOS7. Je travaille toujours sur la résolution des problèmes de défilement, iOS n’a pas « d’événement de défilement », ce qui complique un peu les choses.

Ci-dessous, vous pouvez voir une démo du prototype. Vous pouvez le forker sur GitHub (https://github.com/abduzeedo/ios7-blur-html5) et améliorez-le 🙂