Автор

28 05.2017
Вертикальная новостная лента

Вертикальная новостная лента


Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.

 

ДЕМО
ИСХОДНИКИ

 

Мы все хорошо знакомы с вертикальными новостными лентами: все приложения мгновенного обмена сообщениями используют их. Текущей тенденцией в веб-дизайне является использование подобной структуры, но для отображения процесса, а не последовательности событий. Вот почему временные структуры часто используются для страницы «Как это работает».

 

Создание структуры

Мы намотали всю временную шкалу на элемент <section>. Блок .cd-timeline-block представляет собой block содержимого. Мы, наконец, разделили изображение / значок и текстовое содержимое на 2 раздела divs.

<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 ........ 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>

 

Добавление стиля

Мы использовали селектор ::before селектором в абсолютном положении для создания вертикальной линии. Изображения / значки находятся в абсолютном положении, таким образом, было очень легко создать отзывчивую структуру, просто добавив маркер слева к текстовому контенту.

#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;
}

Были созданы 2 анимации вставки, как для изображения / значка, так и для текстового контента, которые видны только для пользователей настольных компьютеров. Чтобы анимация работала, нам пришлось создать 2 класса: .is-hidden, который используется для скрытия по умолчанию всех блоков контента, которые находятся вне области просмотра; При прокрутке пользователя мы добавляем класс .bounce-in к содержимому .cd-timeline-img и .cd-timeline, чтобы сделать элементы видимыми и запускать анимацию.

.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);
  }
}

 

Обработка событий

Как объясняется в разделе «Добавление стиля», мы использовали jQuery для скрытия блоков содержимого, которые находятся вне области просмотра, используя класс .is-hidden. Когда пользователь прокручивает и новый блок входит в область просмотра, мы добавляем класс .bounce-in как в .cd-timeline-img, так и в .cd-timeline-content (и удаляем .is-hidden класс) для запуска анимации.

$(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');
		}
	});
});

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

18 05.2013
Вертикальная новостная лента

Я уже не раз рассказывал о эффектах jQuery и что можно создать при помощи их. Но сегодня я хочу рассказать как можно создать отличную галерею просмотра миниатюр при помощи данного эффекта, галерея достаточно простая но в тоже время будет отлично смотреться на Вашем сайте, особенностью данной галереи является анимированное  превью интересующих изображений и вывод картинки в правом сайтбаре, и так, смотрим что у нас получилось.


02 04.2013
Вертикальная новостная лента

Стилизация сайта, несомненно, самый важный элемент веб-дизайна. Разработчики стараются сделать более уникальным и привлекательным сайт для своих пользователей, ведь не секрет, что чем лучше дизайн сайт - тем более привлекает положительные отзывы пользователей. В данном уроке мы рассмотрим процесс создание красивой таблицы с ценами на услуги или товары при этом будем использовать исключительно CSS3, никаких изображений для таблицы, и минимум разметки HTML. Такие таблицы помогают пользователю быстро и легко найти то, что ему нужно.


05 06.2017
Вертикальная новостная лента

Эта анимированная боковая корзина - это умный и ненавязчивый способ позволить пользователям входить и выходить из списка продуктов, которые они хотят купить, без необходимости обновлять страницу или запускать всплывающее окно.


22 03.2013
Вертикальная новостная лента

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close