[mccabec123]

I'm looking for someone to explain (with examples) on how to have shutters open and close to transition between different sections of a parallax website.

The structure of my website is as such:

    <div id="home" class="parallax-cont">
    </div>
    <div class="seperator"></div>
    <div id="about-us" class="parallax-cont">
    	<div id="about-content" class="generic">
    		<div class="title">This is the title</div>
    		Hello, this is where the content for Mancini Young Photography's about us section will go.
    	</div>
    </div>
    <div class="seperator"></div>
    <div id="portfolio" class="parallax-cont">
    	
    </div>
    <div class="seperator"></div>
    <div id="contact" class="parallax-cont">
    	<div id="contact-us-header">
    		<img src="/img/logo.png" />
    	</div>
    	<div id="contact-us-form">
    		<form name="contact-us" method="POST" action="">
    			<input class="form-control" type="text" placeholder="Name" class="contact-form" />
    			<input class="form-control" type="text" placeholder="Email" class="contact-form" />
    			<input class="form-control" type="text" placeholder="Company Name" class="contact-form" />
    			<input class="form-control" type="text" placeholder="Website" class="contact-form" />
    			<input class="form-control" type="text" placeholder="Telephone No." class="contact-form" />
    			<input class="form-control" type="textarea" placeholder="Message" class="contact-form" />
    			<input type="submit" class="form-control" />
    		</form>
    	</div>
    </div>
    <div class="seperator"></div>
    <div id="blog" class="parallax-cont">
    	<div class="previous-button"></div>
    	{[BLOG_CONTENT]}
    	<div class="next-button"></div>
    </div>

The css is like so:

    html, body, html a, html p, html h1, html h2, html h3, html span, a, h1, p, h2, h3, h4 {
    	margin: 0;
    	padding: 0;
    	-webkit-font-smoothing: antialiased;
    	outline: 0;
    }
    a {
    	color: #A8A496;
    	text-decoration: none;
    	font-style: italic;
    	outline: 0;
    }
    a:hover {
    	color: #A8A496;
    	text-decoration: none;
    	outline: 0;
    }
    a:link {
        	color: #A8A496;
    	text-decoration: none;
    	outline: 0;
    }
    
    a:visited {
        	color: #A8A496;
    	text-decoration: none;
    	outline: 0;
    }
    a:active {
    	color: #A8A496;
    	text-decoration: none;
    	outline: 0;
    }
    pre {
    	background: none;	
    	margin: 0;
    	border: none;
    	color: #A8A496;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 100%;
    }
    body {
      	height: 100%;
    	background: #0c0c0c;
    }
    #blog_container {
    	margin-top: 0px;
    	border-radius: 5px;
    }
    #postContainer {
    	float: left;
    	background: #dadada;
    	border-radius: 4px;
    	background-image: url("/img/about-repeat.jpg");
    	background-repeat: repeat;
    	border: solid #dadada 1px;
    	box-shadow: 1px 2px 3px #0c0c0c;
    	font-size: 98%;
    	color: #A8A496;
    	width: 750px;
    	height: auto;
    	padding: 30px;
    	margin-left: auto;
    	margin-right: auto;
    	background-clip: padding-box;
    	border: 4px solid rgba(255,255,255,.2);
    	border-radius: 3px;
    	box-shadow:
    		0 0 1px rgba(255,255,255,.8),
    		0 0 3px rgba(0,0,0,.8),
    		1px 1px 0 rgba(0,0,0,.8) inset,
    		-1px -1px 0 rgba(0,0,0,.8) inset;
    	padding: 10px;
    }
    .post-icon {
    	float: right;
    	margin-top: -65px;
    	margin-right: 10px;
    	background-image: url("/img/coffee-mug.png");
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    	width: 35px;
    	height: 35px;
    }
    #postContainer img {
      	text-align: center;
      	width: auto;
    	max-height: 20%;
    	max-width: 20%
        	margin-left: auto;
      	margin-right: auto;
        	cursor: pointer;
    	position: relative;
      	left: 50%;
    	z-index: 0;
      	/* 
      	Yep!
      	*/
      	transform: translate(-50%);
    }
    #postContainer p {
      	line-height: 100%;
    }
    #blog_container {
      	width: 750px;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: left;
    }
    .indent {
      	margin-left: 20px;
    	min-height: 400px;
    }
    .title {
      	color: #A8A496;
      	font-weight: bold;
    	font-size: 24px;
      	padding-left: 10px;
      	padding-bottom: 10px;
      	margin-bottom: 20px;
      	border-bottom: 2px solid #A69F88;
    }
    .profile_viewer_controls {
    	position:relative; margin:0 0 0 0; 
    	width:627px; height:auto; 
    	text-align:right; 
    	float:left; 
    	display: inline-block;
    }
    .footnote {
      	border-top: 2px solid #A69F88;
      	padding-top: 10px;
      	padding-left: 10px;
    }
    
    .right {
      	float: right;
    }
    #testimonials {
      	padding: 20px;
      	border-radius: 8px;
      	border: 1px solid #dadada;
      	margin-bottom: 15px;
      	box-shadow: 0px 2px 2px #0c0c0c;
    }
    .profile-picture {
        float: right;
        clear: left;
        font-family: "Sansation Light";
        font-size: 13px;
        background: #fafafa;
        border: 1px solid #dadada;
        border-radius: 3px;
        padding: 15px;
    }
    .badge-container {
        font-family: "Sansation Light";
        font-size: 13px;
        float: left;
        clear: left;
        width: 10%;
        background: #fafafa;
        border: 1px solid #dadada;
        border-radius: 3px;
        padding: 15px;
        text-align: left;
    }
    .team-member-desc{
        float: right;
        width: 63.91%;
        font-family: "Sansation Light";
        font-size: 13px;
        background: #fafafa;
        border: 1px solid #dadada;
        border-radius: 3px;
        padding: 15px;
    }
    .skills-desc{
        float: left;
        font-family: "Sansation Light";
        font-size: 13px;
        width: 63.91%;
        background: #fafafa;
        border: 1px solid #dadada;
        border-radius: 3px;
        padding: 15px;
    }
    .alias-desc{
        float: left;
        font-family: "Sansation Light";
        font-size: 13px;
        max-width: 40%;
        background: #fafafa;
        border: 1px solid #dadada;
        border-radius: 3px;
        padding: 15px;
    }
    
    .badge-container img {
        width: 60px;
        margin-left: 25%;
        margin-right: auto;
    }
    .profile-picture img{
        width: 157px;
        border-radius: 3px;
    } 
    #Alert {
      display: none;
      position: fixed;
      width: auto;
      height: auto;
      max-width: 80%;
      max-height: 80%;
      left: 10%;
      top: 10%;
      right: 10%;
      bottom: auto;
      
      padding: 16px;
      border: 16px solid #dadada;
      background-color: white;
      z-index:1002;
      -moz-opacity: 1.0;
      opacity:1;
      overflow: auto;
    
    }
    #Alert img{
      width: 100%;
      height: auto;
    }
    #blackout {
      display: none;
      position: fixed;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.8;
      opacity: .80;
      filter: alpha(opacity=80);
      
    }
    
    #sidebar {
      text-align: center;
      cursor: pointer;
      box-shadow: 1px 1px 4px #0c0c0c;
      border-radius: 3px 0px 0px 3px;
      padding: 0px 16px 10px 10px; 
      width: 10px;
      height: 22px;
      background: #fff; 
        position: fixed;
        right: 0; /* or right */
        top: 150px;
        bottom: 0;
        overflow: auto;
        z-index: 1000;
    }
    #header-container {
      position: fixed;
      box-shadow: 0px 4px 1px #dadada;
      background: #fff;
      width: 10px;
    }
    .overline {
      width: 22px;
      right: 4px;
      position: fixed;
      float: right;
      padding-top: 6px;
      padding-bottom: 5px;
      padding-left: 1px;
      padding-right: 2px;
      margin-top: 0px;
      background: #fff;
      height: 20px;
      border-bottom: 1px solid #524E42;
      margin-bottom: 10px;
    }
    .blog-post-element {
      margin-top: 4px;
      float: left;
      padding-bottom: 10px;
    }
    #blog-post-links {
      float: left;
      clear: both;
      width: 300px;
      margin-top: 20px;
      font-size: 14px; 
      text-decoration: underline;
      text-align: left;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    #blog-post-links a{
      text-decoration: underline;
    }
    #blog-post-links i{
      font-size: 12px;
    
    }
    .last-visited-link {
      font-size: 12px;
      word-wrap: break-word;
      width: 310px;
    }
    
    #blog-posts-icon {
      width: 22px;
      height: auto;
      float: left;
      margin-right: 0px;
      margin-bottom: 5px;
      padding-bottom: 5px;
    }
    #close-blog-posts-icon {
      display: none;
      width: 22px;
      height: auto;
      float: right;
      margin-right: 0px;
      margin-bottom: 5px;
      padding-bottom: 5px;
    }
    #blog-posts {
      float: left;
      padding-top: 4px;
      font-size: 16px;
      font-weight: bold;
      padding: 4px;
      margin-left: -20px;
      width: 140px;
      height: auto;
      padding-left: 0px;
    
    
    }
    .navigation {
    	position: fixed;
    	float: left;
    	z-index: 100;
    	margin: 0px;
    	height: 56px;
    	width: 100%;
    	padding: 0px 30px 0px 30px;
    	text-align: center;
    	max-height: 56px;
    	background: #3f3f3f;
    	box-shadow: 1px 2px 3px #545454;
    }
    .navigation-elements {
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	height: 100%;
    	margin-right: 50px;
    }
    .navigation li {
    	background: #26262B;
    	padding: 30px 4px 30px 4px;
    	list-style-type: none;
    	text-align: center;
    	box-shadow: 1px 2px 3px #0c0c0c;
    	float: right;
    	min-width: 6%;
    	max-width: 10%;
    	height: 100px;
    	max-height: 56px;
    	margin-top: -2px;
    	margin-left: 0px;
    	border: 1px solid #524E42;
    	border-radius: 2px;
    }
    .navigation li:hover {
    	box-shadow: none;
    }
    #logo-li {
    	border: none;
    	background: none;
    	box-shadow: none;
    	float: left;
    }
    #icon {
    	width: auto;
    	margin-top: -22px;
    	height: 40px;
    	padding: 0px 0px 0px 0px;
    }
    #footer {
    	float: left;
            clear: both;
    	z-index: 1;
    	min-height: 20%;
    	background: #26262B;
    	box-shadow: -1px -2px 8px #0c0c0c;
    	padding: 20px;
    	margin-top: 2572px;
            width: 100%;
    }
    #footer a {
    	color: #A69F88;
    }
    #main {
    }
    #inner-main {
    	height: 100%;
            width:100%;
    }
    #main-logo-container {
    	z-index: 5;
    	float: center;
    	width: 227px;
    	height: 300px;
    	margin-top: 10px;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url("/img/logo.png");
    	background-repeat: no-repeat;
    	background-position: 0px 0px
    	cursor: pointer;
    }	
    #left-side-logo-container {
    	z-index: 2;
    	float: left;
    	width: 100%;
    	height: 400px;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url("/img/logo.png");
    	background-repeat: no-repeat;
    	background-position: 0px 0px
    	cursor: pointer;
    }
    #right-side-logo-container {
    	z-index: 3;
    	float: right;
    	width: 100%;
    	height: 300px;
    	margin-top: -400px;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url("/img/logo.png");
    	background-repeat: no-repeat;
    	background-position: 100% 0px;
    	cursor: pointer;
    }
    #copyright {
    	float: left;
    	background: #0c0c0c;
    	color: #A69F88;
    	width: 100%;
    	padding-top: 10px;
    	padding-bottom: 80px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    #navigation-link.selected {
    	background: #A69F88;
    }
    #navigation-link.selected a {
    	color: #26262B;
    }
    #home {
    	background-image: url("/img/home.jpg");
    	background-repeat: no-repeat;
    	background-position: top left, left center;
    	background-size: 140% auto;
    }
    #about-us {
    	background-image: url("/img/about.png");
    	background-repeat: repeat, no-repeat;
    	background-position: center center;
    	background-size: auto auto;
    	
    }
    #blog {
    	background-image: url("/img/blog.jpg");
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: 148% auto;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 2%;
    }
    #portfolio {
    	background-image: url("/img/portfolio.jpg");
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: 140% auto;
    }
    #contact {
    	background-image: url("/img/contact.jpg");
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: 138% auto;
    }
    .parallax-cont {
    	z-index: 1;
    	float: left;
    	clear: both;
    	height: 24%;
    	width: 100%;
    	padding-top: 8%;	
    	padding-bottom: 8%;
    	padding-left: 4%;
    	margin-bottom: 0px;
    }
    #FBL {
    	float: left;
    	height: 200%;
    	width: 100%;
    }
    #about-content {
    	padding: 10px;
    	height: 90%;
    	width: 52%;
    	background: #dadada;
    	border-radius: 4px;
    	background-image: url("/img/about-repeat.jpg");
    	background-repeat: repeat;
    	border: solid #dadada 1px;
    	box-shadow: 1px 2px 3px #0c0c0c;
    	background-clip: padding-box;
    	border: 4px solid rgba(255,255,255,.2);
    	border-radius: 3px;
    	box-shadow:
    		0 0 1px rgba(255,255,255,.8),
    		0 0 3px rgba(0,0,0,.8),
    		1px 1px 0 rgba(0,0,0,.8) inset,
    		-1px -1px 0 rgba(0,0,0,.8) inset;
    	padding: 10px;
    }
    .generic {
    	color: #A8A496;
    	font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
    	font-size: 16px
    }	
    .generic.title {
    	color: #A8A496;
      	font-weight: bold;
    	font-size: 24px;
      	padding-left: 10px;
      	padding-bottom: 10px;
      	margin-bottom: 20px;
      	border-bottom: none;
    }
    .generic::-moz-selection {
    	background: #fff2a8;
    }
    .generic::selection {
    	background: #fff2a8;
    }
    #firstBlockContainer {
    	float: left;
    	height: 1600px;
    	width: 100%;
    	margin-top: 4.55%;
    }
    #overlay {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: #000;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }
    #contact-us-header {
    	padding: 20px;
    	height: 40%;
    	width: 30%;
    	background: #dadada;
    	background-image: url("/img/about-repeat.jpg");
    	background-repeat: repeat;
    	margin-bottom: 30px;
    	background-clip: padding-box;
    	border: 4px solid rgba(255,255,255,.2);
    	border-radius: 3px;
    	box-shadow:
    		0 0 1px rgba(255,255,255,.8),
    		0 0 3px rgba(0,0,0,.8),
    		1px 1px 0 rgba(0,0,0,.8) inset,
    		-1px -1px 0 rgba(0,0,0,.8) inset;
    	padding: 10px;
    }
    #contact-us-header img {
    	height: auto;
    	width: 44%;
    	margin-left: 28%;
    	margin-right: 28%;
    }
    #contact-us-form {
    	padding: 20px;
    	height: 52%;
    	width: 30%;
    	background: #dadada;
    	background-image: url("/img/about-repeat.jpg");
    	background-repeat: repeat;
    	text-align: center;
    	background-clip: padding-box;
    	border: 4px solid rgba(255,255,255,.2);
    	border-radius: 3px;
    	box-shadow:
    		0 0 1px rgba(255,255,255,.8),
    		0 0 3px rgba(0,0,0,.8),
    		1px 1px 0 rgba(0,0,0,.8) inset,
    		-1px -1px 0 rgba(0,0,0,.8) inset;
    	padding: 10px;
    }
    #contact-us-form input {
    	width: 248px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 4px;
    }
    .previous-button {
    	float: left;
    	width: 10%;
    	height: 16%;
    	cursor: pointer;
    	background-image: url("/img/arrow-previous.png");
    	background-position: center center;
    	background-repeat: no-repeat;
    }
    .next-button {
    	float: right;
    	width: 10%;
    	height: 16%;
    	cursor: pointer;
    	background-image: url("/img/arrow-next.png");
    	background-position: center center;
    	background-repeat: no-repeat;
    }
    .seperator {
    	float: left;
    	width: 100%;
    	height: 2.6%;
    	background: #dadada;
    	background-image: url("/img/cameraicons.png"), url("/img/about-repeat.jpg");
    	background-repeat: repeat-x;
    	background-position: center center;
    	padding-top: 4px;
    	padding-bottom: 4px;
    	border-top: 2px solid #dadada;
    	border-bottom: 2px solid #dadada;
    }

All I want is the navigation to stay where it is and also have the shutters on top of everything opening to show the content, then when another link is clicked, the shutters close, move to the next section and open again.

I've thought about how I'm going to do it, and I feel like I should have two fixed divs on either side, that slide in and out from either side when a link is clicked. I've already achieved the autoscroll, I just need something to hide it when it moves. The website is for photography and the shutters could be a cameras aperture shutter closing and opening, but I don't even know where to begin to make that, if someone could demonstrate that, I'd be incredibly impressed, but if not, sliding shutters will do, as I'm just not sure if creating lens shutters is actually possible.

An example of the type of shutters I'm talking about(not the camera shutters) is something like this website does:

Shutter Example/Demo

I'm currently using jQuery on the site, so if your example requires it, that is fine. I'd quite like to know how to effectively make divs move in and out of view in jQuery anyway.

This post has been edited by mccabec123: 06 August 2014 - 06:20 AM

[mccabec123]

Nobody able to give me a hand with this then?

[laytonsdad]

Hello and sorry for the delay in response to your issue. So I looked at the example and it seems they are using a lot of different techniques. The site you provided is a single page application that is running off of CSS3 transitions, loads of Javascript and it utilizes the HTML 5 Canvas.

Now my question to you is:

What part of said example site are you trying to reproduce? Do you just want to make the animations for the "shutter" using traditional html and some styles or are you looking the utilize Javascript? A little more from you will help us help you.