javascript - 視差アニメーション用の斜めの辺を持つ Div

Question

視差アニメーションをスクロールするための2つの斜めのdivを作成するには? ここの 6 つのアイテム (箇条書き) https://victoriabeckham.landrover.com/INTのようなスライド トランジションが必要ですが、斜めの側面があります。

Answer 1

ええと...斜めのdivなどはありません。ただし、斜めに見えるように回転させることもできます。CSS 3と回転変換でそれを行うことができます

これを参照してください: http://www.w3schools.com/cssref/css3_pr_transform.asp

例: http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotate

サンプルコード:

#myDIV
{
    transform:rotate(10deg);
}

個人的なメモ：あなたのアプローチは、「斜め」の背景画像を持つ「通常の」divを使用し、divのコンテンツをスクロール位置に応じたアニメーションで表示して、実際にいるという錯覚を作成することであると思います斜めのdivを使用する

更新 1:ここに、あなたが興味を持つと思われるリンクをいくつか示します。

• http://unfold.no/
• http://harvestcreative.com/
• http://www.nike.com/jumpman23/aj2012/

更新 2 : もう 1 つのクールなこと: http://www.css3shapes.com/