Rudolph the red nosed reindeer

Hampelmann CSS Animation von Rudi

In diesem Pen kannst du dir ansehen, wie du aus einer einfachen PNG-Datei einen Rudi im Hampelmann-Style erstellen kannst. Verwendet werden lediglich einfaches HTML, CSS und eine PNG-Datei. Die Körperteile von Rudi werden mit der Hintergrund Clipping-Funktion (background-position) aus dem Bild ausgeschnitten bzw. maskiert.

Bei den Animationen handelt es sich um so genannte Keyframe Animationen.

See the Pen Rudolph the red nosed reindeer by Norbert Mesch (@itsnorbat) on CodePen.


rudi-the-rednosed-reindeer-separated

Das Bild mit den einzelnen Teilen der Figur kannst du dir in voller Auflösung herunterladen, indem du auf das kleine Vorschaubild rechts klickst.

Bilderrätsel für den Webbrowser

Das Bilderrätsel kannst du spielen indem du auf das Bild klickst oder als zip-Datei herunterladen und für nicht kommerzielle Zwecke auf deiner Website mit deinen eigenen Bilder veröffentlichen.

bilderraetsel

Demo auf YouTube

In diesem YouTube-Video kannst du dir das Spiel mit zwei Durchläufen ansehen.

Ändern der Bilder

filestructure-imgZum Ändern der Bilder speicherst du deine Bilder mit einer Auflösung von 200 x 200 px. Die sechs Bilder benennst du mit den Dateinamen in csn01.png bis csn06.png um und kopierst du sie in den Unterordner img. Die alten Bilder kannst du entweder vorher löschen oder beim kopieren einfach überschreiben.
Wenn du die Rückseite der Karten ändern möchtest, ersetzt du einfach im Verzeichnis img die Datei bg_fotomemo.png durch eine Datei deiner Wahl mit der Auflösung 200 x 200 px.

Anpassen der Farben

filestructureWenn du die Farben deines Spiels verändern möchtest benötigst du nur wenige CSS-Kenntnisse. Öffne hierzu die Datei style.css aus den Wurzelverzeichnis und nehme die Änderungen deiner Wahl vor.

Du kannst zum Beispiel den Spielhintergrund im body-Tag über das Attribut background ändern.

body{
 background:#080808;
 font-family: 'Quicksand', sans-serif;
 }

Hier wird die Hintergrundfarbe in einen Rot-Ton geändert.

body{
 background:#850404;
 font-family: 'Quicksand', sans-serif;
 }

SVG Pencil Animation mit animateMotion

In diesem Beispiel siehst du einige Animationsmöglichkeiten in SVG. Zur Animation habe ich folgende Elemente verwendet:

  • SMIL <animateMotion>-Element für den Animationspfad
  • CSS mit Keyframes für die weiße Schrift

Den Quelltext der animierten SVG-Datei kannst du dir mit einem rechten Mausklick auf das Bild (Seitenquelltext anzeigen) ansehen.

SVGPencilAnimation_1024Klicke bitte auf das Bild um die SVG-Animation in einem neuen Tab zu öffnen.

Um die Keyframe-Animation und die SMIL-Animation synchron zu starten, habe ich mit Hilfe von JavaScript der weißen Schrift beim Klick auf die Schaltfläche start writing… eine CSS-Class hinzugefügt.

<script type="text/javascript">
<![CDATA[
 function clickme(evt) {
 var element = document.getElementById("schrift");
 element.classList.add("animatedfont");
 }
]]></script>
<style>

Beispiel auf codepen.io

See the Pen SVG writing pen animation with by Norbert Mesch (@itsnorbat) on CodePen.

WP MobileWebAppViewer Plugin

Aufbau und Funktionsweise des Plugins

Funktionsweise WP MobileWebAppViewer
Funktion des WP-MobileWebAppViewer Plugins (SVG 7 kByte)

Mit dem Plugin lassen sich mobile Webapplikationen auf Seiten oder in Beiträge deines WordPress Blogs mittels Shortcode einfügen. Den Shortcode habe ich mit mehreren Attributen versehen. Wenn du überhaupt keine Attribute in den Shortcode [[webappviewer]] eingibst, wird nur ein Beispiel mit einem meiner kleinen WebAppSpiele angezeigt. Daher solltest du mindestens das Attribut src=“deineurl.xyz“ verwenden um deine gewünschte Seite in den Viewer zu laden.

Prezi Präsentation zum Plugin

 

Downloadmöglichkeiten

Download lokal  Download GitHub

Beispiel mit src-Attribut

Jeder Shortcode wird mit dem Namen des Shortcodes webappviewer in eckigen Klammern aufgerufen.

[[webappviewer src="http://m.mesch.de"]]

Beispiel mit outerstyle- und innerstyle-Attributen

Mit den outer- und innerstyle-Attributen kannst du über CSS verschiedene Layouts laden bzw. eigene Layouts erstellen. Bisher habe ich vier Styles erstellt. Das Flat Style ist das Standard-Layout und wird verwendet, wenn du kein outerstyle- und innerstyle-Attribut in deinem Shortcode verwendest.

  1. Flat Style: outerstyle=“deviceholderflat“, innerstyle=“devicedisplayflat“ (Standard)
  2. iPhone 6 Style: outerstyle=“deviceholderip6″, innerstyle=“devicedisplayip6″
  3. iPhone 5 Style: outerstyle=“deviceholderip5″, innerstyle=“devicedisplayip5″
  4. Samsung S6 Style: outerstyle=“deviceholders6″, innerstyle=“devicedisplays6″
[[webappviewer outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://m.mesch.de"]]

Beispiel mit width- und height-Attributen

Mit Hilfe der width- und height-Attribute kannst du die Breite und Höhe des iframe-Elements im Displaybereich (DIV-Element mit der Class innerstyle) angeben. Die Standardwerte sind: width=“375px“ und height=“667px“.

[[webappviewer width="320px" height="568px" outerstyle="deviceholderip5" innerstyle="devicedisplayip5" src="http://m.mesch.de"]]

Beispiel im iPhone 5 Mockup

[[webappviewer width="320" height="568" src="https://norbat.de/m3/" outerstyle="deviceholderip5" innerstyle="devicedisplayip5"]]

Beispiel im Samsung S6 Mockup

[[webappviewer width="380px" height="670px" outerstyle="deviceholders6" innerstyle="devicedisplays6" src="http://kamerunschaf.de"]]

Beispiel im iPhone 6 Mockup

[[webappviewer width="375px" height="667px" outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://getbootstrap.com"]]

Anzeige mobiler WebApps in WordPress

In diesem Beitrag zeige ich dir, wie du eine mobile WebApp in WordPress mittels DIV-Container und iFrame-Element darstellen kannst.

Grafik für das Mobilgerät

Du benötigst lediglich eine PNG-Grafik deines Smartphones oder Tablets mit transparentem Displaybereich. Ich habe hier mal ein Flat Mobile Mockup mit Illustrator erstellt. Der transparente Displaybereich ist 375px breit und 667px hoch.

Flat Mobile Mockup mit Bemaßung
Flat Mobile Mockup mit Bemaßung

Hier kannst du das Flat Mobile Mockup herunterladen.

Illustrator Datei

Flat Mobile Mockup ohne Bemaßung
Flat Mobile Mockup ohne Bemaßung

Kopieren der PNG-Datei und anpassen der style.css

Bevor du die style.css anpasst solltest du die PNG-Datei (hier bei mir FMM.png) auf deinen Webserver laden. Ich habe dazu in meinem eigenen Theme einen eigenen Ordner mit dem Namen img angelegt. Du kannst aber auch bei den Standard Themes (z.B. Twenty Thirteen) den images Ordner verwenden.

Die style.css deines Themes ergänzt du jetzt um folgende Klassen:

.mobileviewer{
 display: block;
 background: url("./img/FMM.png") no-repeat left top;
 width: 428px; /*Breite deiner PNG-Datei*/
 height: 854px; /*Höhe deiner PNG-Datei*/
 margin-bottom: 50px;
 padding-top: 21px;
}

.mobiledisplay{
 display: block;
 background: #FFFFFF;
 width: 375px;
 height: 667px;
 margin-top: 100px;
}

Einfügen der HTML-Elemente in den Beitrag

Im Textmodus deiner Seite oder deines Beitrages gibst du nun folgenden HTML-Code ein:

textmodus
Textmodus
<center>
<div class="mobileviewer">
  <div class="mobiledisplay">
    <iframe style="width: 375px; height: 667px; border: none;" src="https://deine.url"></iframe>
  </div>
</div>
</center>

Speichere deine Seite oder deinen Beitrag und schaue ihn dir auf deiner Seite an. Ein Ergebnis siehst du hier oder mit einem fotorealistischen iPhone 6 von Dave Stadler auf Dribbble hier:

Falls die WebApp nicht angezeigt wird, kann das an den Sicherheitseinstellungen deines Browsers liegen. In Google Chrome kannst du am rechten Ende der Adresszeile die Inhalte laden.

ChromeEinstellungen

Ich freue mich über deinen Kommentar!

jQuery Mobile Beispiel – MaMiMo Magic-Mind-Mobile

Willkommen in 2015!

Ich wünsche euch allen ein gesundes und friedvolles neues Jahr!

Über die Feiertage und den Jahreswechsel muss man sich neben all dem Rummel auch ein wenig mit dem Programmieren ablenken 😉

Hier ein kleines Beispiel für ein Spiel mit jQuery Mobile. Mangels Android Device habe ich es nur unter iOS getestet. Es sollte aber auch auf einem Androiden laufen. Viel Spaß dabei.

Im Browser auf dem PC kannst du am besten in den Entwicklermodus umschalten und die Displaygröße auf ein SmartPhone deiner Wahl umstellen. Sieht ein bisschen hübscher aus.
It’s (not) MAGIC…   just binary digit system!

Online auf deinem Endgerät spielen

Wenn Ihr das Spiel auf einem mobilen Endgerät spielen möchtet müsst Ihr diesen Link verwenden:

http://m.mesch.de

Wenn dir das kleine Spiel gefällt hinterlasse doch einfach einen Kommentar.

Impressionist

Hier findest du demnächst eine Einführung in das JavaScript Präsentationsframework impress.js. Das Framework wurde in der c’t Ausgabe 22/2012 kurz vorgestellt.

Das Framework nutzt die Möglichkeiten von Transformationen und Transitionen moderner Browser mit CSS3.

Du kannst dir den Quellcode bei github herunterladen.

Erste Gehversuche kannst du dir hier ansehen.

Startposition der Präsentation bestimmen

Und hier kannst du dir durch einen Klick auf die Grafik einen ganz bestimmten Schritt der Präsentation ansehen (…htm#/overview).

Presentation3x3

Automatisch laufende Präsentation

Ziemlich bald nach dem Studieren des Code-Beispiels hat mich interessiert, wie ich die Präsentation automatisch abspielen kann. Dazu findest du hier ein weiteres Beispiel. Im eingebetteten Script ist lediglich folgender Quelltext zu ergänzen.

Die Methode setInterval ruft hier die Funktion next() in einem festgelegten Zeitintervall von 5000 Millisekunden = 5 Sekunden auf.

setInterval ('impress().next()', 5000);