Bootstrap Snippet instagram using HTML CSS jQuery

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar">
       <a href='#'><i class="fa fa-instagram"></i><span></span></a></div>
    <div class='lil-bar'>
        <div class='bar-cont'>
            <a href='#' role="button"><i class="fa fa-user-plus"></i></a>
            <a href='#' onclick='return false;' class='list-order' role="button"><i class="fa fa-ellipsis-h"></i></a>
    </div>
    </div>
 <div class="list">
    <ul>
        <li><a href="https://goo.gl/TChSJ4" target='_blank'><img src="https://goo.gl/aVijkX" class="avatar avatar-50">uncle_oreo</a></li>
        <li><a href='#'>Log in</a></li>
        <li><a href='#'>Sign up</a></li>
        <li><a href='#'>Report this user</a></li>
        <li class='collapse'><a href='#'>Collapse the bar</a></li>
        </ul>
    </div>
<section>
  <div class= 'insta fade-scroll'>
    <div class='top-insta'>
      <a href='https://goo.gl/Y9YWLo' target='_blank'><img src='https://goo.gl/rN1DcT'></a>
      <a href='https://goo.gl/Y9YWLo' target='_blank' class='user'>uncle_oreo
</a>
      <span class= 'dot'></span>
    </div>
    <div class='post'>
        <div class="overlay">
        <span></span>
        </div>
      <img src='https://goo.gl/ZUpXiB' >
 </div>
    <div class='footer'>
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
body,
html {
    background: #fafafa;
    margin: 0;
    padding: 0;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: proxima-nova-condensed, sans-serif;
}
a {
    text-decoration: none;
    color: #262626;
}
section {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    padding-top: 9em;
}
.navbar {
    z-index: 16;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    height: 77px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
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
//ignore the first 13lines,the trick here is all about tracking the element till it comes into the view, by measuring height and stuff of both window screen and the element itself, its that simple, muhammad khairy
$(function () {
$('.insta').clone().appendTo('.a1');
    $('.a1:first').find('.post img').attr('src','https://goo.gl/pnYKzy')
    $('.a1:first').find('.caption span').text('Khitma partner');
    $('.a1:eq(1)').find('.post img').attr('src','https://goo.gl/ebVC6W')
    $('.a1:eq(1)').find('.caption span').text('Sip your coffee quite silently Get lost into some appealing books pages');
    $('.a1:eq(2)').find('.post img').attr('src','https://goo.gl/CtfVAj')
    $('.a1:eq(2)').find('.caption span').text('Cupcakes can perform rites of pilgrimage too ');
    $('.a1:eq(3)').find('.post img').attr('src','https://goo.gl/Ch5atv')
    $('.a1:eq(3)').find('.caption span').text('Rest in Peace Ya Narges');
    $('.a1:eq(4)').find('.post img').attr('src','https://goo.gl/ZpfGSf');
    $('.a1:eq(4)').find('.caption span').text('I promised I will never compose poems on your eyes .. but I did');
$(window).on('scroll resize', function holy_nob() {
    var    wh = $(window).height();
    var    wt = $(window).scrollTop();
    var    wb = (wt + wh);
    var    rbj = $('.lil-bar');
    var    ft = $('.footer-cont');
    var    ft_t = ft.offset().top;
    var    ft_h = ft.height();
    var    tof  = (ft_t + ft_h);
    var    fol  = (ft_h + 15);
   if(wb >= tof){
            rbj.css('bottom',fol);
        }else{
           rbj.css('bottom','15px');}
    $('.fade-scroll').each(function(){
        var   element = $(this);
        var    el_h = element.height();
        var    el_t = element.offset().top;
        var    el_b = (el_t + el_h);
        if((el_b > wt) && (el_t < wb)){
            element.addClass('animation');
        }
        else {
      element.removeClass('animation');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"instagram"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"instagram" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"instagram"
Bootstrap 3.0.0 Snippet by evarevirus