Full-Stack Engine

Custom parallax component with overlay using materialize css

Recently I created my wedding invitation page using materialize css, which is a wonderful CSS framework with several fancy components for graphical design. In particular, I love parallax, as it looks great and provides a modern still elegant touch for our design, as it's shown in the following image,

parallax-2

You can find the fiddle for this demo here

So let's see how to build this component, including a story component with a header, to add a warm message for our page readers.

Materialize CSS comes with a ready to use parallax component, where you can add a picture of our preference. As you can see in the documentation site,

<div class="parallax-container">
    <div class="parallax"><img src="images/parallax1.jpg"></div>
</div>

With only a couple of tags, we get a full functional parallax component. However, it looks even better if we add an overlayed text in front of the image, as well as an optional header in the upper corner for some quotes we wanted to add.
We achieve this adding a few lines,

<div class="parallax-container">
  <p class="white-text right-align header">
    lobortis feugiat vivamus
  </p>
  <div class="valign-wrapper h100">
    <h1 class=" white-text overlay center-align">
      Lorem ipsum dolor sit amet
    </h1>
    <div class="parallax grey lighten-1">
      <img src="images/parallax1.jpg">
    </div>
  </div>
</div>

Here, we added a few classes to help us accommodate elements properly on the screen, like right-align for the header and valign-wrapper for the main text in the center of the image. These classes are part of materialize, but we still need some extra classes to get elements arranged properly and modify the font styles, so we add the following style in CSS for the parallax,

.overlay {
  width: 100%;
}

.h100 {
  height: 100%;
}

.header {
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
  margin: 10px;
  text-rendering: optimizeLegibility;
}

.overlay,
.parallax-text {
  /*font-size: 80px;*/
  font-family: 'Lato', sans-serif;
  letter-spacing: .11em;
  font-size: 2.25em;
  text-rendering: optimizeLegibility;
}

h100 it's a helper for getting height 100% and guarantee the main text to be in the center of the screen, while the header defines the font styles.

For the story component, we add a few more classes for font styling and layout positioning,

.section {
  height: 400px;
}

.story-header {
  font-family: 'Lato', sans-serif;
  font-size: 28px;
}

p {
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px;
}

That's it. With very few lines of code, we get fantastic results for our next web design. Thanks for reading this post, I hope you enjoyed it. See you next time!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.