Реализация хронологии событий
Делаем вертикальную хронологию событий у себя на сайте.
Как реализовать:
1. Разметка html — Создаём секцию контента
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<section id="cd-timeline"> <div class="cd-timeline-block"> <div class="cd-timeline-img"> <img src="img/cd-icon-picture.svg" alt="Picture"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Title of section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p> <a href="#0" class="cd-read-more">Read more</a> <span class="cd-date">Jan 14</span> </div> <!-- cd-timeline-content --> </div> <!-- cd-timeline-block --> <div class="cd-timeline-block"> <!-- ... --> </div> </section> |
2. Добавляем стили 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#cd-timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; } #cd-timeline::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; animation: cd-bounce-1 0.6s; } @keyframes cd-bounce-1 { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: scale(1); } } |
3. Обработка событий, необходимо для скрытия блоков из области видимости
|
1 2 3 4 5 6 7 |
$(window).on('scroll', function(){ $timeline_block.each(function(){ if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) { $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in'); } }); }); |
4. Подключаем наш плагин и jQuery
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/main.js"></script> |
Что у нас получилось:
