Skip to main content

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!!

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


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


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>

 


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. 


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