How to center align/center parallax scrolling content?

Question

I am using a simple parallax scrolling effect however I am running into two problems.

I cannot have the #background stay centered while zooming in and out. If i change the position to relative it will, but it needs to remain fixed to create the parallax effect.
the #nav container is sitting above the background and if i completely remove the #nav container the background will drop to the bottom of the page. I would like the #nav bar to sit on top of the background ultimately creating the same idea in this website: http://www.falve.co.nz/collection/

Below is my code

<div id="page-wrap">
<div id="background"><img src="../images/COVER PHOTO.JPG" width="97%" height="97%"></div>
<nav id="nav">Nav</nav>
<div id="main">"MAIN BODY</div>

CSS

#page-wrap{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto; 
width: 100%;
}


#nav {
margin: 0;
height: 0px;
background: #fff;
position: relative;
}

#main {
margin: 1000px 0 0 0;
height: 1200px;
background: #fff;
position: relative;
}

#background {
position: fixed;
margin: auto;
left: 50px;
width: 98%;
height: 97%;
}

JS

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.stellar.min.js"></script>

<script>$(function() {
$(window).on('scroll', function() {
    $('#background').css('margin-top', $(window).scrollTop() * -.3);
});
});
</script>

Biggy · Accepted Answer · 2015-02-14 17:10:56Z

2

Option #1 (related to your code):

There are some basics missing. For example closing div of page-wrap.

Basically you can set a background for your header and play with it.

With little conditions you can do the same trick with the nav

if ($(this).scrollTop() > 200) {
    $("#nav").fadeOut();
} else {
    $("#nav").stop().fadeIn();
}

See your Example

Option #2 (Recommended):

I would recommend using a special plugin (skrollr) for parallax related stuff. You can do a lot more with lot more options with individual support. There is a tutorial section as well.

I hope I helped you with my first answer here.

answered Feb 14, 2015 at 17:10

Biggy

1806 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to center align/center parallax scrolling content?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related