2

Adam Whitcroft のすばらしいランディング ページのように、垂直方向に無限にスクロールする画像を追加しようとしています。私は彼のソース コードを見てきましたが、彼がどのようにそれをやってのけたのかわかりません。アイデアは、「私は科学者です」というテキストが画像の上に表示されるということです。

私の現在のコードは次のとおりです。

<div class="ani">
    <div class="container">
            <img src="img/Gene.png" alt="Scrolling Genes" />
        </div> 
<h3> I'm a scientist. </h3>
    <p> I worked at.... </p>

「ani」クラスの CSS は次のとおりです。

.ani {
background: url(img/Gene.png);
color:#ecf2f9;
text-align:center;
-webkit-animation:bgscroll 20s infinite linear;
}

そして「コンテナ」の場合：

    .header .container {
    max-width:400px;
}

そのコードは（恥ずかしながら）私が上で述べたサイトから取られたものです。私の人生では、テキストの上にスクロールする画像を作成する方法を理解できません。

よろしくお願いします。

4

1 に答える 1

9

あなたのコードは良かったです。アニメーションを定義するのを忘れているだけです。

@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:0 -520px;}
}

ここにあなたが望むもののサンプルがあります: http://codepen.io/joe/pen/hdoIk

明らかに、自分の写真に合わせて画像を変更し、アニメーションに適した高さを定義する必要があります.

ブラウザーを完全にサポートするには、すべての CSS プレフィックス ベンダーを追加することを忘れないでください。詳細はこちら: http://www.w3schools.com/css3/css3_animations.asp ( -wekbit -moz -o )

コードを次の場所に貼り付けるだけで簡単に実行できます: http://prefixr.com

それが役に立てば幸い。

于 2012-12-31T00:50:03.233 に答える