Skip to content

Instantly share code, notes, and snippets.

@samuelbeek
Last active August 29, 2015 13:58
Show Gist options
  • Save samuelbeek/10229286 to your computer and use it in GitHub Desktop.
Save samuelbeek/10229286 to your computer and use it in GitHub Desktop.
Full Screen Bootstrap Section Animation
Animating a section to full screen in with jquery:
A few notes:
- This was made in 5 minutes; it can be a little sloppy.
- You need to import JQuery in your page.
- It'll probably work with non bootstrap sites too, I haven't had time to test it.
- You need to bind the goFullScreen() function to some kind of action.
- This Gist is far from finished. Things I hope to add in the future include:
- Leave full screen
- Instead of moving the navbar, or some other element up. Diynamically select everything prior to the current sectino
- Test it
var goFullScreen = function() {
//select everything, in my case the navbar that's above the section and move it upwards.
$('.navbar').animate({marginTop: "-50px"}, 1000);
//make sure you can't scroll. If you want scrolling enabled. Skip this step.
$('body').addClass('noscroll');
//calculate height of the seciton
var windowHeight = (getBrowserSize()[1]);
var backgroundHeight = windowHeight + 50;
//animate the section to that height
$('#section-full-screen').animate({height: videoBackgroundHeight }, 1000);
}
//get browser size
function getBrowserSize() {
var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}
else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}
else if (document.body) {
theHeight=document.body.clientHeight;
}
return [theWidth,theHeight];
}
body.noscroll {
position: fixed;
overflow-y: hidden;
overflow-x: hidden;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment