Floating MonsterLink

Floating div containing a MonsterLink to trigger the appearance of an OptinMonster Lightbox or Canvas optin. Animates into view using jQuery.

by Erica Franz

HTML

<!-- Floating MonsterLink Style 1 -->
<div class="floating-monsterlink style1">
    <div class="floating-avatar"> 
        <span>&nbsp;</span>
    </div>
    <p class="floating-cta">Want to get 25,000 unique visitors a month?</p>
    <p class="floating-cta"> 
        <a href="#" class="manual-optin-trigger" data-optin-slug="oqxhwmovdrq4xzue">Click here to learn how</a> <!-- Update the data-optin-slug attribute with the slug of your own optin you want to load on click. -->
    </p>

    <!-- START close icon, remove to make Floating Bar permanent. Use with caution, not recommended to remove if loading on mobile devices. --> 
    <a href="#" class="float-close">x</a>
    <!-- END close icon -->

</div>

<!-- Floating MonsterLink Style 2 -->
<div class="floating-monsterlink style2">
    <div class="floating-avatar"> 
        <span>&nbsp;</span>
    </div>
    <p class="floating-cta">Want to get 25,000 unique visitors a month?</p>
    <p class="floating-cta"> 
        <a href="#" class="manual-optin-trigger" data-optin-slug="oqxhwmovdrq4xzue">Click here to learn how</a> <!-- Update the data-optin-slug attribute with the slug of your own optin you want to load on click. -->
    </p>

    <!-- START close icon, remove to make Floating Bar permanent. Use with caution, not recommended to remove if loading on mobile devices. --> 
    <a href="#" class="float-close">x</a>
    <!-- END close icon -->

</div>
<!-- Embedded OptinMonster Optin -->
<!-- This site is converting visitors into subscribers and customers with OptinMonster - http://optinmonster.com :: Campaign Title: On Page SEO Checklist --><div id="om-oqxhwmovdrq4xzue-holder"></div><script>var oqxhwmovdrq4xzue,oqxhwmovdrq4xzue_poll=function(){var r=0;return function(n,l){clearInterval(r),r=setInterval(n,l)}}();!function(e,t,n){if(e.getElementById(n)){oqxhwmovdrq4xzue_poll(function(){if(window['om_loaded']){if(!oqxhwmovdrq4xzue){oqxhwmovdrq4xzue=new OptinMonsterApp();return...

CSS

/* Prevent scrollbars during animation */
 body {
    overflow: hidden !important;
}
/* --- Floating MonsterLink Style 1 CSS ---
 ------------------------------------------ */
 .floating-monsterlink.style1.show {
    right: 30px;
 }
 .floating-monsterlink.style1 {
    margin: 0;
    width: auto;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    bottom: 30px;
    right: -350px;
    width: 160px;
    padding: 10px 10px 10px 60px;
    background-color: #eaeaea;
    border: 5px solid #165c92;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    -webkit-transition: right 3000ms ease-in-out;
    -moz-transition: right 3000ms ease-in-out;
    -o-transition: right 3000ms ease-in-out;
    transition: right 3000ms ease-in-out;
}
.floating-monsterlink.style1 .floating-avatar {
    top: -20px;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: absolute;
    margin-left: -150px;
    border-radius: 999em;
    border: 8px solid #165c92;
    background-color: #165c92;
    -webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
    box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
}
.floating-monsterlink.style1 .floating-avatar span {
    width: 106px;
    height: 106px;
    display: block;
    overflow: hidden;
    border-radius: 999em;
    background-size: cover;
    background-color: #eaeaea;
    border: 15px solid #eaeaea;
    margin: -8px auto auto -8px;
    background-image: url('http://optinmonster.com/wp-content/uploads/2015/09/erica-avatar-200x200.jpg');
}
.floating-monsterlink.style1 .floating-cta {
    padding: 0;
    font-size: 13px;
    text-align: left;
    line-height: 1.5em;
    margin: 0 auto 15px;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.floating-monsterlink.style1...

JavaScript

// Floating MonsterLink Style 1
jQuery(document).ready(function ($) {
    // Animate Floating MonsterLink into view on page load
    $(".floating-monsterlink.style1").addClass("show");

    // Animate out of view function
    function closeFloatingMonsterLink(e) {
        e.preventDefault();
        $(".floating-monsterlink.style1").removeClass("show");
    }
    // Triggers that run closeFloatingMonsterLink function
    $('.floating-monsterlink.style1 .float-close').click(closeFloatingMonsterLink);
    $(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);

});

// Floating MonsterLink Style 2
jQuery(document).ready(function ($) {

    // Animate Floating MonsterLink into view on page load
    $(".floating-monsterlink.style2").addClass("show");

    // Animate out of view function
    function closeFloatingMonsterLink(e) {
        e.preventDefault();
        $(".floating-monsterlink.style2").removeClass("show");
    }
    // Triggers that run closeFloatingMonsterLink function
    $('.floating-monsterlink.style2 .float-close').click(closeFloatingMonsterLink);
    $(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);

});