Custom Parallax Effect

Developer Support CMS Development
1

Hi. I am simplifying my company’s website. I came across a website made in Squarespace that uses what seems to be pop-ups and parallax scrolling for a minimal design. I am trying to figure out how to implement this on our site. I’ve looked into full-screen pop-ups, how to make a webpage function as a pop-up, how to implement parallax, etc. It seems there are plenty of possible solutions, and I am wondering if anyone has any recommendations or suggestions. I’m not a developer but can navigate around some light code or a tutorial. Thanks in advance!

2

Hi @KClement,

such effects are always custom solutions and can get out of hand quite easily. If you are not so familiar with code, got no developer by your side and don’t want to invest a lot of time (and therefore money) I recommend you to check out some of the premium marketplace themes.

I know that the POWER Theme (@Jnix284) got a parallax feature and Sprocket Rocket got a theme and a custom app which gives you Squarespace like experience but in HubSpot.

If you want to try creating a paralax hero solodev.com got a good documented tutorial for this.

In order to get this to work in HubSpot you need to:

  1. create a custom module via the design-Tools(Marketing → Files & Templates → Design-tools)
  2. paste the codes into the respective places
  3. implement HubSpot functionalities like images, text …
  4. save/publish
  5. use it on the page

Here’s an almost ready(you will need to add the functions on the right side of the module) code to use. Please note that I’ve reduced the code to just the hero

You’ll need:

  • simple text element “Headline”
  • simple text element “Subline”
  • simple text / rich-text element “Content”
  • image element “Background image” (you can also add this in the style fields in the right sidebar)

HTML+Hubl:

{% require_css %}
{# delete this if you don't want to use Roboto as font #}
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<style>
body .hero{
background: url("{{ module.background_image.src }}");
}
</style>
{% end_require_css %}

{% require_header %}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{% require_header %}

<section class="hero">
 <h1>{{ module.headline }}</h1>
</section>
<section class="content">
 <section class="ct_icon_box_section">
 <div class="container">
 <div class="ct-section_header ct-section_header--type2">
 <h2>{{ module.subline }}</h2>
 <div class="ct-section_header-description">{{ module.description }}</div>
</section>

CSS:

body .hero {
 position: fixed;
 z-index: 1;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-size: cover;
 height: 80vh;
 width: 100vw;
}
body .hero:before {
 content: '';
 height: 100%;
 width: 100%;
 height: 170vh;
 width: 100vw;
 background: rgba(44, 123, 183, 0.5);
 position: absolute;
}
body .hero h1 {
 position: relative;
 z-index: 1;
 font-family: 'Roboto Condensed', sans-serif; 
 color: white;
 text-align: center;
 font-size: 4rem;
 line-height: 4rem;
 text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
 max-width: 25rem;
 margin: 30vh auto 0;
}
body .content {
 position: absolute;
 z-index: 1000;
 top: 80vh;
 background: #faf8f8;
 width: 100%;
 box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15);
 border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ct_icon_box {
 margin-bottom: 50px;
}

.ct_icon_box_section {
 margin-bottom: 60px;
}

.ct-section_header {
 text-align: center;
 padding-top: 80px;
}

.ct-section_header h2 {
 font-size: 65px;
 font-size: 6.5rem;
 color: #291b07;
 font-family: 'Roboto Condensed', sans-serif;
 font-weight: bold;
 margin-bottom: 0;
}

.ct-section_header.ct-section_header--type2 h2 {
 font-size: 50px;
 font-size: 5rem;
 padding-bottom: 17px;
 padding-bottom: 1.7rem;
 font-family: 'Roboto Condensed', sans-serif;
}

.ct-section_header.ct-section_header--type2 .ct-section_header-description {
 font-size: 18px;
 font-size: 1.8rem;
 color: #2e2e2e;
 font-weight: 400;
 padding-bottom: 5px;
 padding-bottom: 0.5rem;
 font-family: 'Roboto Condensed', sans-serif;
 text-align: center;
}

.ct-section_header.ct-section_header--type2 .ct-section_header-separator {
 background-color: #0BB3E1;
}

note: If you’ve deleted the font line from HTML+Hubl area you have to delete all “font-family” informations from the CSS

JS:

$(document).ready(function(){
 $(window).scroll(function(e){
 parallax();
 });
 function parallax(){
 var scrolled = $(window).scrollTop();
 $('.hero').css('top',-(scrolled*0.0315)+'rem');
 $('.hero > h1').css('top',-(scrolled*-0.005)+'rem');
 $('.hero > h1').css('opacity',1-(scrolled*.00175));
 };
});

hope this helps

best,

Anton

3

Hi Anton,
Thank you so much. I greatly appreciate your recommendation. I’ve found a parallax theme to test, and am working on converting some modules from the old theme to be global. I’ll try out your solution and reach back out if I have any questions.

4

Hey @KClement,

you’re welcome.

Also a quick tipp: Most theme provider offer help/consultation for their theme. So you might get help from the theme provider - or the community. That’s what why we’re here :wink:

5

Dang, @Anton :fire::fire::fire: Thank you very much!

6

It’s a pleasure :smiling_face_with_sunglasses: