<div class="container flexy"> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> <div class="panel-block slide-up-start"> <div class="block">¶</div> </div> </div> <div class="container"> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> <div class="panel-grid"> <div class="section"> <h1>Разумный подход</h1> <p><a href="http://podhod.ru">podhod.ru</a></p> </div> </div> </div>
html { background: white; font-family: sans-serif; } .container.flexy { display: flex; } /* Blocks */ .block { width: 100px; height: 100px; margin: 0 10px 10px 0; background: #0077ff; color: white; display: flex; align-items: center; justify-content: space-around; } .slide-up { animation: slide-up 1s ease forwards; } .slide-up:nth-of-type(odd), .slide-up-start.already-visible:nth-of-type(odd) { animation-duration: 1.3s; } .slide-up:nth-of-type(3n+1), .slide-up-start.already-visible:nth-of-type(3n+1) { animation-duration: 1.9s; } .slide-up:nth-of-type(4n+3), .slide-up-start.already-visible:nth-of-type(4n+3) { animation-duration: 1.6s; } .slide-up:nth-of-type(5n+2), .slide-up-start.already-visible:nth-of-type(5n+2) { animation-duration: 2.2s; } .already-visible { transform: translateY(0); animation: none; opacity: 1; } .slide-up-start { animation: slide-up 1.5s ease forwards; } @keyframes slide-up { 0% { transform: translateY(10%); opacity: 0; } 40% { transform: translateY(10%); opacity: 0; } 70% { transform: translateY(-1%); opacity: 1; } 100% { transform: translateY(0%); } } /* Levels */ .section { margin: 0 50px } .container { display: block; width: 100%; overflow: hidden; } .container .panel-grid { background: white; } .container .panel-grid:nth-child(odd) { background: #0077ff; } .container .panel-grid:nth-child(3n+1) { background: #ff7700; } .container .panel-grid:nth-child(4n+3) { background: #7700ff; } .container .panel-grid:nth-child(5n+2) { background: #00ff77; } .container .panel-grid:nth-child(odd) { transform: rotate(3deg); margin-top: -150px !important; } .container .panel-grid:nth-child(even) { transform: rotate(-3deg); } .container .panel-grid:nth-child(odd)>div { transform: rotate(-3deg); } .container .panel-grid:nth-child(even)>div { transform: rotate(3deg); } .container .panel-grid>div { padding: 40px 0 130px; } .container .panel-grid { margin: 0 -15px !important; transform-origin: left center; } .container .panel-grid:last-child { margin-bottom: -80px!important; } .container .panel-grid:first-child { margin-top: 0px!important; } .container .slide-up.panel-grid:nth-child(odd) { animation: slide-up-odd 1s ease forwards; } .container .slide-up.panel-grid:nth-child(even) { animation: slide-up-even 1s ease forwards; } .container .already-visible.panel-grid:nth-child(odd) { transform: rotate(3deg); animation: none; opacity: 1; } .container .already-visible.panel-grid:nth-child(even) { transform: rotate(-3deg); animation: none; opacity: 1; } @keyframes slide-up-odd { 0% { transform: rotate(3deg) translateY(10%); opacity: 0; } 40% { transform: rotate(3deg) translateY(10%); opacity: 0; } 70% { transform: rotate(3deg) translateY(-1%); opacity: 1; } 100% { transform: rotate(3deg) translateY(0%); } } @keyframes slide-up-even { 0% { transform: rotate(-3deg) translateY(10%); opacity: 0; } 40% { transform: rotate(-3deg) translateY(10%); opacity: 0; } 70% { transform: rotate(-3deg) translateY(-1%); opacity: 1; } 100% { transform: rotate(-3deg) translateY(0%); } }
$(document).ready(function() { $.fn.visible = function(partial) { var $t = $(this), $win = $(window), viewTop = $win.scrollTop(), viewBottom = viewTop + $win.height(), offsetTop = $t.offset().top, offsetBottom = offsetTop + $t.height(), compareTop = partial === true ? offsetBottom : offsetTop, compareBottom = partial === true ? offsetTop : offsetBottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); }; var win = $(window); var allContainers = $('.panel-block').add(".panel-grid"); allContainers.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); } else { el.removeClass("slide-up-start"); } }); win.scroll(function(event) { allContainers.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("slide-up"); } }); }); });