IML 400 Code Examples

    Basics

  1. Reading Report Template
  2. Minimal Template
  3. Self referential example
  4. Img and Hover
  5. Background Property Hover Test
  6. Landing Page layout left justified
  7. Landing Page layout center Justified, Fixed Width Grid
  8. Landing Page layout left Justified, Variable Width Grid
  9. Landing Page layout full page list
  10. Tab navigation across multiple pages using lists and inline display
  11. Left menu navigation across multiple pages using lists
  12. Extremely simple tabs template

    CSS

  1. CSS Transforms Hexagons
  2. CSS Transitions

    Javascript and JQuery

  1. Array Shuffle
  2. Object based pop-ups and Object based video pop-ups
  3. Live inputs using contenteditable
  4. String Manipulation replacing specific words in a text
  5. String Manipulation Character Stream
  6. Event binding
  7. Simple Video Background
  8. Slideshow background
  9. Sticky Menu

    JQuery UI

  1. A sortable grid
  2. Accordion Template
  3. Fading slideshow
  4. Swiping slideshow

    JQuery Plugins

  1. Video Background with Drop down Menu using Tubular
  2. Video Background using Tubular
  3. Image Slideshow using Supersized
  4. JQuery transit plugin

    HTML5 <canvas>

  1. Clock
  2. Cellular automata
  3. Transformation stack
  4. Drawing pad

    SVG and <canvas>

  1. SVG 1 - SVG 2 - using TwoJS
  2. Tweening - using TwoJS
  3. 2D Particle raster tool - example 1 - example 2 - using PaperJS

    WebGL and ThreeJS

  1. 3D Particle raster tool - using ThreeJS
  2. Script loader and sketches - using ThreeJS
  3. Candy shader - using ThreeJS

    Web VR

  1. Basic Google Chrome Cardboard Boilerplate - using ThreeJS. Works on WebGl-enabled mobile browsers
  2. Basic MozVR Firefox / Oculus Rift Boilerplate - using ThreeJS. Requires Firefox nightly build
  3. Simple MozVR Firefox / Oculus Rift web content browsing mockup - using ThreeJS. Rrequires Firefox nightly build. Warning: slow to load. Sometimes needs to reload
  4. Simple scene with cubemap implemented for three different platforms:

    Audio and Web Audio

  1. Audio Responsive Square
  2. Document scroll sound controls