Google+ App Like Pullup Effect with jQuery and CSS3

A cool Google+ app like pull-up effect bulit on top of jQuery and CSS3 transitions & transforms. When you scroll down the page, the new content blocks slide up into place.

See also:

• Google+ App Style jQuery Scroll Effect Plugin - pullupscroll

How to use it:

1. Include the necessary jQuery library at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery onscreen plugin to check if matched elements are inside the viewport.

<script src="jquery.onscreen.min.js"></script>

3. Include the jQuery viewport plugin to check whether element is inside or outside of viewport.

<script src="jquery.viewport.mini.js"></script>

4. Create a set of content blocks.

<div class="wrap">
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
  <div class="card">
    <div class="img"></div>
    <footer></footer>
  </div>
</div>

4. The CSS to style the blocks.

.wrap {
  width: 90%;
  margin: 50px auto 0 auto;
}

.card {
  width: calc(50% - 40px);
  margin: 0 20px 30px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  position: relative;
  -moz-box-shadow: 0 3px 3px 0px #d8d8d8;
  -webkit-box-shadow: 0 3px 3px 0px #d8d8d8;
  box-shadow: 0 3px 3px 0px #d8d8d8;
}

.card .img {
  background-color: #F4F4F4;
  height: 350px;
}

.card footer {
  background-color: #fff;
  width: 100%;
  height: 65px;
  border-top: 1px solid rgba(216, 216, 216, 0.6);
}

.card.not-visible {
  -moz-transition-duration: 800ms;
  -o-transition-duration: 800ms;
  -webkit-transition-duration: 800ms;
  transition-duration: 800ms;
  -moz-transform: translateY(150px);
  -ms-transform: translateY(150px);
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
}

.card.not-visible.in {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

5. The Javascript to enable the effect.

var $card = $(".card");

$card
.not(':in-viewport')
.not(':above-the-top')
.onScreen({
  doIn: function(){
    $(this).addClass('in');
  }
})
.addClass('not-visible');

---

This awesome jQuery plugin is developed by jonstuebe. For more Advanced Usages, please check the demo page or visit the official website.