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.

I added a Button in the first section. The button I used was Size Large (sm-page-widget-button-large), Style Outline (sm-page-widget-button-outline), Color Accent (sm-button-skin-accent), Align Center (sm-page-widget-button-align-center), Text Light(sm-page-widget-button-text-light). You will need to edit the (URL-Link-Here) for your own link. Other Button options are Small (sm-page-widget-button-small), Solid (sm-page-widget-button-solid), Default Color (sm-button-skin-default), Alignment Left (sm-page-widget-button-align-left), Alignment Right (sm-page-widget-button-align-right).

In section three I added an About section. You just need to use the Share feature and select the size (I used 200px x 300px) and copy the 'PHOTO ONLY' link where it says picture-here.png.

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>
  <div class="sm-page-widget-button-container sm-page-widget-button-align-center">
    <a class="sm-button sm-button-size-large sm-button-skin-accent sm-page-widget-button-large sm-page-widget-button-outline sm-page-widget-button-text-light" href="URL-Link-Here" type="button">My Button</a>
  </div>
</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--light about">
  <h2>Section Three</h2>
  <img src="picture-here.png" alt="Mr. Placeholder">
  <h3>Mr. Placeholder</h3>
  <p>Section three text here.</p>
</section>

CSS


/** 
* Create Parallax or Fixed Scrolling Website
************************************************/
p, 
h2,
h3 {margin: 0 auto 1.5rem;}

p {line-height: 1.5;}

.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: 100%;
}

.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;
  display: inline-block;
  width: 100%;
  font-size: 18px;
}

  .section h2 {font-size: 24px;}

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

  .section--light h2 {color: #616161;}

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

  .section--dark h2 {color: #dedede;}

.about p,
.about h3 {text-align: left;}

.about img {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}

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

  .container {background-attachment: scroll;}

}
/* Create Parallax or Fixed Scrolling Website End */