[Support request] Banner image slide-in (Elements Hook + CSS)

[Jan]

Hi David,

I’d like a container with background image and button to slide in from the right and keep its position (fixed) while scrolling up and down.

This is the source reference I’m using -> see “Use CSS3 2D transform to avoid performance issues (mobile)”

First I added this script to an elements Hook (wp_footer)

<script>
var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');

$toggle.addEventListener('click', function() {
    var isOpen = $slider.classList.contains('slide-in');

    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});
</script>

Secondly, I created this structure of Generate Blocks on the page.

Then I added this CSS to the Customizer/Additional CSS:

/* Slide-in Banner - Settings */

#slider {
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

Two questions: How can I…

A) …make the inner container to move in from the right, but then stay adjacent to the right border of the screen?
B) …fix the container vertically to keep it visible while scrolling up and down?

–> see Screenshot

Any advice is much appreciated.

Thanks in advance.

Best,
Jan

[David]

Hi there,

hmmm… maybe something like this:

#banner {
    position: fixed;
    top: 50%;
    transform: translate3d(100%, -50%, 0); 
    right: 0;
    width: 400px;
    z-index: 100000;    
}

This will fix the #banner to the right hand edge of the screen.
This positions the top of the container half way down the screen: top: 50%;
and this: transform: translate3d(100%, -50%, 0); does two things:

1. TranslatesX 100% to push the container off the screen.
2. TranslatesY -50%M to vertically center the container.

This keeps the container out of the way. And you will just need to animate the #slide eg. translateX(-100%); to bring it into the viewport.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jan]

Hi David,

Thanks for getting back. The banner works just fine on Desktop now.

As far as tablet I’d like the banner to appear…

– in a different width and

…and on mobile I’d like

– the banner to take a position in-line with text and
– take in the 100% of the page width

How would you adjust the following CSS to achieve that?

/* Slide-in Banner - Settings */

#banner {
    position: fixed;
    top: 50%;
    transform: translate3d(100%, 40%, 0); 
    right: 0;
    width: 450px;
    z-index: 100000;    
 }

@media(min-width: 769px) (max-width: 1199) {
    #banner {
      display: flex;
      position: -webkit-sticky;
      width: 300px;    
    }
}

@media(max-width: 768px) {
    #banner {
        display: none;
    }
}

Thanks,
Jan

[David]

Hmmm…

you will need to begin by defining your media queries for example.
If you did this:

@media(min-width: 1024px) {
    #banner {
        position: fixed;
        top: 50%;
        transform: translate3d(100%, 40%, 0);
        right: 0;
        width: 450px;
        z-index: 100000;
    }
    #slider {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }

    .slide-in {
        animation: slide-in 0.5s forwards;
        -webkit-animation: slide-in 0.5s forwards;
    }

    .slide-out {
        animation: slide-out 0.5s forwards;
        -webkit-animation: slide-out 0.5s forwards;
    }
}

So its only on 1024px size or above that you:

a) position fix the #banner
b) translate the #slider position
c) load the slide-in and slide-out animtations

That way by default the #banner should remain inline for smaller devices.
If that works then we can take a look at the tablet and mobile sizes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jan]

Hi David,

ok, I get a sense of how your are going about the solution.

It is working fine on Desktop 😉

Let’s move on to Tablet and Mobile: The Banner is inline, which is great. How can we make it slide-in and remain there while scrolling down?

Best,
Jan

[Fernando]

Hi Jan,

The script you have is for an onclick event. Do you already have a script for on scroll events? If not, here’s an example from Codepen: https://codepen.io/newrya/pen/oNqXrrm

There’s also other examples your can try in Codepen as well.

[Author]

Posts