<html>
<head>
<meta charset="utf-8">
<title>Scrolling Text with Colour Change</title>
<style>
/*we import the font we want to use from Google fonts here*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
/*here are the keyframe animations. We use these to control the scrolling text. We have added the -webkit-' prefix for older version of Google Chrome, but you should check to see if your Chrome version needs an upgrade so you can take advantage of some awesome new features! :)*/
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translate3d(0, -50%, 0);
}
100% {
-webkit-transform: translate3d(-50.6%, -50%, 0);
}
}
@keyframes scroll-left {
0% {
-webkit-transform: translate3d(0, -50%, 0);
-moz-transform: translate3d(0, -50%, 0);
-ms-transform: translate3d(0, -50%, 0);
-o-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50,% 0)
}
100% {
-webkit-transform: translate3d(-50.6%, -50%, 0);
-moz-transform: translate3d(-50.6%, -50%, 0);
-ms-transform: translate3d(-50.6%, -50%, 0);
-o-transform: translate3d(-50.6%, -50%, 0);
transform: translate3d(-50.6%, -50%, 0)
}
}
#wrapper {
position: relative;
overflow: hidden;
}
.scroller {
position: absolute;
left:0;
top:50%;
-webkit-transform:translate3d(0,-50%,0);
font-size:200px;
font-family: 'Open Sans', sans-serif;
-webkit-animation: scroll-left 20s linear infinite;
-moz-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;
white-space: nowrap;
}
.front {
z-index: 100;
text-align:center;
left:-8rem;
}
.scrollingText {
display:inline-block;
}
.scroll-container {
padding-left:8rem;
padding-right:8rem;
width:100%;
box-sizing:border-box;
}
.scroll-image {
position: relative;
z-index: 10;
width:100%;
}
.scroll-image img {
width:100%;
height:auto;
}
.image-container {
overflow:hidden;
position:relative;
}
.dark {
color:#3a3a3a;
}
.light {
color:#fff;
}
p {
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<span class="scroller">
<span class="scrollingText dark"> This Is Our Headline  </span>
<span class="scrollingText dark"> This Is Our Headline  </span>
</span>
<div class="scroll-container">
<div class="scroll-image">
<div class="image-container">
<img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/peter/Improvements/text-example/example-image.jpeg"/>
<span class="scroller front">
<span class="scrollingText light"> This Is Our Headline  </span>
<span class="scrollingText light"> This Is Our Headline  </span>
</span>
</div><!--image-container-->
</div><!--scroll-image-->
</div><!--scroll-container-->
</div><!--wrapper-->
</body>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.