Question

Footer reveal on scroll

2 months ago
13 June 2024
5 replies
114 views

Hi there Unbouncers,

I am building a lite version of my company website using Unbounce. With it not being a campaign page, it requires header and footer components with various links to aid navigation.

I’ve been trying, unsuccessfully, to achieve a footer reveal/slide-out on-scroll effect similar to this:

https://codepen.io/rileyjshaw/pen/kxMoRW

I’m applying custom css to the footer and pre-footer sections on a stylesheet:

<style>

  /* Pre-footer section */
  #lp-pom-block-156 {
    position: relative;
    z-index: 1;
  } 

  /* Footer section */ 
  #lp-pom-box-602 {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }

 </style>

I am struggling to get the footer section with its various logos and links to sit under the section blocks and their backgrounds. Is it even possible to set the z-index for a section block?

Has anyone had any success with this type of effect on Unbounce pages? Any help would be greatly appreciated!!

5 replies

Userlevel 4

Hi @AlastairB ,

This is pretty interesting to me. Let me try it on my Unbounce section. If I can get it done, I’ll share the code.

Thanks

Userlevel 1

Fantastic @Md_Mahinur_Khan , thank you! Apologies, I see I posted the original question twice by mistake.

Userlevel 1

Ok, the way Unbounce structures the “lp-positioned-content” div class adjacent to the “lp-pom-block” div class, i.e. the page content and the sections, makes this too tricky for me to figure out using the z-index method.

I figured out a work around though, using on-scroll animation. Unfortunately, I don’t think it is supported on all browsers currently. Biggest exclusion is Safari/Apple :( Hopefully they’ll come to the party soon! Also a bit jumpy on mobile, so I just excluded it.

Here’s the stylesheet that’s working for me in Chrome:

<style>

  /*
  1) Create footer container (replace #lp-pom-box-602), sized and aligned identically to footer section
  2) Move all footer content into footer container
  3) Apply on-scroll animation to footer container upon entry into viewport
  4) Calibrate animation to translate up and crop footer container from top by height of the container (replace 400px) 
  */

  :root {
    --footerHeight: 400px;
  }

  @media (min-width: 600px) {
    @supports (animation-timeline: view()) {
      #lp-pom-box-602 {
        animation: footerReveal linear;
        animation-timeline: view();
        animation-range: entry;  
      }  
    }
  }

  @keyframes footerReveal {
    0% {
      transform: translate3d(0, calc(-1 * var(--footerHeight)), 0);
      clip-path: inset(var(--footerHeight) 0px 0px 0px);
    }
    100% {
      transform: translate3d(0, 0, 0);
      clip-path: inset(0px 0px 0px 0px);
    }
  }

  /* Prefixes for wider browser support */

  @-webkit-keyframes footerReveal {
    0% {
      -webkit-transform: translate3d(0, calc(-1 * var(--footerHeight)), 0);
      clip-path: inset(var(--footerHeight) 0px 0px 0px);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      clip-path: inset(0px 0px 0px 0px);
    }
  }

  @-moz-keyframes footerReveal {
      0% {
          -moz-transform: translate3d(0, calc(-1 * var(--footerHeight)), 0);
          clip-path: inset(var(--footerHeight) 0px 0px 0px);
      }
      100% {
          -moz-transform: translate3d(0, 0, 0);
          clip-path: inset(0px 0px 0px 0px);
      }
  }

  @-o-keyframes footerReveal {
      0% {
          -o-transform: translate3d(0, calc(-1 * var(--footerHeight)), 0);
          clip-path: inset(var(--footerHeight) 0px 0px 0px);
      }
      100% {
          -o-transform: translate3d(0, 0, 0);
          clip-path: inset(0px 0px 0px 0px);
      }
  }

  @-ms-keyframes footerReveal {
      0% {
          -ms-transform: translate3d(0, calc(-1 * var(--footerHeight)), 0);
          clip-path: inset(var(--footerHeight) 0px 0px 0px);
      }
      100% {
          -ms-transform: translate3d(0, 0, 0);
          clip-path: inset(0px 0px 0px 0px);
      }
  }


</style>

Userlevel 4

Hi @AlastairB, Is it possible to share the Unbounce file to me? Your above code doesn’t work on my Unbounce page. So would be better if i can take a look direct on your Unbounce page.

And i’ve tried with some other codes. It’s not working somehow. So i think i can try on your code in your page.

Userlevel 4

I tried with this code, but still no luck :(

<style>
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

#lp-pom-box-311 {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    background-color: #333; /* Adjust background color as needed */
    color: white; /* Adjust text color as needed */
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1000;
}

#lp-pom-box-311.active {
    transform: translateY(0);
}

#lp-pom-box-311 .footer-content {
    padding: 20px;
}
</style>

<div id="lp-pom-box-311">
    <div class="footer-content">
        <!-- Your footer content here -->
        <p>This is the footer content.</p>
    </div>
</div>

<script>
document.addEventListener('scroll', function () {
    var footerReveal = document.querySelector('#lp-pom-box-311');
    var scrollPosition = window.scrollY + window.innerHeight;
    var pageHeight = document.documentElement.scrollHeight;

    if (scrollPosition >= pageHeight) {
        footerReveal.classList.add('active');
    } else {
        footerReveal.classList.remove('active');
    }
});
</script>

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded