I want to incorporate a vertically scrolling image similar to the one on Adam Whitcroft's amazing landing page. I have tried examining his source code, but I am unable to grasp how he achieved it. The concept is to have the "I'm a scientist" text overlaying the image.
Here is my current code:
<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>
The CSS for the "ani" class:
.ani {
background: url(img/Gene.png);
color:#ecf2f9;
text-align:center;
-webkit-animation:bgscroll 20s infinite linear;
}
And for the "container" class:
.header .container {
max-width:400px;
}
This code was (regrettably) borrowed from the aforementioned site. I just can't seem to figure out how to create a scrolling image above the text.
Thank you so much in advance.