Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 28, 2016 19:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/28daa7ba0513ff2bd87e to your computer and use it in GitHub Desktop.
Save anonymous/28daa7ba0513ff2bd87e to your computer and use it in GitHub Desktop.
Download ZIP
Parallax backgrounds with centered content Parallax backgrounds with centered content // source http://jsbin.com/roqiqedipa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax backgrounds with centered content</title>
<meta name="description" content="Parallax backgrounds with centered content">
<style id="jsbin-css">
/* background setup */
.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%\9 !important;
}
/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
height:100%;
overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
height:auto;
min-height:100%;
}
/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
/* visual styles */
body{
margin:0;
font-family:sans-serif;
font-size:28px;
line-height:100px;
color:#ffffff;
text-align:center;
}
section {
background:#9ed100;
}
.not-fullscreen {
height:50%;
}
</style>
</head>
<body>
<div class="fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</div>
<div class="not-fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</div>
<section class="not-fullscreen">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</section>
<div class="fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_DSC_3274.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100" data-oriz-pos="100%">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</div>
<section class="fullscreen">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</section>
<div class="fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_9857.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
<div class="content-a">
<div class="content-b">
<br>Content overflow<br>Content overflow
<br>Content overflow<br>Content overflow
<br>Content overflow<br>Content overflow
<br>Content overflow<br>Content overflow
<br><br>
</div>
</div>
</div>
<div class="not-fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_8697.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</div>
<section class="fullscreen">
<div class="content-a">
<div class="content-b">
Centered content
</div>
</div>
</section>
<!-- include jQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script id="jsbin-javascript">
/* detect touch */
if("ontouchstart" in window){
document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
/* background fix */
$(".parallax").css("background-attachment", "fixed");
}
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){
var windowH = $(window).height();
$(".background").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// overflowing difference
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
// remaining height to have fullscreen image only on parallax
var remainingH = 0;
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
// set img values depending on cont
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();
/* set parallax background-position */
function parallaxPosition(e){
var heightWindow = $(window).height();
var topWindow = $(window).scrollTop();
var bottomWindow = topWindow + heightWindow;
var currentWindow = (topWindow + bottomWindow) / 2;
$(".parallax").each(function(i){
var path = $(this);
var height = path.height();
var top = path.offset().top;
var bottom = top + height;
// only when in range
if(bottomWindow > top && topWindow < bottom){
var imgW = path.data("resized-imgW");
var imgH = path.data("resized-imgH");
// min when image touch top of window
var min = 0;
// max when image touch bottom of window
var max = - imgH + heightWindow;
// overflow changes parallax
var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
top = top - overflowH;
bottom = bottom + overflowH;
// value with linear interpolation
var value = min + (max - min) * (currentWindow - top) / (bottom - top);
// set background-position
var orizontalPosition = path.attr("data-oriz-pos");
orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
$(this).css("background-position", orizontalPosition + " " + value + "px");
}
});
}
if(!$("html").hasClass("touch")){
$(window).resize(parallaxPosition);
//$(window).focus(parallaxPosition);
$(window).scroll(parallaxPosition);
parallaxPosition();
}
</script>
<script id="jsbin-source-css" type="text/css">/* background setup */
.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%\9 !important;
}
/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
height:100%;
overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
height:auto;
min-height:100%;
}
/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
/* visual styles */
body{
margin:0;
font-family:sans-serif;
font-size:28px;
line-height:100px;
color:#ffffff;
text-align:center;
}
section {
background:#9ed100;
}
.not-fullscreen {
height:50%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/* detect touch */
if("ontouchstart" in window){
document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
/* background fix */
$(".parallax").css("background-attachment", "fixed");
}
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){
var windowH = $(window).height();
$(".background").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// overflowing difference
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
// remaining height to have fullscreen image only on parallax
var remainingH = 0;
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
// set img values depending on cont
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();
/* set parallax background-position */
function parallaxPosition(e){
var heightWindow = $(window).height();
var topWindow = $(window).scrollTop();
var bottomWindow = topWindow + heightWindow;
var currentWindow = (topWindow + bottomWindow) / 2;
$(".parallax").each(function(i){
var path = $(this);
var height = path.height();
var top = path.offset().top;
var bottom = top + height;
// only when in range
if(bottomWindow > top && topWindow < bottom){
var imgW = path.data("resized-imgW");
var imgH = path.data("resized-imgH");
// min when image touch top of window
var min = 0;
// max when image touch bottom of window
var max = - imgH + heightWindow;
// overflow changes parallax
var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
top = top - overflowH;
bottom = bottom + overflowH;
// value with linear interpolation
var value = min + (max - min) * (currentWindow - top) / (bottom - top);
// set background-position
var orizontalPosition = path.attr("data-oriz-pos");
orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
$(this).css("background-position", orizontalPosition + " " + value + "px");
}
});
}
if(!$("html").hasClass("touch")){
$(window).resize(parallaxPosition);
//$(window).focus(parallaxPosition);
$(window).scroll(parallaxPosition);
parallaxPosition();
}
</script></body>
</html>
Raw
jsbin.roqiqedipa.css
/* background setup */
.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%\9 !important;
}
/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
height:100%;
overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
height:auto;
min-height:100%;
}
/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
/* visual styles */
body{
margin:0;
font-family:sans-serif;
font-size:28px;
line-height:100px;
color:#ffffff;
text-align:center;
}
section {
background:#9ed100;
}
.not-fullscreen {
height:50%;
}
Raw
jsbin.roqiqedipa.js
/* detect touch */
if("ontouchstart" in window){
document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
/* background fix */
$(".parallax").css("background-attachment", "fixed");
}
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){
var windowH = $(window).height();
$(".background").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// overflowing difference
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
// remaining height to have fullscreen image only on parallax
var remainingH = 0;
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
// set img values depending on cont
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();
/* set parallax background-position */
function parallaxPosition(e){
var heightWindow = $(window).height();
var topWindow = $(window).scrollTop();
var bottomWindow = topWindow + heightWindow;
var currentWindow = (topWindow + bottomWindow) / 2;
$(".parallax").each(function(i){
var path = $(this);
var height = path.height();
var top = path.offset().top;
var bottom = top + height;
// only when in range
if(bottomWindow > top && topWindow < bottom){
var imgW = path.data("resized-imgW");
var imgH = path.data("resized-imgH");
// min when image touch top of window
var min = 0;
// max when image touch bottom of window
var max = - imgH + heightWindow;
// overflow changes parallax
var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
top = top - overflowH;
bottom = bottom + overflowH;
// value with linear interpolation
var value = min + (max - min) * (currentWindow - top) / (bottom - top);
// set background-position
var orizontalPosition = path.attr("data-oriz-pos");
orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
$(this).css("background-position", orizontalPosition + " " + value + "px");
}
});
}
if(!$("html").hasClass("touch")){
$(window).resize(parallaxPosition);
//$(window).focus(parallaxPosition);
$(window).scroll(parallaxPosition);
parallaxPosition();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment