A simple CoffeeScript parallax responsive image implementation

parallax.coffee

class Parallax
  options =
    velocity: 15
  
  constructor: ->
    @imgs = ($ '.parralax img')
    @offset = 0
    
    @prepareImages()
    @bindListeners()
  
  prepareImages: ->
    for img in @imgs
      img = ($ img)
      img.offset = img.offset().top
      @imgs[_i] = img
  
  scrollParallax: (direction) ->
    for img in @imgs
      val = (img.offset - window.scrollY) / options.velocity
      img.css(y: val)
  
  bindListeners: ->
    ($ document).on 'scroll', =>
      offset = window.scrollY
      direction = if offset > @offset then 'down' else 'up'
      
      @scrollParallax direction
      @offset = offset

$ ->
  parallax = new Parallax()

stylehseet.scss

.illustration {
  overflow: hidden;
  
  img {
    margin: -6% 0;
    width: 100%;
    height: auto;
  }
}

template.slim

.illustration.parralax
  = image_tag "highlight-open-bg.jpg", { retina: true }