1

スクロール時にモーションブラー効果をHTMLdivに適用しようとしています。これを行うには、各divのクローンを1/5秒ごとに作成し、スクロール時にページ上の位置を固定しておく必要があります。また、各divクローンの不透明度を1/5秒ごとに下げ​​、ページ上に一度にdivのクローンが5つしかないことを確認する必要があります（これにより、divのクローンが数百になります。数秒後のページ）。このメソッドを使用してJavaScriptでモーションブラー効果を作成することは可能でしょうか？

<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>
4

2 に答える 2

2

Stackoverflowでこの投稿を見つけました：

このぼかし効果は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();
            });
        });      
    });​

または多分この関数：

  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")
            })
        }
    }

私があなたを助けることができることを願っています。

于 2013-02-21T08:30:26.650 に答える