Comment rendre flou le contenu dynamique derrière une div ?

Question

Je travaille sur un projet avec une page google maps en plein écran. Est-ce qu'il y a un moyen (css, jQuery, ou d'autres options...) de superposer un en-tête et une barre latérale coulissante avec un effet de flou similaire à l'effet givré/flou d'iOS ?

J'essaie de réaliser quelque chose comme ceci. Exemple d'en-tête flou

Mon problème est que, comme je ne contrôle pas ce qui se trouve sous l'en-tête et qu'il change constamment, je ne peux pas utiliser l'astuce des deux images pour simuler un arrière-plan flou. Des suggestions ?

Answer 1

Lire cet article https://stackoverflow.com/a/19688466/1663572 et lien connexe http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

La solution passe par ces étapes.

1. Rendre le HTML
2. Dupliquer la zone de contenu et la convertir en toile.
3. Déplacer le canevas dans la partie de l'en-tête
4. Synchroniser le défilement du contenu avec le canevas de l'en-tête

En bas de la page se trouve un exemple (le plus étroit). Il manque une image ou autre chose et c'est un peu débordé, mais essayez de faire défiler la page. Mais je ne suis pas sûr de la fréquence des changements du contenu que vous avez mentionné. Cela pourrait causer de sérieux problèmes de performance. Mais essayez.

Je ne vois pas d'autre solution pour obtenir le résultat très complexe que vous souhaitez.

Answer 2

Si vous chargez une image externe, pourriez-vous la charger dans un fichier svg comme arrière-plan et appliquer un feGaussianBlur filtre ? Je ne sais pas si vous avez beaucoup de contrôle sur le balisage.

Une introduction aux écoles w3 sur le flou :

http://www.w3schools.com/svg/svg_fegaussianblur.asp

Un jsfiddle ( pas le mien ) :

https://jsfiddle.net/jamygolden/yUG5U/2/

Exemple de balisage :

<svg id="svg-image-blur">
    <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS :

#svg-image-blur { height: 200px; width: 300px; }
#svg-image:hover { filter:url(#blur-effect-1); }

Answer 3

Le flou css fonctionnerait-il ?

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);