helpful focus overlay in bootstrap

Question

we use Material Showcase in iOS and FancyShowCaseView in Android to provide tutorial-esque

• Reveal animations
• Focus user on a specific view or position

Is there anything we can use for bootstrap that would do the same? We had (in desperation) looked at modal popovers but they didn't really work well.

If it's jquery compatible it is still fine.

We'd like to simply pass a div and give it "focus" and have access to some sort of dismiss callback.

Does anyone have any experience of this sort of product?

Answer 1

I'n not super familiar with the two showcases you mentioned, but animations are possible with bootstrap and JQuery, with a wide variety of possibilities. I'll list a few I know of below.

Pure CSS

Pure CSS Animations the most basic, but not always very elegant.

More complex CSS

This example shows how to get a simple attention getting blink animation. It may be enlightening on how to make more complex CSS animations:

The HTML:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <div class="container">
    <div class="row">
    <a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>
    </div>
</div>

</div>

The CSS:

.pinkBg {
    background-color: #ed184f!important;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
    height:60px;
    width:60px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-30px 0 0 -30px;
    border-radius:100px;
    z-index:1
}
.intro-banner-vdo-play-btn i{
    line-height:56px;
    font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}

MD Bootstrap Library

The MD Bootstrap Library has more complex animations that are easy to use and require less code to get functional than pure CSS animations. The Attention Seeker animations seem most similar to some of what I saw on a quick search for Material Showcase. The link above has lots of examples on one page so you can see what kind of behaviors are supported.

UI Cookies

This site also has many free and licensed examples of bootstrap animations that are even more complex.