About this snippet

Pure CSS3 pixelated background image automatic scrolling, using CSS3 animation and keyframes. This example demonstrates the use of pixelated images with animation.

Size
610 bytes
Uses
HTML, CSS
Loads
codeshack.io
Views
331
<div class="pixelated-scroll"></div>
html, body {
  	margin: 0;
  	width: 100%;
  	height: 100%;
	background-color: #455281;
}
.pixelated-scroll {
  	width: 100%;
  	height: 100%;
  	image-rendering: pixelated;
  	background-image: url(https://codeshack.io/web/img/uploads/pixelated-buildings.png);
  	background-size: 50%;
  	background-repeat: repeat-x;
  	background-position: left bottom;
  	border-bottom: 100px solid black;
  	box-sizing: border-box;
    animation: slide 10s linear infinite;
}
@keyframes slide {
  	from { background-position: left bottom; }
  	to { background-position: 100% bottom; }
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save