Skip to content

Instantly share code, notes, and snippets.

@lesjames

lesjames/index.html

Created September 9, 2012 04:33
Show Gist options
  • Save lesjames/3682599 to your computer and use it in GitHub Desktop.
Save lesjames/3682599 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<div class="spotlight"></div>
<div class="shiv"></div>
Raw
script.js
// spotlight
$(window).bind('scroll.spotlight', function() {
var bodyPos = $(window).scrollTop();
$('.spotlight').css('background-position', '-80px ' + bodyPos * -.5 + 'px, 80px ' + bodyPos * -.25 + 'px');
});
Raw
style.scss
@import "compass";
.spotlight {
position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 40;
@include background(
radial-gradient(circle, transparentize(black, 1), transparentize(black, .1) 300px),
radial-gradient(circle, transparentize(black, 1), transparentize(black, .1) 300px)
);
background-attachment: fixed;
background-position: -80px 0, 80px 0;
}
.shiv { height: 10000px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment