Parallax css

assets/static/css/style.css

@@ -19,23 +19,21 @@
 
 :root {
   --main-font: "Raleway", "DejaVu Sans", "Open Sans", "Liberation Sans", helvetica, arial, sans-serif;
-}
 
-html {
   background-color: #fff;
   background-color: var(--theme-bg-color, #fff);
   box-sizing: border-box;
   font-size: 18px;
 }
 
 @media screen and (max-width: 480px) {
-  html {
+  :root {
     font-size: 0.95em;
   }
 }
 
 @media screen and (max-width: 360px) {
-  html {
+  :root {
     font-size: 0.9em;
   }
 }
@@ -234,24 +232,45 @@ img {
   position: relative;
 }
 
-.fh5co-page {
-  overflow-x: hidden;
+#fh5co-container {
+  background: #fff;
+  background: var(--theme-bg-color, #fff);
+  height: 100vh;
+  overflow: hidden auto;
+  perspective: 300px;
+  scroll-behavior: smooth;
+}
+
+.parallax-group {
   position: relative;
-  z-index: 1;
+  transform-style: preserve-3d;
 }
 
-.hero-section {
+.parallax-layer {
+  inset: 0;
+  position: absolute;
+}
+
+.parallax-layer-base {
+  transform: translateZ(0);
+  z-index: 3;
+}
+
+.parallax-layer-back {
+  transform: translateZ(-300px) scale(2.01);
+  z-index: 2;
+}
+
+.hero-bg {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
-  box-shadow: inset -1px -11px 21px -15px rgb(0 0 0 / 75%);
-  min-height: 300px;
+  height: 100vh;
   position: relative;
 }
 
 .hero-section .fh5co-copy {
   height: 100%;
-  width: 100%;
 }
 
 .hero-section .fh5co-copy-inner {
@@ -554,10 +573,8 @@ img {
 }
 
 .body-section {
-  clear: both;
   padding-bottom: 4em;
   padding-top: 3em;
-  position: relative;
 }
 
 .body-subsection {
@@ -1315,11 +1332,6 @@ img {
   opacity: 0;
 }
 
-#fh5co-container {
-  background: #fff;
-  background: var(--theme-bg-color, #fff);
-}
-
 #fh5co-offcanvas,
 #fh5co-container,
 .fh5co-nav-toggle,

assets/static/js/main-singlelayout.js

@@ -21,16 +21,10 @@ https://github.com/spyder-ide/lektor-icon/blob/master/NOTICE.txt
   "use strict";
 
   const heroHeight = function () {
-    const headerHeight = $(".js-sticky").outerHeight();
-    if ($(window).outerWidth() >= 768) {
-      $(".js-fullheight-home").css(
-        "height",
-        `calc(100dvh - ${headerHeight}px)`
-      );
-      $(".hero-section").css("margin-top", `${headerHeight}px`);
+    if ($(window).outerWidth() > 768) {
+      $(".js-fullheight-home, .hero-section").css("height", "100vh");
     } else {
-      $(".js-fullheight-home").css("height", "50dvh");
-      $(".hero-section").css("margin-top", "0px");
+      $(".js-fullheight-home, .hero-section").css("height", "50vh");
     }
   };
 

templates/layout.html

@@ -184,69 +184,70 @@
 {%- block loader %}
 {%- endblock %}
 <div class="fh5co-page">
-  <div id="fh5co-container">
-    <div class="js-sticky fh5co-main-nav">
-      <div class="navbar px-4">
-        <div class="container-xxl">
-          <div class="fh5co-menu-1">
-            {%- if not (config.THEME_SETTINGS.nav_logo_path or config.THEME_SETTINGS.nav_logo_text) %}
-            {%- if config.THEME_SETTINGS.title %}
-            {%- set nav_logo_text = config.THEME_SETTINGS.title %}
-            {%- else %}
-            {%- set nav_logo_text = "Site Name" %}
-            {%- endif %}
-            {%- elif config.THEME_SETTINGS.nav_logo_text %}
-            {%- set nav_logo_text = config.THEME_SETTINGS.nav_logo_text %}
-            {%- else %}
-            {%- set nav_logo_text = '' %}
-            {%- endif %}
-            <div class="float-start">
-              <ul class="dropdown menu" data-dropdown-menu>
-                <li id="menu-logo">
-                  <a href="{{ '/' | url }}" class="d-flex-md align-items-center my-2">
-                    {%- if config.THEME_SETTINGS.nav_logo_path %}
-                    <img alt="Site Logo" src="{{ config.THEME_SETTINGS.nav_logo_path | asseturl }}">
-                    {%- endif %}
-                    {%- if nav_logo_text %}
-                    <span class="logo-text-container">
-                      <span class="logo-text">{{ nav_logo_text | safe }}&nbsp;{%- block section %}{%- endblock %}</span>
-                    </span>
-                    {%- endif %}
-                  </a>
-                </li>
-              </ul>
-            </div>
+  <div class="js-sticky fh5co-main-nav">
+    <div class="navbar px-4">
+      <div class="container-xxl">
+        <div class="fh5co-menu-1">
+          {%- if not (config.THEME_SETTINGS.nav_logo_path or config.THEME_SETTINGS.nav_logo_text) %}
+          {%- if config.THEME_SETTINGS.title %}
+          {%- set nav_logo_text = config.THEME_SETTINGS.title %}
+          {%- else %}
+          {%- set nav_logo_text = "Site Name" %}
+          {%- endif %}
+          {%- elif config.THEME_SETTINGS.nav_logo_text %}
+          {%- set nav_logo_text = config.THEME_SETTINGS.nav_logo_text %}
+          {%- else %}
+          {%- set nav_logo_text = '' %}
+          {%- endif %}
+          <div class="float-start">
+            <ul class="dropdown menu" data-dropdown-menu>
+              <li id="menu-logo">
+                <a href="{{ '/' | url }}" class="d-flex-md align-items-center my-2">
+                  {%- if config.THEME_SETTINGS.nav_logo_path %}
+                  <img alt="Site Logo" src="{{ config.THEME_SETTINGS.nav_logo_path | asseturl }}">
+                  {%- endif %}
+                  {%- if nav_logo_text %}
+                  <span class="logo-text-container">
+                    <span class="logo-text">{{ nav_logo_text | safe }}&nbsp;{%- block section %}{%- endblock %}</span>
+                  </span>
+                  {%- endif %}
+                </a>
+              </li>
+            </ul>
+          </div>
 
-            <div class="nav-container">
-              <div class="main-nav-container">
-                {%- block nav_main %}{%- endblock %}
-              </div>
+          <div class="nav-container">
+            <div class="main-nav-container">
+              {%- block nav_main %}{%- endblock %}
+            </div>
 
-              {%- if config.THEME_SETTINGS.nav_extralinks or (site.query('/') and (site.query('/') | selectattr('sort_key'))) %}
-              <div class="side-nav-container">
-                {%- if site.query('/') and (site.query('/') | selectattr('sort_key')) %}
-                {%- for page in site.query('/') | selectattr('sort_key') | sort(attribute='sort_key') %}
-                {%- if page.short_title %}
-                {%- set navlink_text = page.short_title %}
-                {%- else %}
-                {%- set navlink_text = page.path | replace('/', '') | replace('-', ' ') | replace("_", " ") | title %}
-                {%- endif %}
-                <a class="nav-link-internal{%- if page.special_link %} special-link{%- endif %}{%- if this.is_child_of(page.path) %} nav-link-active-section {{ this.path.split('@')[0] }} sep {{ page.path }} {%- if this.path.split('@')[0] == page.path %} nav-link-active-page{%- endif %}{%- endif %}" href="{{ page.url_path | url }}">{{ navlink_text }}</a>
-                {%- endfor %}
-                {%- endif %}
+            {%- if config.THEME_SETTINGS.nav_extralinks or (site.query('/') and (site.query('/') | selectattr('sort_key'))) %}
+            <div class="side-nav-container">
+              {%- if site.query('/') and (site.query('/') | selectattr('sort_key')) %}
+              {%- for page in site.query('/') | selectattr('sort_key') | sort(attribute='sort_key') %}
+              {%- if page.short_title %}
+              {%- set navlink_text = page.short_title %}
+              {%- else %}
+              {%- set navlink_text = page.path | replace('/', '') | replace('-', ' ') | replace("_", " ") | title %}
+              {%- endif %}
+              <a class="nav-link-internal{%- if page.special_link %} special-link{%- endif %}{%- if this.is_child_of(page.path) %} nav-link-active-section {{ this.path.split('@')[0] }} sep {{ page.path }} {%- if this.path.split('@')[0] == page.path %} nav-link-active-page{%- endif %}{%- endif %}" href="{{ page.url_path | url }}">{{ navlink_text }}</a>
+              {%- endfor %}
+              {%- endif %}
 
-                {%- if config.THEME_SETTINGS.nav_extralinks %}
-                {%- for nav_link in config.THEME_SETTINGS.nav_extralinks.replace(', ', ',').split(',') %}
-                <a class="nav-link-external" href="{{ nav_link.split(': ')[1] }}"> {{ nav_link.split(': ')[0] }}</a>
-                {%- endfor %}
-                {%- endif %}
-              </div>
+              {%- if config.THEME_SETTINGS.nav_extralinks %}
+              {%- for nav_link in config.THEME_SETTINGS.nav_extralinks.replace(', ', ',').split(',') %}
+              <a class="nav-link-external" href="{{ nav_link.split(': ')[1] }}"> {{ nav_link.split(': ')[0] }}</a>
+              {%- endfor %}
               {%- endif %}
             </div>
+            {%- endif %}
           </div>
         </div>
       </div>
     </div>
+  </div>
+
+  <div id="fh5co-container">
 
     {%- block body %}{%- endblock %}
 

templates/single-layout.html

@@ -15,22 +15,22 @@
   {%- if this.hero_image %}
   {%- set is_svg = this.hero_image.split('.')[-1].lower() in ['svg', 'svgz'] %}
   {%- if is_svg or this.hero_no_downscale %}
-  .hero-section {
+  .hero-bg {
     background-image: url("{{ this.hero_image | url }}")
   }
   {%- else %}
   {%- set hero_img_file = this.attachments.get(this.hero_image) %}
   {%- if hero_img_file.thumbnail %}
-  .hero-section {
+  .hero-bg {
     background-image: url("{{ hero_img_file.thumbnail(width=1920) | url }}")
   }
   @media ((min-device-width: 1921px) or ((min-device-width: 1281px) and (min-resolution: 102dpi)) or ((min-device-width: 961px) and (min-resolution: 152dpi))) {
-    .hero-section {
+    .hero-bg {
       background-image: url("{{ hero_img_file.thumbnail(width=3840) | url }}")
     }
   }
   @media ((max-device-width: 768px) and (((max-resolution: 100dpi) and (max-device-height: 1400px)) or ((max-device-height: 1050px) and (max-resolution: 150dpi)) or (max-device-height: 700px))) {
-    .hero-section {
+    .hero-bg {
       background-image: url("{{ hero_img_file.thumbnail(width=(hero_img_file.width * 700 / hero_img_file.height)) | url }}")
     }
   }
@@ -65,23 +65,26 @@
 {%- block body %}
 
 {%- if this.hero_image %}
-<div id="section-home" class="hero-section" data-section="home" data-stellar-background-ratio="0.5">
-  <div class="container">
-    <div class="row row-cols-1 row-cols-lg-2 g-0 justify-content-center justify-content-lg-start">
-      <div class="col">
-        <div class="fh5co-copy">
-          <div class="js-fullheight-home fh5co-copy-inner">
-            {%- if this.hero_title %}
-            <h1>{{ this.hero_title }}</h1>
-            {%- endif %}
-            {%- if this.hero_description %}
-            <h2>{{ this.hero_description | replace('<p>', '') | replace('</p>', '') | safe | trim }}</h2>
-            {%- endif %}
+<div id="section-home" class="hero-section parallax-group" data-section="home">
+  <div class="parallax-layer parallax-layer-base">
+    <div class="container">
+      <div class="row row-cols-1 row-cols-lg-2 g-0 justify-content-center justify-content-lg-start">
+        <div class="col">
+          <div class="fh5co-copy">
+            <div class="js-fullheight-home fh5co-copy-inner">
+              {%- if this.hero_title %}
+              <h1>{{ this.hero_title }}</h1>
+              {%- endif %}
+              {%- if this.hero_description %}
+              <h2>{{ this.hero_description | replace('<p>', '') | replace('</p>', '') | safe | trim }}</h2>
+              {%- endif %}
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div class="hero-bg parallax-layer parallax-layer-back"></div>
 </div> <!-- END hero-section -->
 {%- endif %}