Skip to content

Instantly share code, notes, and snippets.

@lorenrogers
Last active March 10, 2016 19:00
Show Gist options
  • Save lorenrogers/c8ef25c6a34c9dafdb7e to your computer and use it in GitHub Desktop.
Save lorenrogers/c8ef25c6a34c9dafdb7e to your computer and use it in GitHub Desktop.
// Background variables
var startRotationDegrees = -13;
var scrollDistance = 0.5; //higher numbers move it farther
var background_size = $(window).width();
var background_delay = 2000;
// Background initialize
setbackgroundposition();
$(window).scroll( setbackgroundposition );
$(window).resize( setbackgroundposition );
$("#background").delay(background_delay).fadeIn( 3000, "swing" );
function resetbackgroundsize(){
$("#background").css("height", background_size);
};
function setbackgroundposition(){
resetbackgroundsize();
// Figure out the image center height
var image_center_height = $(window).width()/2;
// Calculate % scrolled (0-1)
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var winwidth = $(window).width();
var scrolled = (wintop/(docheight-winheight));
// for 1/3 size, use y = -1/3 x + 2/3
// for 1/4 size, use y = -1/2 x + 3/4
// var y = (-(1/2) * scrolled) + (3/4);
var scalar = 0.15; // an offset for the page
var y = (-(1-(scalar*2)) * scrolled) + (1-scalar);
var position = y * winheight - (winwidth/2);
$('#background').css('top', position + 'px');
};
// Background rotation
jQuery.fn.rotate = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
$({countNum: startRotationDegrees * 10000}).delay(background_delay).animate({countNum: 0}, {
duration: 7000,
easing:'easeOutExpo',
step: function() {
$("#background").rotate(this.countNum/10000);
resetbackgroundsize();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment