JSFiddle

  • MooTools 2: MooFX 3D Transforms

    No-Library (pure JS), HTML, CSS, JavaScript

    (function($) {
    
        /* 
        MooFx has these 3 important methods:
        - style
        - animate
        - compute
        */
        
        
        $("#experiment").style({
            "perspective": "800px"
        });
    
        var cube = $("#cube");
    
        cube.style({
            "transform-style ...
  • CSS3 Animation: Skew

    Keeping it simple. A CSS3 3D skew effect...

    <div class="logo">
        <div class="color-1"></div>
        <div class="color-2"></div>
        <div class="text">JemWebDesign.nl</div>
    </div>
  • starfield.js #1 is the latest revision

    Recreate the infamous Windows 3.1 screensaver "Starfield" using raw JS and canvas. Done during #Freakend12 to test drawing some dumb stuff in canvas2d. now with 200% more requestAnimationFrame!

    /**
     * The stars in our starfield!
     * Stars coordinate system is relative to the CENTER of the canvas
     * @param  {number} x 
     * @param ...
  • bubbles

    YUI 3.3.0, HTML, CSS, JavaScript

    YUI().use('node', 'anim', 'anim-node-plugin', function(Y) {
    
        var o = Y.one('#o'),
            oW = o.get('offsetWidth'),
            oH = o.get('offsetHeight ...
  • Canvas Plasma effect

    Canvas Plasma effect

    ig = document.getElementById("c");
    ig.width = 320;
    ig.height = 240;
    
    // dammit opera...
    if (!("createImageData" in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.createImageData ...
  • JemWebDesign - Mieleke #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <body>
    <div id="logos">
      <a id="cube" href="https://developer.mozilla.org/en/HTML/HTML5">
        <img src="http://www.jemwebdesign.nl/gem32.png"  id="front" alt="MDN">
            <img src="http://www.jemwebdesign.nl/gem32.png" id="back" alt="JemWebDesign.nl">
      </a>
    </div>
    </body>
    </html>
  • iPhone Jemwebdesign #11 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="Layer0" style="position:absolute; width:800px; height:600px; z-index:0; left: 100px; top: 100px;">
        <img src="http://www.roykineez.nl/arnaud/wp-content/uploads/responsive/bg-iphone.png"/>
    </div>
    <div id="Layer1" style="position:absolute; width:800px; height:600px; z-index:1; left: 112px; top: 145px;">
        <iframe width="100%" height="100%" src="http://www.roykineez.nl" style="-webkit-transform:scale(0.2);-moz-transform-scale(0.2);" scrolling="no" border="0"></iframe>
    </div>