parallax.coffee
1.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#
# OK, this is not really a parallax... I just want to see my content move
# somewhat faster than the background... hey, ho, let's go
#
window.App ||= {}
content_top = content_left = width_delta = height_delta = 0
App.init = ->
$('a[href*=\\#]').each ->
lpath = location.pathname.replace(/^\//,'')
tpath = this.pathname.replace(/^\//,'')
if lpath == tpath and
location.hostname == this.hostname and
this.hash.replace(/#/,'')
$targetId = $(this.hash)
$targetAnchor = $('[name=' + this.hash.slice(1) + ']')
$target = if $targetId.length
$targetId
else
if $targetAnchor.length
$targetAnchor
else
false
if $target
targetOffset = $target.offset().top
$(this).click ->
$("#nav li a").removeClass("active")
$(this).addClass('active')
$('html, body').animate({scrollTop: targetOffset}, 1000)
return false
App.scroll = ->
v_scroll = $(document).scrollTop()
section = Math.floor(v_scroll / $(window).innerHeight())
[section, section+1].forEach (section) ->
bg_pos = -((v_scroll-(section*$(window).innerHeight()))/2)
section_element = $($(".section")[section])
if section_element and section_element.css("background-image") != "none"
content = section_element.find(".content")
content.css("display", "none")
section_element.css(
"background-position",
"center " + bg_pos + "px")
content.css("display", "block")
$(document).on "page:change", ->
App.init()
$(window).on "scroll", ->
App.scroll()
# vim: set ts=2 sw=2: