Div Bounce Effekt – springendes Element mit CSS

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: #5dd39e;
}
@-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.

So erstellst Du ein Bounce Effekt mit css

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; }
}

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Div Bounce Effekt – springendes Element mit CSS

Wenn dir der Beitrag Div Bounce Effekt – springendes Element mit CSS gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.