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;
}
そのコードは(恥ずかしながら)私が上で述べたサイトから取られたものです。私の人生では、テキストの上にスクロールする画像を作成する方法を理解できません。
よろしくお願いします。