Pulsierendes Div

Ein Button wird nicht immer sofort erkannt oder man möchte einfach ein Element auf der Webseite schön animieren. Egal für welchen Anwendungszweck – Durch ein pulsierendes Div oder ein pulsierender Button wird die Aufmerksamkeit unweigerlich zu dieser Position auf dem Bildschirm gelenkt, denn Bewegung zieht unsere Aufmerksamkeit auf sich.

  • HTML
  • CSS
div.puls-container {
	width: 100%;
	height: 60px;
	position: relative;
	display: table;
	margin: 50px auto;	
}
div.puls {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 2px solid #1C705B;
	display: table;
	background: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -15px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0;
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(3.2, 3.2); opacity: 0.0;}
}
div.puls-middle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #ff1654;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
	z-index: 99;
}

Sicherlich – Nicht jeder mag das. Das sollte einem klar sein. Daher empfehle ich auch immer nur eine dezente Verwendung dieser Animation. Nicht das man ein Button wie blinken lässt, denn das schreckt eher ab. Eine angemessene Dosis und der Effekt erzielt seine Wirkung.

Das schöne ist, dass für den Effekt kein Javascript notwenig ist. Einfach folgende Zeile in die .css Datei packen und anpassen.

yourClass {
	width: 14px;
	height: 14px;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border: 2px solid #ffaf04;
	display: block;
	position: absolute;
	left: -4px;
	top: -4px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.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.