• Herzlich Willkommen auf PHP-Fusion.at
  • Welcome to PHP-Fusion.at
Startseite » Tutorialübersicht » CSS Chartanimation

CSS Chartanimation

Kategorie: CSS
PHP-F Version: Keine
Quelle: http://hasinhayder.github.io/Nanimator/index3.html
Eine schöne Chartanimation zum Darstellen von Werten

Faq

HTML-Code

GeSHi: HTML


  1. <div class="container">
  2. <ul class="slider">
  3. <li class="slide" id="slide1">
  4. <h1 class="nanimate">THIS YEAR IN PROGRESS</h1>
  5. <div class="nanimate chart" id="chart" data-direction="none">
  6. <div class="x" style="width:150px;background-color: #333;">$150K</div>
  7. <div class="x" style="margin-bottom:16px;width:300px;background-color: #3498db;">$300K</div>
  8. <div class="x" style="width:200px;background-color: #16a085;">$200K</div>
  9. <div class="x" style="margin-bottom:16px;width:500px;background-color: #9b59b6;">$500K</div>
  10. <div class="x" style="width:450px;background-color: #e74c3c;">$450K</div>
  11. <div class="x" style="margin-bottom:16px;width:100px;background-color: #f39c12;">$100K</div>
  12. <div class="x" style="width:400px;background-color: #34495e;">$400K</div>
  13. </div>
  14. <div class="y">
  15. <h2 class="nanimate">JAN</h2>
  16. <h2 class="nanimate">FEB</h2>
  17. <h2 class="nanimate">MAR</h2>
  18. <h2 class="nanimate">APR</h2>
  19. <h2 class="nanimate">MAY</h2>
  20. <h2 class="nanimate">JUN</h2>
  21. <h2 class="nanimate">JUL</h2>
  22. </div>
  23.  
  24. </li>
  25. </ul>
  26. </div>
gewandelt in 0.007 Sekunden, benutzt wurde GeSHi 1.0.8.10




Dazu ist unterhalb des Codes alternativ in den Footer noch etwas javascript hinzuzufügen

GeSHi: Javascript


  1. <script type='text/javascript'>
  2.  
  3. $(document).ready(function(){
  4. $(".y h2").data("direction","bottom");
  5. $("#slide1").nanimate({delay:true});
  6. $("#slide1").bind("nanimation.complete",function(){
  7. //alert("done");
  8. $(".x").each(function(){
  9. $(this).data("direction","right")
  10. .data("distance",$(this).width())
  11. .data("time",$(this).width()*1.5);
  12. });
  13. $("#chart").nanimate({classname:"x",noevent:true,delay:false});
  14. })
  15. })
  16. </script>
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10



Dem Headbereich fügt Ihr bitte noch folgendes hinzu:

GeSHi: HTML


  1. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400">
  2. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900">
  3. <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
  4. <script src='js/jquery-1.10.2.js'></script>
  5. <script src='js/jquery.transit.js'></script>
  6. <script src='js/jquery.nanimator.js'></script>
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

   Hinweis!  Thematisch unpassende Kommentare werden entfernt! Siehe Nutzungsbedingungen

Es wurden noch keine Kommentare verfasst.

Kommentar schreiben

Name:

Sicherheitscode:

Premium Partner

© 2006 - 2017Webradio Help
Powered by PHP-Fusion copyright © 2002 - 2013 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.