Create a Parallax or Fixed Scrolling SmugMug Website

Demo

Add a HTML/CSS Block and add the following to each section. You'll need to edit the headers, text and image urls.

Note: For smaller devices, 736px or smaller, the scrolling effect is disabled due to some devices not playing well with scrolling.

HTML


<div class="container container--image-01">
  <div class="container__text">
    <span class="container__border">Header Text Here</span>
  </div>
</div>

<section class="section section--light">
  <h2>Section One</h2>
  <p>Section one text here.</p>
</section>

<div class="container container--image-02">
  <div class="container__text">
    <span class="container__border transparent">Image Two Text</span>
  </div>
</div>

<section class="section section--dark">
  <h2>Section Two</h2>
  <p>Section two text here.</p>
</section>

<div class="container container--image-03">
  <div class="container__text">
    <span class="container__border transparent">Image Three Text</span>
  </div>
</div>

<section class="section section--dark">
  <h2>Section Three</h2>
  <p>Section three text here.</p>
</section>

CSS


/** 
* Create Parallax or Fixed Scrolling Website
*************************************************************/
.sm-page-widget .sm-page-widget-content {margin:0}

.container {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container--image-01 {
  background-image:
  url('image-url-here');
  min-height: 100vh;
}

.container--image-02 {
  background-image: url('image-url-here');
  min-height: 400px;
}

.container--image-03 {
  background-image: url('image-url-here');
  min-height: 400px;
}

.container__text {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 28px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.container__border {
  background-color: #151515;
  color :#fff;
  padding: 20px;
}

.container__border.transparent {background-color: transparent;}

.section {
  text-align: center;
  padding: 40px 80px;
}

.section--light {
  background-color: #f4f4f4;
  color: #666;
}

.section--dark {
  background-color: #353535;
  color: #ddd;
}

@media screen and (max-width: 736px) {

  .container {background-attachment:scroll;}

}