<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&nbsp </span>


        <span class="scrollingText dark"> This Is Our Headline&nbsp </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&nbsp </span>


                    <span class="scrollingText light"> This Is Our Headline&nbsp </span>


                </span>


            </div><!--image-container-->

        </div><!--scroll-image-->

    </div><!--scroll-container-->


</div><!--wrapper-->


</body>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.