Div Bounce Effekt

Ein springendes oder bouncendes Div sieht man heutzutage relativ oft auf neueren Webseiten. Vor allem auf Webseiten die ein Fullscreen Image auf der Startseite haben. Oft sieht man dann mittig am unteren Bildschirmrand einen Pfeil der leicht auf und ab springt, um den Besucher dazu zu animieren, mit der Maus nach unten zu scrollen. Leider müssen Webdesigner solche Kleinigkeiten einbauen, da es wirklich Leute gibt, die nicht intuitiv wissen, dass sie scrollen sollen oder können.

  • HTML
  • CSS
.yourClass {
	position: absolute;
	left:50%;
	bottom:30px;
	margin-top:-25px;
	margin-left:-25px;
	height:50px;
	width:50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-animation:bounce 1s infinite;
	z-index: 999;
	font-size: 50px;
	background-color: #F36725;
}
@-webkit-keyframes bounce {
	0%       { bottom:25px; }
	25%, 75% { bottom:35px; }
	50%      { bottom:40px; }
	100%     { bottom:20px; }
}

Zum Glück ist diese Animation, ebenso wie das pulsierende Div, nur ein kleiner .css Befehl der ohne Javascript funktioniert. Kopiert einfach die folgenden Zeilen und fügt sie an entsprechender Stelle in Eure style.css ein. Wie immer gilt – Weniger ist manchmal mehr.

.yourClass {
	position:fixed;
	left:50%;
	bottom:30px;
	margin-top:-25px;
	margin-left:-25px;
	height:50px;
	width:50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-animation:bounce 1s infinite;
	z-index: 999;
	font-size: 50px;
	background-color: #F36725;
}
@-webkit-keyframes bounce {
	0%       { bottom:25px; }
	25%, 75% { bottom:35px; }
	50%      { bottom:40px; }
	100%     { bottom:20px; }
}

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.