Create a Parallax or Fixed Scrolling SmugMug Website
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 */
This site and all of its contents are copyright © 2022 Images in the Backcountry / Mike Matenkosky – All rights reserved.
By using this site you agree to our Privacy Policy.