0

ここにアートワークを表示するために iosSlider を使用しています: http://artiris.clients.twi.tl/galeries/galerie-bleue

中心から外れた作品にぼかしフィルターをかけたい。プラグインには「アクティブな」クラス設定がありませんが、これを行うための単純な関数を使用して簡単に追加できます。

ここがトリッキーな部分です。ぼかしを入れたり入れたりしたい。時間値ではなく、トランジションをスライダーの動きに連動させたい。たとえば、アートワークが中心に近づくと、ぼかし値は動きに連動し、アートワークが中心にあるときは 0 になります。スライダーがタッチ対応なのでこれが欲しい。

スライダー オブジェクトはリアルタイムの位置を提供するので、設定するぼかし値を把握できます。ただし、これには do/while ループを記述します。ブラウザがクラッシュするだけです。onSlideStart イベントと onSlideComplete イベントもありますが、あるイベントで関数を実行し、別のイベントで停止する方法がわかりません。

全体として、これをクリーンかつ効果的に行う方法について、正しい方向に導く誰かが必要なだけです。

ありがとう

4

3 に答える 3

1

iosSlider 開発者がいくつかの洞察を報告しています。

iosSlider プラグイン内の touchmove イベント内に独自の関数を追加できます。この関数は、iosSlider のドラッグと一緒に起動します。1806 行目以降に配置することをお勧めします。

于 2012-12-11T23:09:48.093 に答える
1

ある種の「onDrag」イベントが常に発生している場合を除き、これを処理するには 2 つの方法しか考えられません。

最初: asetTimeoutはミリ秒ごとに実行され、ぼかしを調整します。これはほぼ確実に良いオプションではありませんが、技術的にはオプションです。これにより、特に低速デバイスでパフォーマンスの問題が発生する可能性があります。また、タイムアウトが実際にはミリ秒ごとに実行されるとは限らないため、ブラーが一定でない可能性があることも意味します。

JavaScriptはシングルスレッドであるため、コメントで提案したように、ループを使用してイベントに応じてループを有効/無効にすることはできません。ループが開始されると、他のJavaScriptは実行されなくなります。常にブラウザをロックします。

2 番目: CSS のみのソリューション。動きが CSS のみの場合、運が良ければ同じ方法でぼかしを行うことができます。残念ながら、私は CSS の専門家ではないので、これを行う最善の方法はわかりません。

申し訳ありませんが、これはあなたの質問に対する適切な回答ではありませんが、javascript オプションと、おそらくそれを行うべきではない理由を説明したかったのです。

于 2012-12-11T21:59:25.103 に答える
0

さて、ここにあります。http://artiris.clients.twi.tl/galeries/galerie-bleue

それが最善の方法かどうかはわかりませんが、うまくいくようです！

スライダーが動き始めると、100ms ごとに関数を実行するタイムアウトを開始します。スライダーの動きが止まると、タイムアウトはクリアされます。

ここに私の機能があります:

function adjustFilter() {
    var nodes = $gallerySlider.data('iosslider').slideNodes,
        stage = $gallerySlider.data('iosslider').stageWidth,
        matrix =    $slider.css("-webkit-transform") ||
                    $slider.css("-moz-transform") ||
                    $slider.css("-ms-transform") ||
                    $slider.css("-o-transform") ||
                    $slider.css("transform"),
        matrixArray = matrixToArray(matrix),
        position =  Math.abs(matrixArray[4]);

    for(var i = 0; i < nodes.length; i++) {
        var $node = $(nodes[i]),
            nodeMatrix =    $node.css("-webkit-transform") ||
                            $node.css("-moz-transform") ||
                            $node.css("-ms-transform") ||
                            $node.css("-o-transform") ||
                            $node.css("transform"),
            nodeMatrixArray = matrixToArray(nodeMatrix),
            nodePosition = Math.abs(nodeMatrixArray[4]),
            distance = Math.abs(Math.min(Math.max(parseInt(nodePosition-position), stage*(-1)), stage)),
            tx = distance/stage;

        $node.css({ '-webkit-filter' : 'blur('+tx*10/2+'px) grayscale('+tx+')' })
    }
}

基本的にはスライダーの位置を取得します。次に、ノードごとに現在の位置を取得し、中心からの距離を計算します。この距離は、スライドの幅を超えないように正規化されています。次に、その数値を使用して、すべてのノードのぼかしとグレースケールをリアルタイムで設定します。このように、効果は継続的です。

今のところ、性能は良さそうです。いずれにしても、フィルター プロパティがブラウザーでサポートされている場合にのみ関数を実行します。

誰かがこのコードを改善する方法を提案できるなら、私はすべて耳にします。

于 2012-12-12T07:45:42.187 に答える