Efecto de scroll con CSS

En este ejemplo se ilustra cómo conseguir un efecto de fondo con movimiento continuo utilizando sólo HTML y CSS.

En respuesta a https://www.facebook.com/100078733357214/videos/1687830988250647/

HOLA

Fuente CSS y HTML

<style>
	@keyframes animatedBackground {
		from {
			background-position: 0 0
		}

		to {
			background-position: 100% 0
		}
	}

	@-webkit-keyframes animatedBackground {
		from {
			background-position: 0 0
		}

		to {
			background-position: 100% 0
		}
	}

	@-ms-keyframes animatedBackground {
		from {
			background-position: 0 0
		}

		to {
			background-position: 100% 0
		}
	}

	@-moz-keyframes animatedBackground {
		from {
			background-position: 0 0
		}

		to {
			background-position: 100% 0
		}
	}

	#area-animada {
		width: 100%;
		height: 100%;
		background-position: 0 0;
		background-repeat: repeat-x;
		animation: animatedBackground 40s linear infinite;
		-ms-animation: animatedBackground 40s linear infinite;
		-moz-animation: animatedBackground 40s linear infinite;
		-webkit-animation: animatedBackground 40s linear infinite
	}

	#area-animada>div.saludo {
		min-height: 300px;
		color: #fff;
		font-size: 3rem;
		text-align: center;
	}
</style>
<div data-bg="ala.jpg" id="area-animada" style="background-color: #000; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; 
background-image: url(ala.jpg);">
	<div class="saludo">
		HOLA
	</div>
</div>

Etiquetas de esta entrada:

css, Diseño web, Tutorial