CSS flou d'arrière-plan sur de défilement
J'ai fixé image d'arrière-plan et sur faites défiler jusqu'je veux l'image pour aller flou. Je ne sais comment faire le flou dans le css mais le faire à la position de défilement.
Voici un exemple:
https://medium.com/good-music/f160ba9e6c52
Des idées, des exemples, des conseils, des extraits de, sera utile.
Grâce
Si vous voulez faire de même en tant que lien donné? Montrer que ce que vous faites jusqu'à présent.
codepen.io/jiserra/stylo/JzKpx
voici un exemple du flou de l'image. demosthenes.info/blog/534/Crossbrowser-Image-Blur
codepen.io/jiserra/stylo/JzKpx
voici un exemple du flou de l'image. demosthenes.info/blog/534/Crossbrowser-Image-Blur
OriginalL'auteur user1328229 | 2013-12-20
Vous devez vous connecter pour publier un commentaire.
Ce codepen fait exactement ce que vous voulez. Avec prise en charge du navigateur à l'esprit, il utilise 2 images, bien qu'au lieu de flou:
http://codepen.io/sota0805/pen/pqLcv
OriginalL'auteur user3223209
Sur votre site web par exemple ( https://medium.com/good-music/f160ba9e6c52) il n'y a pas de css "flou" effet.
Vous pouvez trouver une image normale: https://d262ilb51hltx0.cloudfront.net/max/1440/1*THFG10B56f4TQOebO1Zd_w.jpeg
Et une image floue: https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1*THFG10B56f4TQOebO1Zd_w.jpeg
Après la superposition de ces deux images, vous devez modifier l'opacité de la première, c'est fait!
OriginalL'auteur Damien Romito
J'ai seulement parler de la façon dont vous pouvez obtenir la position avec la vitesse de défilement.
Pour IE,Opera précédente bind ne fonctionne pas, alors vous avez besoin pour
Espère que cela peut aider.
Des acclamations.!
OriginalL'auteur shana
Vous pouvez le flou de l'élément par rapport à la façon dont beaucoup vous avez fait défiler.
Ici, je suis en utilisant
scrollTop()
pour obtenir la quantité de pixels de la fenêtre défile, et puis j'ai mis le flou sur l'élément à ce nombre divisé par 60, qui est juste un nombre arbitraire ai choisi le flou que je voulais.Si vous souhaitez ajouter du flou à un certain point, vous pouvez utiliser un élément du DOM et la vérification de sa position par rapport à la fenêtre.
Si
.element
est à moins de 450px à partir du haut de la fenêtre, la classeblur
seront ajoutés. Votre flou classe ressemblerait à quelque chose comme ceci:Vous voudrez probablement utiliser une transition avec elle. N'oubliez pas le vendeur de préfixes.
OriginalL'auteur Michael Lynch