jQuery demo

README.md

jQuery demo

Credits

• LoversInJapan

Dependencies

• jQuery
• jQuery Easing Plugin (version 1.3)

Cakefile

fs = require('fs')
{print} = require('util')
{spawn} = require('child_process')

build = (callback) ->
  coffee = spawn('coffee', ['-c', '-o', './js', './js'])
  jade = spawn('jade', ['-P', '-O', './', './'])
  stylus = spawn('stylus', ['./css'])

  coffee.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  coffee.stdout.on 'data', (data) ->
    print(data.toString)

  coffee.on 'exit', (code) ->
    callback?() if code is 0

  jade.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  jade.stdout.on 'data', (data) ->
    #print(data.toString)

  jade.on 'exit', (code) ->
    callback?() if code is 0

  stylus.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  stylus.stdout.on 'data', (data) ->
    #print(data.toString)

  stylus.on 'exit', (code) ->
    callback?() if code is 0

task 'build', 'Build CoffeeScript, Jade, & Stylus', ->
  build()

task 'watch', 'Watch CoffeeScript & Stylus', ->
  # FIXME: These processes will be conflicted
  coffee = spawn('coffee', ['-w', '-c', '-o', './js', './js'])
  stylus = spawn('stylus', ['-w', './css'])

  coffee.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  coffee.stdout.on 'data', (data) ->
    print(data.toString())

  stylus.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  stylus.stdout.on 'data', (data) ->
    #print(data.toString())

task 'open', 'Open index.html', ->
  spawn('open', 'index.html')
  invoke('watch')

demo.coffee

#! coffeescript

# サルでもわかる jQuery ライヴコーディング
# [Yu Inao](http://twitter.com/japboy) in 2012

$ = jQuery

$ ->
  Window =
    width: 0
    height: 0
    update: ->
      @width = $(window).width()
      @height = $(window).height()
      $('#window').trigger('update')
    draw: ->
      $('#window').text("#{@width} x #{@height}")

  Mouse =
    cx: 0
    cy: 0
    px: 0
    py: 0
    move: 0
    center: 0
    update: (ev, win) ->
      center = win.width / 2
      @px = @cx
      @py = @cy
      @cx = ev.clientX
      @cy = ev.clientY
      @move = @cx - @px
      @center = @cx - center
      $('#mouse').trigger('draw')
      $('#filter').trigger('draw')
    draw: ->
      $('#mouse').text("(#{@cx}, #{@cy})")
      $('#move').text("#{@move}")
      $('#center').text("#{@center}")

  Filter =
    fadeOut: ->
      $('#filter').fadeOut(1000, @fadeIn)

    fadeIn: ->
      $('#filter').fadeIn(3000)

    fade: ->
      @fadeOut()

  class Ball
    width: 10
    height: 10
    types: [
      './img/gradient-ball-a.svg'
      './img/gradient-ball-b.svg'
      './img/gradient-ball-c.svg'
      './img/gradient-ball-d.svg'
    ]

    constructor: ->
      unit = Math.round(Math.random() * 125)
      @width = unit
      @height = unit

    draw: (sy, dy, width) ->
      el = $(document.createElement('img'))
      el.attr
        src: @types[Math.round(Math.random() * 3)]
        width: @width
        height: @height
      .css
        left: "-#{@width}px"
        marginTop: "-#{@height / 2}px"
        position: 'absolute'
        top: "#{sy}px"
      .animate
        left: "#{width}px"
        top: "#{dy}px"
      ,
        duration: 6000 + width
        easing: 'easeInOutCirc'
        complete: ->
          $(@).fadeOut 'slow', ->
            $(@).remove()
      $('#playground').append(el)

  $('#mouse').on 'draw', (ev) ->
    Mouse.draw()

  $('#window').on 'update', (ev) ->
    Window.draw()

  $(window).on 'resize', (ev) ->
    Window.update()

  $(document).on 'mousemove', (ev) ->
    Mouse.update(ev, Window)
    Filter.fade()

  Window.update()

  setInterval ->
    rand = Math.ceil(Math.random() * 200) - Math.ceil(Math.random() * 200)
    sy = Mouse.py + rand
    dy = Mouse.cy + rand
    (new Ball()).draw(sy, dy, Window.width)
  , 300

demo.css

body {
  background-color: #fff;
  background-image: url("../img/gradient.svg");
  background-size: cover;
  overflow: hidden;
}
#filter {
  background-image: url("../img/dot.svg");
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
#debug {
  background-color: #fff;
  border: 1px solid #c8c8c8;
  bottom: 10px;
  font-family: monospace;
  font-size: smaller;
  padding: 9px;
  position: absolute;
  right: 10px;
  z-index: 2;
}
#debug ul {
  margin: 0;
  padding: 0;
}
#debug ul li {
  margin: 0;
  margin-left: 1.5em;
  padding: 0;
}

demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サルでもわかる jQuery ライヴコーディング</title>
    <meta name="author" content="Yu Inao">
    <meta name="rights-standard" content="pd">
    <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.min.css">
    <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="./css/demo.css">
  </head>
  <body>
    <div id="filter"></div>
    <div id="playground"></div>
    <div id="debug">
      <ul>
        <li id="mouse">mouse pos</li>
        <li id="move">move</li>
        <li id="center">center</li>
        <li id="window">window size</li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="UTF-8"></script>
    <script src="./js/jquery.easing.1.3.js" charset="UTF-8"></script>
    <script src="./js/demo.js" charset="UTF-8"></script>
  </body>
</html>

demo.jade

!!! 5
html
  head
    meta(charset='utf-8')
    title サルでもわかる jQuery ライヴコーディング
    meta(name='author', content='Yu Inao')
    meta(name='rights-standard', content='pd')
    link(rel='stylesheet', href='http://normalize-css.googlecode.com/svn/trunk/normalize.min.css')
    link(rel='shortcut icon', type='image/x-icon', href='./img/favicon.ico')
    link(rel='stylesheet', href='./css/demo.css')
  body
    div#filter
    div#playground
    div#debug
      ul
        li#mouse mouse pos
        li#move move
        li#center center
        li#window window size
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', charset='UTF-8')
    script(src='./js/jquery.easing.1.3.js', charset='UTF-8')
    script(src='./js/demo.js', charset='UTF-8')

demo.js

// Generated by CoffeeScript 1.3.3
(function() {
  var $;

  $ = jQuery;

  $(function() {
    var Ball, Filter, Mouse, Window;
    Window = {
      width: 0,
      height: 0,
      update: function() {
        this.width = $(window).width();
        this.height = $(window).height();
        return $('#window').trigger('update');
      },
      draw: function() {
        return $('#window').text("" + this.width + " x " + this.height);
      }
    };
    Mouse = {
      cx: 0,
      cy: 0,
      px: 0,
      py: 0,
      move: 0,
      center: 0,
      update: function(ev, win) {
        var center;
        center = win.width / 2;
        this.px = this.cx;
        this.py = this.cy;
        this.cx = ev.clientX;
        this.cy = ev.clientY;
        this.move = this.cx - this.px;
        this.center = this.cx - center;
        $('#mouse').trigger('draw');
        return $('#filter').trigger('draw');
      },
      draw: function() {
        $('#mouse').text("(" + this.cx + ", " + this.cy + ")");
        $('#move').text("" + this.move);
        return $('#center').text("" + this.center);
      }
    };
    Filter = {
      fadeOut: function() {
        return $('#filter').fadeOut(1000, this.fadeIn);
      },
      fadeIn: function() {
        return $('#filter').fadeIn(3000);
      },
      fade: function() {
        return this.fadeOut();
      }
    };
    Ball = (function() {

      Ball.prototype.width = 10;

      Ball.prototype.height = 10;

      Ball.prototype.types = ['./img/gradient-ball-a.svg', './img/gradient-ball-b.svg', './img/gradient-ball-c.svg', './img/gradient-ball-d.svg'];

      function Ball() {
        var unit;
        unit = Math.round(Math.random() * 125);
        this.width = unit;
        this.height = unit;
      }

      Ball.prototype.draw = function(sy, dy, width) {
        var el;
        el = $(document.createElement('img'));
        el.attr({
          src: this.types[Math.round(Math.random() * 3)],
          width: this.width,
          height: this.height
        }).css({
          left: "-" + this.width + "px",
          marginTop: "-" + (this.height / 2) + "px",
          position: 'absolute',
          top: "" + sy + "px"
        }).animate({
          left: "" + width + "px",
          top: "" + dy + "px"
        }, {
          duration: 6000 + width,
          easing: 'easeInOutCirc',
          complete: function() {
            return $(this).fadeOut('slow', function() {
              return $(this).remove();
            });
          }
        });
        return $('#playground').append(el);
      };

      return Ball;

    })();
    $('#mouse').on('draw', function(ev) {
      return Mouse.draw();
    });
    $('#window').on('update', function(ev) {
      return Window.draw();
    });
    $(window).on('resize', function(ev) {
      return Window.update();
    });
    $(document).on('mousemove', function(ev) {
      Mouse.update(ev, Window);
      return Filter.fade();
    });
    Window.update();
    return setInterval(function() {
      var dy, rand, sy;
      rand = Math.ceil(Math.random() * 200) - Math.ceil(Math.random() * 200);
      sy = Mouse.py + rand;
      dy = Mouse.cy + rand;
      return (new Ball()).draw(sy, dy, Window.width);
    }, 300);
  });

}).call(this);

demo.styl

body
  background-color: rgb(255,255,255)
  background-image: url('../img/gradient.svg')
  background-size: cover
  overflow: hidden

#filter
  background-image: url('../img/dot.svg')
  height: 100%
  left: 0
  position: absolute
  top: 0
  width: 100%
  z-index: 1

#debug
  background-color: rgb(255,255,255)
  border: 1px solid rgb(200,200,200)
  bottom: 10px
  font-family: monospace
  font-size: smaller
  padding: 9px
  position: absolute
  right: 10px
  z-index: 2

#debug ul
  margin: 0
  padding: 0

#debug ul li
  margin: 0
  margin-left: 1.5em
  padding: 0

dot.svg

gradient-ball-a.svg

gradient-ball-b.svg

gradient-ball-c.svg

gradient-ball-d.svg

gradient.svg