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

    Public APIs

  1. Old Twitter API [Broken. Needs update to new API]
  2. Delicious API
  3. Instagram API V1 - displays recent images featuring a given hashtag (deprecated)
  4. Flickr API - takes optional user id (view source)
  5. Tumblr API - using static data to bypass oAuth server code
  6. Google Maps API Examples
  7. Google Maps API Test
  8. Google Maps API Zooming in [Refresh a couple of times for full effect]
  9. Google Maps API Flyover Teleporter
  10. Google Maps API Address to Coordinates [Currently Broken]

    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