Smooth background-image Animation

Ein Kunde wollte von mir wollte auf der Startseite ein Fullscreen-Image positioniert haben auf dem mittig ein weißer Text zu lesen sein sollte. Kein Problem – sollte er bekommen. Irgendwann erhielt ich dann den Anruf, dass es ihm zu langweilig sei und er gerne etwas Bewegung haben möchte. Wie also animiert man ein Bild?

Smooth Background Animation mit -webkit-keyframes

  • HTML
  • CSS
div#image {
	width: 90%;
	height: 200px;
	overflow: hidden;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin: 50px 5%;
}
div#image-wrapper {
	background-image: url('http://revilodesign.de/media/thailand-maya-beach-longtail.jpeg');
	background-color: #F1F1F1;
	background-repeat: no-repeat;
	background-size: 140%;
	width: 100%;
	height: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	position: relative;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%;
	}
	to { 
		background-position: 100% 0%;
	}
}

Dank der -webkit-keyframes hatte ich schnell die passende Lösung. Ich ließ das Bild immer wieder von links nach rechts bewegen. Somit hatte der Kunde seine gewünschte Bewegung auf der Webseite.

.yourClass {
	background-color: #F1F1F1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: 0% 0%
	}
	to { 
		background-position: 100% 0%
	}
}

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.