Animierter Kreis erzeugen

[Martin_Online]

Guten Abend,

ich hab auf http://www.alextv.de/team/ hier ganz nach unten Scrollenb einen schönen Kreis Effekt gesehen (dieser wird dynamisch aufgebaut.

Aus dem Quelltext werde ich leider nicht schlau, wie dieser zusammen gesetzt wird. Kann mir dieses jemand verraten?

[molily]

Hallo!

ich hab auf http://www.alextv.de/team/ hier ganz nach unten Scrollenb einen schönen Kreis Effekt gesehen (dieser wird dynamisch aufgebaut.

Dort wird per JavaScript auf ein HTML5-canvas-Element gezeichnet.

http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Canvas
http://wiki.selfhtml.org/wiki/JavaScript/API/Canvas
https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial
http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/

Das heißt, hier wird ein Kreisbogen und ein Text gezeichnet. De Animation selbst ist mit JavaScript umgesetzt, jeden Frame wird der Canvas gelöscht und ein etwas größerer Kreisbogen gezeichnet.

Dieses jQuery-Plugin wird verwendet:
http://rendro.github.io/easy-pie-chart/

Grüße
Mathias

[Martin_Online]

Hallo,

hatte heute etwas Zeit. So sollte der Kreis später aussehen. Ist erstmal nicht so wichtig ob dieser Animiert ist oder nicht.

Brauch ich dafür eine Grafik oder könnte ich dieses komplett mit CSS umsetzten? (was natürlich sehr gut wäre.

Mein Ergebnis muss später so aussehen wie dieser auf dem Bild, sonst bekomme ich Ärger mit meiner Freundin (Grafikerin) ;)

[Martin_Online]

Hallo,

sorry hatte mein Code vergessen zu posten :/ hier meine Idee

  
#kreis {  
    background-color: #00a9d4;  
    position: absolute;  
    width: 200px;  
    height: 200px;  
    top: 100px;  
    left: 250px;  
    text-align: center;  
    border-radius: 100px;  
}  
  
#kreis p{  
	color:#FFF;  
	font-weight:bold;  
	font-size:60px;  
}  

  
<div id="kreis">  
    <p>77%</p>  
</div>  

Die Frage ist nun, wie bekomme ich den Rand drum herum inkl. dass er NICHT ganz zu geht.

[M.]

Mahlzeit,

Brauch ich dafür eine Grafik oder könnte ich dieses komplett mit CSS umsetzten? (was natürlich sehr gut wäre.

Klar geht das. nur mit CSS. Aber das ist recht viel Aufwand. Such mal nach Simpsons in CSS, hat jemand vor einiger Zeit hier im Forum gepostet. Da siehst du, dass man fast alles per CSS machen kann.
Ob es sinnvoll ist, ist dabei ein anderes Thema, bei deinem Vorhaben halte ich es _nicht_ für sinnvoll. Mathias hat dir schon den IMO besten Ansatz geliefert.

[molily]

Hallo,

Brauch ich dafür eine Grafik

Ja, geeignet wäre eine SVG-Vektorgrafik.

oder könnte ich dieses komplett mit CSS umsetzten? (was natürlich sehr gut wäre.

Das wäre m.E. gar nicht gut, außer vielleicht als kreative Fingerübung mit wenig Praxisrelevanz.

Mathias