How to create scroll triggered slide box for a webpage?

How to create scroll triggered slide box for a webpage?

Sat, 09/24/2016 - 10:54
Posted in:
0 comments

On many websites, you might have noticed a box sliding in from a right side bottom of a webpage at near to the end of page content. That slide box contains some text which leads to more clicks from a visiting user. Like this

Slidebox bottom right

 

In this article, we are going to create same exit intent functionality for the website and uses of this functionality over other methods.

What is use of slidebox over other exit intent techniques?

The main motive behind using exit intent technique is to improve the conversion rate of a website. Slidebox does the same here. We get some special advantages by using this functionality over exit intent popup. Here are those advantages -

  • Many users hate exit-intent popups because it mostly interrupts user while reading content. Slide box doesn't interrupt as much as popup and user notice it make conversions.
  • From the year 2017, Google algorithm is going to punish mobile pages in ranking if the page shows content covering popups. So slide box will be alternative for this issue because it just covers a small part of  a mobile window.
  • My personal opinion is a user most likely to click slide box links if he is really interested in our website's content. This way you can build a loyal customer base for your website.

So lets get jump into it. 

View Demo     Download Source

HTML code

In your HTML page code, you need to add a selector on which we can trigger an action of slideout with jquery. You can add selector class or id for any of present tag or create new div like this -

<div id="theTarget"><!-- Box slides when user reach at this point --></div>

Then you have to add following HTML code for slide box.

<div id="slidebox">
  <a class="close"></a>
  <p><!-- Header --></p>
  <h3><!-- Link title --></h3>
  <a class="more">Read More >></a>
</div>

The link element with the class close will give the user the option to close the box and it will not appear again until user reloads a page. You can use browser cookies to ensure that box will not appear for more period of time.

CSS code

Following css code should be for id slidebox 

#slidebox {
    width: 400px;
    height: 125px;
    padding: 10px;
    background-color: #c0d6c0;
    border-top: 3px solid #000;
    position: fixed;
    bottom: 0px;
    right: -430px;
    box-shadow: -2px 0px 5px #aaa;
}

As you can see I have hidden slide box by adding negative value to the right. We can make it visible by jquery with slide effect. 

Text elements, more link, and close link will have the following CSS -

#slidebox p,
a.more {
    font-size: 11px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #555;
}
a.more {
    cursor: pointer;
    color: #000;
}
a.more:hover {
    text-decoration: underline;
}
a.close {
    background: url('../images/box_close.png') no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
}
a.close:hover {
    background: url('../images/box_close_hover.png') no-repeat;
}

For close button, we have used an image.

Jquery Code

Before adding custom jQuery code check if the jQuery library is added previously if not then add it before the custom code. Add following jquery code before the body end tag.

$(function() {
  $(window).scroll(function() {
    /* when reaching the element with id "theTarget" we will slide a box. Let's get the distance from the top to the element */
    var distanceTop = $('#theTarget').offset().top - $(window).height();

    if ($(window).scrollTop() > distanceTop)
      $('#slidebox').animate({
        'right': '0px'
      }, 300);
    else
      $('#slidebox').stop(true).animate({
        'right': '-430px'
      }, 100);
  });

  /* remove the slidebox when clicking the cross */
  $('#slidebox .close').bind('click', function() {
    $(this).parent().remove();
  });
});

We got the distance of target element from the top of a page. By using scroll action as a behaviour trigger we slid out a box with smooth animation. You can use slide up animation instead on this. For that, you have to hide box at bottom in CSS code and in jquery animate function you have to make bottom: 0px

And it's done!

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The content of this field is kept private and will not be shown publicly.