4

次のようなクールな3D効果を備えた画像スライダーを作成したいと思います：http ：//tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

問題は、CSS3 3D変換を使用して何かを回転させる方法は知っていますが、画像の「部分」をアニメーション化する方法がわからないということです。上記のリンクでは、スクリプトはどういうわけか画像をいくつかの部分に「スライス」してから、それらを別々にアニメーション化するようです。ただし、画像は事前にスライスされていません。これは1つの画像全体です。

誰かがこの効果を達成する方法についてのチュートリアルをお勧めできますか、またはおそらくこれを行うために使用されたテクニックの名前を付けることができますか？前もって感謝します！

4

4 に答える 4

3

まあ、このプラグインの機能はとても簡単です：

順序付けられていないリストに画像があります。変更をトリガーするとすぐに、次のことが起こります。

他の5つのdiv（スライス）を含むdivオーバーレイが作成されています。

+----+----+----+----+----+
|    |    |    |    |    |
|    |    |    |    |    |
| 1  | 2  | 3  | 4  | 5  |
|    |    |    |    |    |
|    |    |    |    |    |
+----+----+----+----+----+

これらのスライスには、遷移する画像を背景画像として設定した立方体を形成するいくつかのdivが含まれています（それに応じた部分のみが表示されます）。

            +---+\
  Slice 1:  |\  | \
  Image     | \_|__\
  currently | | |  |
  shown   ->| |_|__|
            | / |  /
            |/  | /<- Image to transition to
            +---+/

これで、各キュービクルに対して、実際のCSS-Transition（180°回転）を使用して新しい画像に回転するタイムアウト（長さがわずかに異なる）が設定されます。

于 2012-10-27T17:06:50.493 に答える
1

プラグインのソースコードを見ると、実際に画像がスライスされ、各部分が個別に回転していることがわかります。アニメーションの直前にスライスを作成してオリジナルを非表示にし、アニメーションの直後に新しいオリジナルを表示してスライスを破棄します。

画像をスライスする1つの方法は次のとおりです。

for each slice:
  create a new copy of the image
  place the image in a new div
  set the image `position` to `absolute` and `top` to minus the slice beginning
  set the div height to the slice height and `overflow` to `hidden`
  place the div to the correct position
于 2012-10-27T16:43:39.667 に答える
1

CSS3アニメーションは、単一のDOMノードのCSS属性を時間の経過とともに変更することを目的としています。したがって、技術的には画像の一部をアニメーション化することはできません。さらに言えば、DOM要素の特定の領域の属性を変更することはできません。したがって、実際に行う必要があるのは、それぞれが単一のスライスを表す複数のDOM要素を持つことです。

同じことを行う1つの方法は、画像を背景として設定したスライスごとにdivを設定することです。事前に指定されたサイズの各divを並べて配置すると、背景画像が組み合わされて画像全体が形成されるように配置されます。

これで、cssアニメーションを使用して、このような各divをアニメーション化できます。javascriptを使用する場合は、サーバーにこれらすべてのdiv要素をレンダリングさせる必要はありません。実際、div-sのスライスごとの作成と背景位置の設定は、javascriptで実行できます。

于 2012-10-27T16:57:15.280 に答える
0

私はスピナーを作成しており、Photoshopで、または:beforeセレクターを使用して画像上に放射状の背景グラデーションを設定している場所で個々の画像を作成するのではなく、

-webkit-radial-gradient(center, ellipse cover, #fff 23%,transparent 27%,transparent 100%)

下の複製の中心が透けて見えるようにします（アニメーションではありません）。これは、img要素を複製し、Javascriptを使用して既存の位置と同じ位置に設定することで配置されます。

function spinBadge() {
    hovered = document.querySelector('a:hover img')
    spinner = document.createElement('img');
    spinner.src = hovered.src;
    spinner.className = 'spinner';
    spinner.setAttribute('width','120px');
    spinner.setAttribute('height','120px');
    spinner.setAttribute('style','border:0; margin:0; max-width: none; position: absolute; pointer-events: none; left: '+hovered.offsetLeft+'px; top: '+hovered.offsetTop+'px;');
    hovered.parentNode.appendChild(spinner);
    setTimeout(function(){document.querySelector('.spinner').className = 'spinner wheee'})
    setTimeout(function(){document.querySelector('.wheee').remove();},3000);
}

余白などを変更し、パーツを選択的に透けて表示するだけで、画像全体を「スライス」する方法はたくさんあります。

SVG画像はアニメーションにも最適であり、個々のセクションにクラスを指定して、CSSトランジションでアニメーション化することができます。このサイトにはたくさんのCSSトリックがあります（これは頭に浮かぶでしょう）。

于 2014-05-03T01:40:37.003 に答える