I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you swipe down, new modules of content slide up into place. Video is best here:

HTML

1. <section>
3. <div class="module"></div>
4. <div class="module"></div>
5. <div class="module"></div>
6. <div class="module"></div>
7. <div class="module"></div>
8. <div class="module"></div>
9. <div class="module"></div>
10. <div class="module"></div>
11. <div class="module"></div>
12. <div class="module"></div>
13. <div class="module"></div>
14. <div class="module"></div>
15. <div class="module"></div>
16. <div class="module"></div>
17. <div class="module"></div>
18. <div class="module"></div>
19. <div class="module"></div>
20. <div class="module"></div>
21. <div class="module"></div>
22. <div class="module"></div>
23. <div class="module"></div>
24. <div class="module"></div>
25. <div class="module"></div>
26. <div class="module"></div>
28. </section>

CSS

1. * {
2. @include box-sizing(border-box);
3. }
5. section {
6. background: #eee;
7. max-width: 600px;
8. margin: 0 auto;
9. padding: 20px;
10. overflow: hidden;
11. }
13. .module {
14. width: 48%;
15. min-height: 200px;
16. background: white;
17. position: relative;
18. float: left;
19. padding: 20px;
20. margin-right: 4%;
21. margin-bottom: 4%;
22. &:nth-child(even) {
23. margin-right: 0;
24. }
25. box-shadow: 0 1px 3px rgba(black, 0.2);
26. }
28. body {
29. background: url(http://s.cdpn.io/3/blurry-blue.jpg);
30. background-size: cover;
31. padding: 30px;
32. }
34. .come-in {
35. transform: translateY(150px);
36. animation: come-in 0.8s ease forwards;
37. }
38. .come-in:nth-child(odd) {
39. animation-duration: 0.6s;
40. }
41. .already-visible {
42. transform: translateY(0);
43. animation: none;
44. }
46. @keyframes come-in {
47. to { transform: translateY(0); }
48. }

JS

1. // Makes use of the visible plugin
2. // https://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js
4. var win = $(window);
6. var allMods = $(".module");
8. allMods.each(function(i, el) {
9. var el = $(el);
10. if (el.visible(true)) {
11. el.addClass("already-visible");
12. }
13. });
15. win.scroll(function(event) {
17. allMods.each(function(i, el) {
18. var el = $(el);
19. if (el.visible(true)) {
20. el.addClass("come-in");
21. }
22. });
24. });