Tutorials
Eine immer größer werdende Tutorialdatenbank.
PHP-Fusion Core
Aktuelle PHP-Fusion Vollversionen und Updates
Addon Downloads
Alle Downloads garantiert Kostenlos
Support 24/7
24 Stunden, 7 Tage die Woche, das ganze Jahr.
CSS Chartanimation
Kategorie: CSS
PHP-Fusion Version: Keine
Quelle: http://hasinhayder.github.io/Nanimator/index3.html
Schwierigkeitsgrad:
Eine schöne Chartanimation zum Darstellen von Werten
Faq
HTML-CodeGeSHi: HTML
- <div class="container">
- <ul class="slider">
- <li class="slide" id="slide1">
- <div class="nanimate chart" id="chart" data-direction="none">
- </div>
- <div class="y">
- </div>
-
- </li>
- </ul>
- </div>
gewandelt in 0.003 Sekunden, benutzt wurde GeSHi 1.0.8.10
Dazu ist unterhalb des Codes alternativ in den Footer noch etwas javascript hinzuzufügen
GeSHi: Javascript
- <script type='text/javascript'>
-
- $(document).ready(function(){
- $(".y h2").data("direction","bottom");
- $("#slide1").nanimate({delay:true});
- $("#slide1").bind("nanimation.complete",function(){
- //alert("done");
- $(".x").each(function(){
- $(this).data("direction","right")
- .data("distance",$(this).width())
- .data("time",$(this).width()*1.5);
- });
- $("#chart").nanimate({classname:"x",noevent:true,delay:false});
- })
- })
- </script>
gewandelt in 0.003 Sekunden, benutzt wurde GeSHi 1.0.8.10
Dem Headbereich fügt Ihr bitte noch folgendes hinzu:
GeSHi: HTML
- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400">
- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900">
- <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10
Die entsprechenden dateien findet Ihr im Download.
CSS
Code
body{
/*height: 10000px;*/
padding: 0px;
margin: 0px;
font-family: "Lato";
background-color: #2980b9;
}
.container{
width: 800px;
margin: auto;
margin-top: 50px;
}
ul.slider{
list-style-type: none;
position: relative;
padding: 0px;
margin: 0px;
width: 800px;
height: 350px;
background-color: #fff;
overflow: hidden;
font-family: 'Bangers', cursive;
}
ul.slider li.slide{
position: absolute;
list-style-type: none;
padding: 0px;
margin: 0px;
width: 800px;
overflow: hidden;
height: 350px;
}
ul.slider li.slider div.element{
position: absolute;
}
/** content **/
.content{
margin-top: 150px;
margin-left: 100px;
width: 700px;
display: none;
}
h1, h2{
font-family: "Source Sans Pro",sans-serif;
color: #333;
padding: 0px;
margin: 0px;
font-weight: normal;
}
h1{
font-weight: 900;
font-size: 24px;
}
h2{
font-size:26px;
}
p{
color: #ecf0f1;
font-family: "Lato";
line-height: 28px;
font-size: 15px;
padding-top: 50px;
}
p.credit{
padding-top: 20px;
font-size: 12px;
}
p a{
color: #ecf0f1;
}
.hcolor{
color:#c0392b;
}
/** fork icon**/
.fork{
position: absolute;
top:0px;
left: 0px;
}
/** Elements Def**/
#slide1{
padding-top: 10px;
}
#slide1 h1{
position: relative;
text-align: center;
margin-top: 20px;
font-weight: normal;
}
.chart{
position: absolute;
border-left: 1px solid #444;
border-bottom: 1px solid #444;
width: 550px;
height: 200px;
top:90px;
left:150px;
overflow: hidden;
padding-top: 21px;
}
.y{
width: 120px;
position: absolute;
left:20px;
top:100px;
}
.y h2{
font-size: 18px;
margin-top: 6px;
text-align: right;
color: #444;
}
.x{
height: 15px;
margin-bottom: 12px;
opacity: 0;
font-size: 10px;
color: #eee;
line-height: 15px;
text-align: right;
padding-right: 10px;
font-family: "Lato";
}
/** Links **/
div.links{
width: 600px;
margin: auto;
margin-top: 50px;
text-align: center;
}
div.links a{
text-decoration: none;
color: #eee;
font-size: 14px;
text-transform: uppercase;
}
div.links a:hover{
text-decoration: underline;
color: #eee;
}
/** Footer **/
.footer{
width: 300px;
margin: auto;
margin-top: 100px;
text-align: center;
}
.footer h2{
font-size: 14px;
text-transform: uppercase;
margin-bottom: 10px;
}Quelle: http://hasinhayder.github.io/Nanimator/index3.html
Demo ansehen
Tutorial Verlinken
URL:
BBCode:
HTML-Code:
Kommentare
Es wurden noch keine Kommentare verfasst.
Kommentar schreiben
Bitte logge dich ein, um einen Kommentar zu verfassen.
Anzeige
Anmelden
RSS Feeds
Feeds abonieren
Anzeige
