Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 28, 2016 19:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/28daa7ba0513ff2bd87e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/28daa7ba0513ff2bd87e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Feb 28, 2016.
    390 changes: 390 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,390 @@
    <!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>
    52 changes: 52 additions & 0 deletions jsbin.roqiqedipa.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    /* 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%;
    }
    98 changes: 98 additions & 0 deletions jsbin.roqiqedipa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@
    /* 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();
    }