jQueryのプラグインを見よう見まねで作ってみた

index.js.coffee

jQuery ($)->
  $(".product .image").myScrollTrigger({offset:-300
  ,init:->
    $this=$(this)
    $this.css({marginLeft:"20px",opacity:0})
  ,appear:->
    $this=$(this)
    $this.transit({marginLeft:"0px",opacity:1},2000)
  })
  
  
  
  

jquery.myscrolltrigger.js.coffee

(($)->
  $.fn.myScrollTrigger=(options)->
    settings=$.extend({
      offset:0,
      init:->,
      appear:->,
    },options)
    return this.each ->
      that=this
      $that=$(that)
      settings.init.apply(that,[])
      $(window).on("load scroll resize",->
        elementTop=$that.offset().top
        elementHeight=$that.height()
        scrollTop=$(window).scrollTop()
        windowHeight=$(window).height()
        if scrollTop+windowHeight > elementTop+elementHeight+settings.offset
          unless $that.hasClass("appeared")
            settings.appear.apply(that,[])
            $that.addClass("appeared")
      )
)(jQuery)