Все для веб-дизайнера
Шаблон портфолио ваших проектов для сайта
Мы экспериментировали с некоторыми эффектами движения для создания простого шаблона для портфолио. Идея состоит в том, чтобы показать галерею проектов в качестве отдельного модуля на странице, по умолчанию на первом блоке будет видны только подпись и кнопка призывающая к действию. В результате вы увидите анимацию и появление блоков, вы можете их пролистать и выбрать который хотите прочитать, в результате откроется подробная информация о выбранном действии.
Шаблон является полностью адаптивным, что означает хорошее отображение на различных устройствах, а красивая анимация дополнить шаблон утонченностью. И так, давайте приступим.
Шаг 1. HTML
HTML структура состоит из 3-х основных блоков: .cd-intro-block элемента, содержащий кнопку действия, чтобы выявить шаблон проектов, неупорядоченный список(.cd-slider), который будет отображать галерею проектов, а. .cd-project-content элемент с одного проекта.
|
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 |
<div class="cd-intro-block"> </div> <div class="cd-projects-wrapper"> <ul class="cd-slider"> <li class="current"> <a href="#0"> <img src="img/img.png" alt="project image"> <div class="project-info"> <h2>Проект</h2> <p>Описание</p> </div> </a> </li> <li> </li> </ul> <ul class="cd-slider-navigation cd-img-replace"> <li><a href="#0" class="prev inactive">Вперед</a></li> <li><a href="#0" class="next">Назад</a></li> </ul> </div> <div class="cd-project-content"> <div> <h2>заголовок</h2> <em>Описание.</em> </div> <a href="#0" class="close cd-img-replace">Закрыть</a> </div> |
Разметка не сложная, и с ней можно ознакомится в исходниках, мы добавили вызов всех проектов к одной странице с описанием, чтобы сократить шаблон.
Шаг 2. CSS
Когда пользователь щелкает a[data-action="show-projects"], тем .projects-visible класс добавляется в .cd-intro-block и .cd-projects-wrapper: этот класс запускает раздел анимации и отображает слайдер с проектами. .cd-intro-block трансформируется (вдоль оси Y) на 90%, в то время как .cd-projects-wrapper доступен для видна.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.cd-intro-block { transition: transform 0.5s; transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83); } .cd-intro-block.projects-visible { transform: translateY(-90%); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); cursor: pointer; } .cd-projects-wrapper { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: visibility 0s 0.5s; } .cd-projects-wrapper.projects-visible { visibility: visible; transition: visibility 0s 0s; } |
Для отображения анимации у нас будет, .slides-in - класс, который добавляется к каждому пункту проекта (с задержкой 50 мс); . Этот класс запускает другую анимацию в соответствии с размером экрана
На мобильных устройствах, каждый элемент списка имеет, по умолчанию, ширину: 100%, opacity:0; когда .slides-in класса добавлен, то cd-translate анимация будет применяться:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.cd-slider li { opacity: 0; } .cd-slider li.slides-in { opacity: 1; animation: cd-translate 0.5s; } @keyframes cd-translate { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); } } |
На настольных устройств (окно шириной более 900px), каждый элемент списка имеет, по умолчанию, ширину: 26%, translateX: 400%, а поворот установлен в значении: -10deg; когда .slides-in класс добавляется, каждый проект будет возвращаться в исходное положение (translateX: 0):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media only screen and (min-width: 900px) { .cd-slider li { position: relative; float: left; width: 26%; top: 50%; transform: translateX(400%) translateY(-50%) rotate(-10deg); transition: opacity 0s 0.3s, transform 0s 0.3s; } .cd-slider li.slides-in { animation: none; transform: translateY(-50%); } } |
Для слайдера проектов (только настольная версия), все элементы списка находятся в относительном положении, имеют фиксированную ширину (26%) и float: left; А .cd-slide общая ширина будет правильно изменяться (с помощью JavaScript)., так что все элементы списка помещаются в одной строке:
|
1 2 3 4 5 6 7 8 |
@keyframes cd-slide-n { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(translateValue); } } |
В принципе, анимация была определена для каждого элемента видимого в списке .cd-slider (в общей сложности 6); Каждая анимация отличается в значении translateX установленного в 50% ключевого кадра.
Шаг 3. JS
На настольных устройств, мы меняем .cd-slider ширину, так что его <li> дочерние элементы остаются в той же строке; мы использовали setSliderContainer () функцию, чтобы установить эту ширину; плюс, на изменение размера окна, мы обновляем .cd-slider перевести значение:
|
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 |
function setSliderContainer() { var mq = checkMQ(); if ( mq == 'desktop' ) { var slides = projectsSlider.children('li'), slideWidth = slides.eq(0).width(), marginLeft = Number(projectsSlider.children('li').eq(1).css('margin-left').replace('px', '')), sliderWidth = ( slideWidth + marginLeft )*( slides.length ) + 'px', slideCurrentIndex = projectsSlider.children('li.current').index(); projectsSlider.css('width', sliderWidth); ( slideCurrentIndex != 0 ) && setTranslateValue(projectsSlider, ( slideCurrentIndex * (slideWidth + marginLeft) + 'px')); } else { projectsSlider.css('width', ''); setTranslateValue(projectsSlider, 0); } resizing = false; } function setTranslateValue(item, translate) { item.css({ '-moz-transform': 'translateX(-' + translate + ')', '-webkit-transform': 'translateX(-' + translate + ')', '-ms-transform': 'translateX(-' + translate + ')', '-o-transform': 'translateX(-' + translate + ')', 'transform': 'translateX(-' + translate + ')', }); } var resizing = false; setSliderContainer(); $(window).on('resize', function(){ if( !resizing ) { window.requestAnimationFrame(setSliderContainer); resizing = true; } }); |
Кроме того, мы использовали JQuery для добавления / удаления классов (например,.projects-visible класс, когда пользователь нажимает кнопку действия) и реализации базовой навигации слайдера ( кнопки следующий / предыдущий с помощью клавиатуры).
Вот и все. Готово!
Читайте также:
Интересно:
| Print article | Опубликовал admin 08.09.2015 в 14:12, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
-
Прохор
Загрузка ...