diff --git a/static/js/about.js b/static/js/about.js index 78c9ccf..4540369 100644 --- a/static/js/about.js +++ b/static/js/about.js @@ -4,6 +4,10 @@ var lastVertPos = $(window).scrollTop(); +/* + * Scroll `div#img-[1-4]` at a greater speed than the text, producing a + * parallax effect. +*/ $(window).scroll(function(e){ var currVertPos = $(window).scrollTop(); var delta = currVertPos - lastVertPos; @@ -13,3 +17,30 @@ $(window).scroll(function(e){ }); lastVertPos = currVertPos; }); + +/* + * Make the dimensions of the vimeo video fluid. +*/ +(function adjustVimeoDimensions(){ + var iframe = $("iframe#vimeo")[0]; + var videoRatio = (iframe.height / iframe.width) * 100; + + iframe.style.position = "absolute"; + iframe.style.top = "0"; + iframe.style.left = "0"; + iframe.width = "100%"; + iframe.height = "100%"; + + iframe.style.height = ""; + iframe.style.width = ""; + + var wrap = document.createElement("div"); + wrap.className = "fluid-vids"; + wrap.style.width = "100%"; + wrap.style.position = "relative"; + wrap.style.paddingTop = videoRatio + "%"; + + var iframeParent = iframe.parentNode; + iframeParent.insertBefore(wrap, iframe); + wrap.appendChild(iframe); +}()); diff --git a/static/sass/about.sass b/static/sass/about.sass index 1d93dca..8dbb670 100644 --- a/static/sass/about.sass +++ b/static/sass/about.sass @@ -25,32 +25,36 @@ div.bg background: url(../img/about/bg2.png) no-repeat background-size: cover height: $img-height + 300 - top: 450px + top: 1150px img-3 background: url(../img/about/bg3.png) no-repeat background-size: cover height: $img-height + 300 - top: 1250px + top: 2050px img-4 background: url(../img/about/bg4.png) no-repeat background-size: cover height: $img-height + 400 - top: 2500px + top: 3200px div.section background-color: white border: 1px solid $baseColor2 margin-bottom: 200px margin-top: 300px - padding-bottom: 50px + padding-bottom: 80px padding-top: 20px overflow: hidden top margin-top: 0px + iframe#vimeo + border: 1px solid $baseColor3 + margin-top: 40px + div.centered font-size: 110% line-height: 150% diff --git a/templates/about.html b/templates/about.html index 426be57..44683b7 100644 --- a/templates/about.html +++ b/templates/about.html @@ -8,7 +8,6 @@ {{ assets.tag("lib/jquery.min.js") }} {{ assets.tag("main.css") }} {{ assets.tag("about.css") }} - {{ assets.tag("about.js") }} = endblock = block after_body @@ -18,70 +17,74 @@