Effet de flou de mouvement sur le parchemin

J'essaie d'appliquer un effet de flou de mouvement à un div HTML lors du défilement. Pour ce faire, je vais devoir faire un clone de chaque div tous les 1/5 de seconde, et garder sa position fixe sur la page lors du défilement. Je vais aussi avoir besoin de diminuer l'opacité de chaque clone de div toutes les 1/5 seconde, et assurez-vous qu'il n'y a que 5 clones de la div sur la page à la fois (de sorte que je gagne des centaines de clones de la div la page après quelques secondes). Serait-il possible de créer un effet de flou de mouvement en JavaScript en utilisant cette méthode?Effet de flou de mouvement sur le parchemin

<div id = "blurOnScroll"> 
Create the illusion of a motion blur by creating clones of this div every 1/5 of a second, reducing the opacity of each clone every 1/5 of a second, and remove each clone as soon as it has completely faded away. 
</div> 
<script type = "text/javascript"> 
    function motionBlurEffect(){ 
     //create the illusion of a motion blur effect, as described above. 
    } 
</script>

Source

2013-02-21 Anderson Green

Je vais devoir trouver un moyen de garder les éléments de la page dans une position fixe sur la page (pour simuler un effet de flou). Cela pourrait constituer un bon point de départ: http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it –

L'élément étant flou (ainsi que tous ses clones) auraient besoin d'avoir la même classe CSS, de sorte que l'opacité de chaque clone pourrait être réduite en même temps. Chaque élément de cette classe serait supprimé dès que son opacité serait inférieure à un certain point (disons 50%). –

Maintenant, j'ai juste besoin de trouver un moyen de définir et d'obtenir l'opacité de chaque élément, de sorte que je peux réduire l'opacité de chaque clone de l'élément par intervalles de 1/5-seconde. –

Je trouve ce post sur Stackoverflow:

How is this blur effect done in javascript?

$('img').on('mouseenter', function() { 

     var $theClone = $(this).clone().css({ opacity : 0.5, position : 'absolute', top : 0 }); 

     $(this).parent().append($theClone); 

     $theClone.animate({ left : 10 }, 500).on('mouseleave', function() { 
      $(this).stop().fadeOut(250, function() { 
       $(this).remove(); 
      }); 
     });  
    });

Ou peut-être cette fonction:

function addParallaxScrolling() { 
     if (!$("bgImageTop")) { 
      return 
     } 
     if (window.orientation == undefined && !Browser.firefox) { 
      var body = document.getElement("body"), 
       headerimage = $("bgImageTop"), 
       headergrad = $("bgGradientTop"); 
      window.addEvent("scroll", function windowScrollEvent() { 
       body.setStyle("background-position", "0px " + (this.getScroll().y/4) + "px"); 
       headerimage.setStyle("top", this.getScroll().y/4 + "px"); 
       headergrad.setStyle("top", headerimage.getStyle("top").toInt() + headerimage.getStyle("height").toInt() + "px") 
      }) 
     } 
    }

espoir je peux vous aider.

Source

2013-02-21 08:30:26

Où avez-vous trouvé la fonction 'addParallaxScrolling'? –

Je ne suis toujours pas sûr s'il serait possible d'utiliser l'une de ces fonctions pour créer un effet de flou lors du défilement d'une page. –

Sur ce site: http: //css-tricks.com/forums/discussion/11255/cool-vertical-parallax-page-scroll-effect-/p1 –

Effet de flou de mouvement sur le parchemin

Répondre

Questions connexes