WebAnimation with CSS3-Transitions and -Transformations :: HowTo

When you visit my website, you can see some elements moving and fading while hovering over the browser-viewport. In this article I want to explain how I did it: 

 

First you must know, that all elements in a website could be addressed by CSS (Cascading StyleSheets) commands for modifying the color, the size and the position of each object. That’s the main goal of using CSS: Just to manipulate these three options!

But now we want to start an animation, so we need more options for each object to be changed: A start-position, an end-position and the duration of that activity.

But before we begin to create these elements, we must know, that one CSS-Rule is acting on every page and at every time we’re visiting a website:

This CSS command is always active and true, because a website consists of an HTML-document and has a BODY for containing the scripts for the output to the browser.

There are some CSS declarations for user-interaction, which we want to use for our animation:

These CSS commands are ready out-of-the-box and available in every modern browser with HTML5 support.

hover = User moves with his pointerdevice over an element to activate the CSS rule

blur = User moves with his pointerdevice to a different element to activate the CSS rule

focus = User moves with his pointerdevice to the element to activate the CSS rule

When a user visits a website, we know, that the CSS rule “html body” is always active (true). Great! We have a state of a website for starting our animation with it.

To initiate an animation when the user visits our website, we use the “html body” CSS directive in combination with the pointerdevice declarations:

So we have a complete new CSS directive which differs from the initial state at the beginning of a pagevisit and are able to use this new state for define an end of our animation.

So far… so good. But how to use this in CSS for other elements on our page?

The answer is simple: Just write the starting and ending CSS directive before each normal CSS command.

For example, you want to call a DIV with the ID “container”, then type:

This is possible, because HTML and BODY are the parent-elements of each object in the website. Always!

That’s the basic way I’m using the state of a website with the knowledge, if the user is onto the BODY element with the pointerdevice, respective the viewport has been hovered…

 

Now we can write CSS with two states of activity: One at the first pagevisit, and the other when hovering with the pointerdevice over the viewport.

An animation needs a duration. A given time is responsible for a transition and/or transformation run of an object. Without that delay, the animation would just “blink” or “flickr”.

As an example, a CSS3 definition of a time delay of 250 milliseconds for an object is given as following command:

You can add a position, a size and other CSS definitions into that rule. Then you write the same CSS declaration, but this time with a hover-statement as written above.

I can’t explain all CSS3 features in this article, because of too much information, but I can give you a hint to write these CSS definitions with ease. Use the great Online CSS3-Generator: http://css3generator.com/

The generator is a great tool and helps you to find correct values for writing CSS3 for your own projects.

There could be different or better techniques using CSS3 with :hover or :blur. But I’ve got my experience with this combo and I like it.

 

Happy coding…

NodeJS mit NVM für die Webentwicklung verwenden

Viele Webseiten nutzen heutzutage diverse Technologien, um einen möglichst großen Leistungsumfang abzudecken. Eine der umfangreichsten Anwendungsmöglichkeiten bietet “NodeJS”: Mit NodeJS kann man einen autarken Webserver aufbauen, oder auch eine komplette Webseite bereitstellen.

Um NodeJS zu verwenden, bietet sich ein kleines Tool im Netz an, womit sich die Installation fast wie von selbst bewerkstelligen lässt: NVM

In diesen Beitrag möchte ich das Tool “NVM” vorstellen und anhand einzelner Beispiele den Nutzen nahebringen.


1) Zuerst muss das Tool “NVM” von folgendem Git-Repository heruntergeladen werden: https://github.com/creationix/nvm

Dazu begeben wir uns in den Heim-Ordner unseres Accounts innerhalb unseres Webservers und laden das Repository herunter und “sourcen” das Installationsskript:

  Tip: Zusätzlich sollte die letzte Zeile zum Sourcen auch in die Datei ~/.bashrc bzw. ~/.zshrc eingefügt werden (je nachdem ob man die Bash oder ZSH nutzt), damit NVM bei jedem Login in der Shell zur Verfügung steht…


2) Nun installieren wir NodeJS mit folgenden Befehl:

Damit haben wir nun die Tools “Node” und “NPM” in unserer Shell aktiviert. Es wird ausdrücklich empfohlen, immer die neueste Version von NPM zu verwenden, damit beim Erstellen der NODE_MODULES uns keine bösen Überraschungen kommen:

Jetzt besitzen wir die aktuellste Node und NPM Version und können nun mit den Zusammenstellen der Pakete beginnen…

 

Übrigens:

Sollte die Installation der “node_modules” fehlschlagen oder der Ablauf der Skripte erscheint fehlerhaft, so kann ein

Abhilfe schaffen und den NPM-Zwischenspeicher aufräumen. Ein zweiter Versuch des vorherigen Befehles sollte dann zum Erfolg führen…

 

Wenn NodeJS für die Assets-Kompilierung benötigt wird (in Form von z.B. Gulp oder Bower), speziell für Bild-Transformationen (Größe, Kompressionrate, Farbkanal-Änderungen) im Zusammenhang mit SASS/SCSS und es kommt dabei ein Skript-Fehler heraus, dann diese beiden Befehlszeilen eingeben:

Damit werden die Skripte aller Bildänderungen wieder ausgeführt.

Require.JS :: Scripte einbinden

01.) Die Datei “r.js” in das HTML-Template einbinden.

02.) In einer Konfigurationsdatei die Pfade und Ladeabhängigkeiten definieren. Diese Datei dann per

in den Scope laden.

 

Die Pfade sind das ausschlaggebende Merkmal aller Plugins! Diese müssen explizit an die jeweilige Website-Struktur angepasst werden.

 

Dieses Beispiel der “config.js” zeigt die Pfade dieser Website:

 

03.) Anschließend wird die Haupt-Javascript-Datei aufgerufen, in dem alle möglichen Plugins nach belieben verwendet werden:

 

 

Wer sich zB. die Require.JS Konfiguration von Awebgo (ehem. Loopshape) ansehen möchte, kann es unter diesen folgenden Link tun: main.js

 

Aufgerufen wird die Datei über folgende Scriptanweisung:

 

Weiterführende Informationen gibt es auf der Hauptseite von Require.JS: http://requirejs.org/docs/api.html

Treeline.io • Create a NodeJS app with a browserinterface

Treeline.io ist eine webbasierte Steuerungs-Oberfläche zum Erstellen einer NodeJS-Applikation basierend auf dem JS-Content-Management-System “SailsJS”.

Hier geht’s zur Website: Treeline.io

Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete
Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete
Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung
Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung
Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt
Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt