Guymon » Javascript

turn.js

admin — Wed, 08 Feb 2012 12:26:44 +0000

turn.js realisiert einen Pageflip mit jQuery. Das sieht schon sehr cool aus.

turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Uses Hardware acceleration

Works on tablets and smartphones

Easy to manipulate

Lightweight, only 15K

Possibly related posts (automatically generated)

Präsentationen mit impress.js

admin — Sat, 14 Jan 2012 15:46:29 +0000

Das Präsentations-Framework impress.js sieht wirklich gut aus!

Eine Demo kann man sich hier ansehen. Schick.

Possibly related posts (automatically generated)

Performance: Delayed Content

admin — Fri, 02 Dec 2011 12:06:31 +0000

Paul Hammond zeigt wie man die Performance einer Webseite mit “Delayed Content” deutlich verbessern kann.

Jeremy Keith hat diesen Gedanken aufgegriffen und wendet ihn auf den mobile first Ansatz an.

This technique has consequences for content strategy and information architecture. Instead of thinking about possible page content in a binary way as either ‘on the page’ or ‘not on the page’, conditional loading introduces a third ‘it’s complicated’ option.

This was just a simple example but I hope it illustrates that conditional loading could become an important part of the content-first responsive design approach.

Possibly related posts (automatically generated)

AliceJS

admin — Fri, 04 Nov 2011 10:11:53 +0000

AliceJS ist eine JavaScript Bibliothek die Hardware-Beschleunigung moderner Browser nutzt um flüssige Animationen zu erzeugen.

Die Animationen sind wirklich sehr flüssig. Aber, leider, leider:

The library is intended to work at least on Chrome (V13 or V14-beta because of hardware-acceleration requirements), iOS, and BlackBerry platforms.

Trotzdem sehr spannend.

Possibly related posts (automatically generated)

Interaktive Webseiten mit Tangle

admin — Tue, 01 Nov 2011 10:09:27 +0000

Tangle sieht sehr spannend aus:

Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately.

Insbesondere das letzte Beispiel auf der Seite ist cool.

Possibly related posts (automatically generated)

Drupal 7: JavaScript

admin — Wed, 14 Sep 2011 13:32:05 +0000

James O’Beirne gibt einige Tips wie man JavaScript Dateien in Drupal 7 sinnvoll einbindet und wie man JavaScript Funktionen mit Behaviors aufruft.

Instead, the better way to include foobar_block_accordionizer.js would be to find a hook that is unique to the foobar block and include the JS file in the body of that hook.

Possibly related posts (automatically generated)

Generating CSS animations in JavaScript

admin — Fri, 09 Sep 2011 15:08:07 +0000

Chris Heilmann zeigt wie man CSS animations in JavaScript abfragt und erstellt:

This checks if the browser supports animation without any prefixes. If it does, the animation string will be ‘animation’ and there is no need for any keyframe prefixes. If it doesn’t then we go through all the browser prefixes (to date ) and check if there is a property on the style collection called browser prefix + AnimationName. If there is, the loop exits and we define the right animation string and keyframe prefix and set animation to true. On Firefox this will result in MozAnimation and -moz- and on Chrome in WebkitAnimation and -webkit- so on. This we can then use to create a new CSS animation in JavaScript. If none of the prefix checks return a supported style property we animate in an alternative fashion.

Possibly related posts (automatically generated)

JavaScript Spinning Wheel

admin — Thu, 18 Aug 2011 15:47:48 +0000

Nett spin.js:

No images, no external CSS
No dependencies
Highly configurable
Resolution independant
Works in all major browsers, including IE6
Smaller than an animated GIF (2.8K minified, 1.7K gzipped)

Possibly related posts (automatically generated)

Cavas Links

admin — Fri, 12 Aug 2011 09:11:44 +0000

Das .net Magazine erklärt wie man einen Page Flip Effect mit Canvas nachbaut.

This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. Some of the rudimentary code, such as variable declarations and event listener subscription, has been left out of the snippets in this article, so remember to reference the tutorials files for the complete code.

Der Effekt ist nett, aber ich finde immer noch, dass man dafür zuviel Code schreiben muss. Trotzdem noch ein Canvas Link: Paper.js.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Possibly related posts (automatically generated)

HTML5 Cross Browser Polyfills

admin — Thu, 11 Aug 2011 11:20:54 +0000

Eine Polyfill Übersicht von Paul Irish gibt es im Modernizr Wiki.

So here we’re collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn’t have to change but users will move to the better, native experience cleanly.