<p class="text">
Example for Scrolling Pattern
</p>
<!-- Very simple example for an auto scrolling pattern to show someone the css only approach --->
@import url('https://fonts.googleapis.com/css?family=Ruda:900');
body {
background-image: url(//www.toptal.com/designers/subtlepatterns/patterns/symphony.png);
background-position: bottom;
animation: 4s linear 0s infinite bp;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes bp {
from {
background-position: 198px 0;
}
to {
background-position: 0 198px;
}
}
html, body {
height: 100%;
margin: 0;
}
.text {
font: 900 18px Ruda;
color: #C08;
background: white;
display: inline-block;
padding: 1rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.