Bootstrap Snippet Instagram Notifications Animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="bar">
    <i class="material-icons">home</i>
    <i class="material-icons">search</i>
    <i class="material-icons">add_box</i>
    <i class="material-icons is-active">favorite
      <div class="notif">
        <i class="material-icons">favorite</i>
        <i class="material-icons">mode_comment</i>
        <i class="material-icons">person</i>
      </div>
    </i>
    <i class="material-icons">person</i>
</div>
<script type="text/javascript">
    $('.bar i').click(function() {
      $(this).addClass('is-active').siblings().removeClass('is-active');
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin: 0;
      padding: 0;
    }
    body {
      background: #f2f2f2;
    }
    .bar {
      width: 280px;
      height: 45px;
      background: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: 45px;
    }
    .bar i {
      color: #c7c7c7;
      line-height: 45px;
      font-size: 22px;
      transition: 0.3s linear;
    }
    .bar .is-active {
      color: #000;
    }
    .bar .is-active .notif {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Instagram Notifications Animation"
Bootstrap 4.1.1 Snippet by nirav.mandli

Related: See More

Questions / Comments:

"Instagram Notifications Animation" Bootstrap 4.1.1 Snippet by nirav.mandli

Related: See More

Questions / Comments:

"Instagram Notifications Animation"
Bootstrap 4.1.1 Snippet by nirav.mandli