Ein HTML Synthesizer mithilfe von Audiolet.js

Ein rudimentärer Versuch einen Javascript-Audio-Synthesizer zu erstellen. Es handelt sich noch um eine recht frühe Version, die ich gerne noch um einige Funktionen erweitern möchte, damit daraus irgendwann vielleicht mal ein „vollwertiger“ Synthesizer entsteht.

Veröffentlicht in Javascript, Musik

FontAwesome: Pulsierendes Herz

FontAwesome ist klasse, wenn man mal schnell Icons haben möchte. Unkompliziert einzubinden und flexibel in der Anwendung. In den Stylesheets von FontAwesome sind bereits einige wenige nützliche Animationen mit dabei (fa-spin, fa-pulse), aber man kann sich sehr einfach weitere, sinnvolle Helfer-Klassen definieren, wie zum Beispiel hier:

Folgender zusätzlicher SCSS-Code wurde dafür verwendet:

.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}

Hinweis: Damit die CSS-Animation browser-übergreifend funktioniert braucht man in manchen Browsern immer noch Vendor-Prefixes: vgl. caniuse.com

Veröffentlicht in CSS, Font, FontAwesome

Nur mit CSS: Akkordeons mit animiertem Plus-Minus-Symbolen

Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

<div>
  <input type=checkbox >
  <div class="accordion-content"></div>
</div>
.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}
Veröffentlicht in CSS, UI, Web

Onlinepartei – Social Politplatform wieder online!

http://onlinepartei.eu

Source-Code auf Github: https://github.com/grilly86/onlinepartei/

Veröffentlicht in Community, Web

Planeten und Gravitation mit three.js

http://codeblock.at/planets

(ThreeJS ist eine 3D-Bibliothek für JavaScript mit Canvas, SVG oder WebGL Unterstützung)

Veröffentlicht in Javascript, ThreeJS

jquery.knobby.js – Drehknöpfe für Javascript

jquery.knobby.js ist ein jQuery-Plugin zum einfachen Erstellen von Drehknöpfen, so wie diese:

knobby-bright

knobby-dark

Ein Aufruf von $("input[name=...]).knobby(); wandelt ein HTML-Input in einen runden Button um, der sich durch kreisende Bewegungen mit gedrückter Maustaste oder auch mit einem Finger auf Touch-Geräten verstellen lässt.

Features

Es wird eine kleine Anzahl an Attributen unterstützt: min, max, step und turn. Die Attribute min und max geben die Grenzen vor – der Wert von max sollte größer sein als min damit der Knopf funktioniert.

Mit step lassen sich die kleinstmöglichen Schritte einstellen. Zum Beispiel step="10" für in Zehner-Schritten oder step=".5" damit der Wert auf ein halbes genau gerundet wird.

Mit dem turn-Attribut lässt sich die Anzahl der kompletten Umdrehungen festlegen. Standard ist dabei eine ganze Umdrehung also turn=“1″. Mit einem Wert von turn=".5" lässt der Drehknopf nur noch eine halbe Umdrehung zu und bei turn="10" zehn ganze Umdrehungen.

So lässt sich die benötigte Genauigkeit auf eine Vielzahl von Anwendungsfällen einstellen: für kleine Werte mit wenigen Zwischenschritten reicht ein niedrigerer turn – für eine breite Skala mit vielen Zwischenschritten ist vielleicht turn="4" besser geeignet.

Die Größe lässt sich nun mit dem Size-Attribut auch dynamisch ändern: size="(Button-Radius in em)"

In Planung ist derzeit noch eine Option für logarithmische Drehknöpfe (sodass höhere Werte zu größeren Intervallen führen). Außerdem soll das plugin bald auch noch multi-touch-fähig werden!

Die Benutzung kann man auf der Demo-Seite ausprobieren und den gesamten Quellcode zum Download findet man in der neuesten Version bei Github.

 

Veröffentlicht in Javascript, jQuery, UI, Web

CSS Background Image: Base64-Noise-Generator

Der Base64-Noise-Generator ist ein Online-Tool zum Erstellen von Base64-CSS-Background-Noise-PNGs:

base64-noise-generator

base64-noise-generator

Bild-Abmessungen, Farben und Stärke des Rauschens lassen sich frei definieren. Standardmäßig ist 8-Bit Farbtiefe aktiviert – es lässt sich auch auf 24-Bit umstellen, das ist aber nicht empfohlen:
Die 8-Bit-Variante ist meist um mehr als 50 Prozent kleiner, und da es bei einem Übergang zwischen 2 Farben nie mehr als 255 Abstufungen geben kann ist die Bild-Qualität identisch.

Die Zufalls-Funktion ist noch nicht ganz optimal. Verbesserungsvorschläge sind gern gesehen.
Aber ich denke man kann dem Generator schon damit ganz brauchbare Ergebnisse abgewinnen, wenn mann ein wenig herum-konfiguriert.


Update: Den Source-Code des Tools findet man auch auf Github.

Veröffentlicht in CSS, Tools, Web Getagged mit: , ,

Transpozr – Chord-Sheets transponieren

Transpozr ist eine kleine Web-Anwendung mit der sich Akkorde (samt Lyrics) ganz einfach transponieren lassen.

transpozr

http://codeblock.at/transpozr/

Dazu die Akkorde in das linke Feld einfügen, in der Mitte bei den Plus- und Minus-Buttons die gewünschte Anzahl der Halbtonschritte einstellen und auf der rechten Seite erscheinen dann die transponierten Chords.

Das JavaScript-Programm, befindet sich in einer frühen Version. Aber leistet zumindest mir schon jetzt gute Dienste.

Veröffentlicht in Tools, Web Getagged mit: , , ,
Mit der Verwendung dieser Website stimmen Sie zu, dass personalisierbare Cookies für Analysezwecke gespeichert werden.