LiquidFillGauge

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Konzept und Quellcode mit Erläuterung von Scroll Percent Display with liquid Animation

Author: Lars Heinrich und Neele Lange

Einleitung

Mal ehrlich!? Schon mal auf einer Webseite gewesen und ihr musstet scrollen und scrollen und scrollen? Dabei habt ihr euch gefragt, wie weit denn noch? Wann kommt das Ende?

Um dieses kleine Problem mit einem Gimmick zu lösen, haben wir dieses Tutorial geschrieben.

Anmerkung: Diese Idee ist nicht in Stein gemeißelt. Sie kann beliebig erweitert, verbessert oder auch verändert werden.

Notwendige Dateien

Zuerst benötigt man die Grunddateien jeder Homepage. Dafür legt man sich folgende Dateien an.

index.html
style.css
script.js

zusätzlich

liquid.js

Erstellt diese Dateien einfach mit einem Editor eurer Wahl und speichert sie in einem separaten Ordner.

Libraries

Die Libraries beinhalten alle wichtigen Information, um die Liquid Animation herzustellen. Jquery und D3.js, sowie die liquid.js werden wir ganz einfach via API hinzufügen. Das hat den Vorteil, dass man immer die aktuellste Version hat.

HTML Datei vorbereiten

In der HTML Datei wird nun folgender Code eingefügt:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>
      </head>
    <body>
      </body>
</html>

Nun ist das Grundgerüst der HTML Datei erstellt.

<html> Ist dabei der äußerste Gerüst und schließt alles andere ein

<head> ist der Kopf und umfasst neben dem Titel der Seite auch alle Scripte, die Stylesheets und Metadaten.

<body> ist das was der Nutzer am Ende sehen wird. Hier kommen alle Informationen hinein, welche später zu sehen sein sollen.

</html></head></body> schließen die jeweiligen Felder.

Verbindungen herstellen

Da wir eine Verbindung zu den jeweiligen Dateien und API´s benötigen, fügen wir folgendes im Headbereich ein:

<script src="script.js" type="text/javascript"></script>

Das verbindet die index.html Datei mit eurer script.js Datei

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

<script src="liquid.js" type="text/javascript"></script>

Dieser Abschnitt stellt die Verbindung zu den notwendigen API´s her

<link rel="stylesheet" type="text/css" href="style.css">

und zu guter Letzt, ist auch die style.css Datei verbunden.

<body>

Die HTML Datei ist nun fast fertig. Zum Schluß wollen wir ja etwas sehen und müssen im Body noch unsere Prozent Anzeige hinzufügen.

Ihr vergibt euren <body> noch eine ID um später dem Script seine Aufgabe zuzuweisen zu können.

<body id="body">

Anschließend erstellt ihr einen DIV Container:

<div  class="box" >
    <svg id="fillgauge1" width="300%" height="300" ></svg>
</div>

Der <div> Container benötigt ein class, welches vom Stylesheet benötigt. *optional

Es ist auch ohne Div Container möglich, aber für die Übersicht praktischer.

Nach dem </div> muss man nur noch einmal das Script einbinden

<script src="script.js" type="text/javascript"></script>

Das bewirkt, dass das Script hier geladen wird. Ansonsten würde keine Anzeige entstehen.

Die HTML Datei ist fertig.

Komplette index.html Datei zur Übersicht:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>

<script src="script.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

       

        <link rel="stylesheet" type="text/css" href=„style.css">
</head>

  <body id=„body">

     <div class="box" >
           <svg id="fillgauge1" width="300%" height="300" ></svg>
     </div>

     <script src="script.js" type="text/javascript"></script>
    
  </body> 
</html>

Anmerkung: Die „id“ und „class“ Bezeichnungen könnt ihr auch beliebig anders benennen, man muss nur darauf achten, diese auch im Script und im Stylesheet anzupassen.

Script Datei mit Inhalt füllen

Jetzt wird gecodet. Aber alles sehr einfach.

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

Der Code erstellt das eigentliche Liquid-Display.

var x erstellt eine Variable und erzeugt die erste Zahl, welche beim Laden angezeigt werden soll. Da man immer oben bei einer Homepage beginnt, soll hier die Zahl 0 angezeigt werden, denn schließlich haben wir ja noch gar nicht gescrollt.

var config0 lädt die folgenden Einstellungen, welche auch im Hauptscript liegen, die wir auch für unsere Webseite anpassen möchten. „ACHTUNG: niemals das Hauptscript* ändern, da sonst das ganze Script zerstört werden kann“.*Muss dann als Datei vorliegen.

var gauge1 erstellte die Animation. Darauf ist zu Achten, dass die Klammer folgende Werte enthällt.

(„ID“, Anfangswert, Konfiguration)

Scrollscript

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

Im Grunde ist dieser Code Abschnitt das Herzstück des Ganzen. Ohne diesen Abschnitt hätten wir keine Scrollfunktion.

Hier könnte man auch eine andere Funktion implementieren, wenn man die Liquid Animation nicht verwenden möchte.

Beim Scrollen aktivieren wir diesen Code, da wir zuvor dem Body die ID „body“ hinzugefügt haben. Beim Scrollen lösen wir die Function gauge1.update aus, die auf die NewValue2 Function zugreift.

Um beim Scrollen einen Wert zu erhalten benötigen wir diesen Codeabschnitt:

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
}

Die Function NewValue2 erfasst die Höhe der Seite und berechnet den Abstand der Seite mit dem TOP der Seite. Var scrollPercent berechnet den Wert in Prozent.

Die untere if – else Schleife ist ein Hilfsmittel um immer nur maximal 100% angezeigt zu bekommen.

Achtung: Hier kann es zu Fehlern kommen, wenn eure Seite kürzer oder länger ist, als die Tutorial Seite. Ggf. muss man hier den Code anpassen.

Die Script Datei ist nun fertig erstellt.

Komplette script.js Datei zur Übersicht:

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
        
        }

Stylen nicht vergessen

Ohne Style geht es nicht. Alle Einstellungen sind veränderbar und auf die eigenen Wünsche und Homepage leicht anzupassen. Also Mut zum ausprobieren.

Komplette style.css Datei zur Übersicht:

body {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 200%;
}

.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }

.box {
    	position: fixed;
    margin: 0 auto;
    	margin-top: 20%;
    width:300;
    	height: 300;
    color: "black";
    text-align: center;
}

Das Tutorial ist in der Funktion nun abgeschlossen.

GESCHAFFT!!!

Beispiel Dateien zum Download

Beispiel:

Beispiel ansehen

Schlagwort: LiquidFillGauge

Tutorial: Scroll Percent Display with liquid Animation

Konzept und Quellcode mit Erläuterung von Scroll Percent Display with liquid Animation

Einleitung

Notwendige Dateien

Libraries

HTML Datei vorbereiten

Verbindungen herstellen

<body>

Komplette index.html Datei zur Übersicht:

Script Datei mit Inhalt füllen

Scrollscript

Komplette script.js Datei zur Übersicht:

Stylen nicht vergessen

GESCHAFFT!!!

Beispiel: