Effet de flou

danwolf7 Messages postés 58 Statut Membre -  
karirovax Messages postés 3584 Statut Membre -
Bonjour,

Je souhaiterais réaliser un scripte pour faire des effets de flous en JavaScript ou jQuery.

Sachant que cet effet de flou n'est au fait qu'un empilement d'images avec décalages, comment faire pour que le script fasse finalement des sortes de captures de l'écran et les additionne les unes sur l'autres ?

Finalement, l'effet voulu est comme celui de la nouvelle interface soundcloud lorsqu'on veut partager un son et personnaliser le player. Toute la page derrière la box est floue et même lorsque l'on scroll.

Je précise que j'aimerais de préférence faire ce scripte à la main et non pas télécharger un plugin déjà tout fait.

Merci d'avance !

EDIT: Je viens de me rendre compte que sur la page Soundcloud, cet effet n'est d'autre qu'une propriété CSS3:
-web-kit-filter: blur(5px);


Mais la question reste toujours ouverte. Comment le faire en JS pour avoir une meilleure compatibilité ?

A voir également:

2 réponses

danwolf7 Messages postés 58 Statut Membre 5
 
Désolé mais je ne comprends pas comment marche ce scripte, je n'arrive pas à l'adapter :S
Et est-ce que ça reste tout de même du JavaScript ? Ou c'est carrément du Java tout court ?
1
prosthetiks Messages postés 1309 Statut Membre 431
 
Hello,

Voici comment je procéderait:
http://jsfiddle.net/Lrwxg/2/
0
karirovax Messages postés 3584 Statut Membre 204
 
Re:

Désolé, oui c'est un script du java, donc je suis infiniment désolé, j'ai trompé un peut et j'ai pas faire attention entre java et javascript.

Sorry
0
danwolf7 Messages postés 58 Statut Membre 5
 
Pas de problème ! C'est déjà très gentil d'avoir voulu m'aider alors merci :)
Sinon, prosthetiks, ton scripte est très intéressant, c'est effectivement en partie ce que je voulais. Mais comment faire pour que JS, au lieu de prendre une image définie, prenne l'ensemble de la fenêtre et le rende flou ?
0
karirovax Messages postés 3584 Statut Membre 204
 
Re:

de rien danwolf7, et merci de me comprendre :)
C'est un très bon script :) prosthetiks, je vote
0
karirovax Messages postés 3584 Statut Membre 204
 
salut

essayez ceci:

float[ ] matrice = {
0.1f, 0.1f, 0.1f,
0.1f, 0.2f, 0.1f,
0.1f, 0.1f, 0.1f
};
BufferedImageOp op = new ConvolveOp(new Kernel(3,3,matrice));
BufferedImage nouvelleImage = op.filter(bufferedImage, null);


source:

https://java.developpez.com/faq/gui?page=Les-images#GRAPHIQUE_IMAGE_flou

bonne chance :)
-1