Автор

19 06.2015
Эффект зума шапки сайта с помощью CSS3

Эффект зума шапки сайта с помощью CSS3


Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах — навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.

 

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

 

Чтобы создать такую анимацию нам понадобиться немного трансформаций CSS и немного магии с помощью jQuery. В сегодняшнем отрывке мы создали приятную анимацию, в которой пользователь может сдвигать изображение и увеличивать его с помощью прокрутки, создавая тем самым 3D движение по оси Z (с помощью свойства Z-индекс).

 

Шаг 1. HTML

Разметка будет достаточно простой, мы создали раздел section#cd-intro элемент которого обернет в класс наш список:

<section id="cd-intro">
<div id="cd-intro-background"></div>
<div id="cd-intro-tagline"><!-- insert your tagline here --></div>
</section>

и установим полную ширину изображения в качестве фона на #cd-intro-background элемента.

 

Шаг 2. CSS

Для части элементов мы присвоили значение: position:fixed; в разделе section#cd-intro где нам необходимо установить происхождение для CSS3 масштабного преобразования для элемента #cd-intro-background, на значении 50% (ось X) и 100% ( ось Y). Это все, что нужно для эффекта Zoom.

@media only screen and (min-width: 1170px) {
 #cd-intro {
 position: fixed;
 top: 70px;
 left: 0;
 }
 #cd-intro .cd-intro-background {
 transform-origin: 50% 100%;
 }
}

Значение масштабного преобразования будет динамически назначается #cd-intro-background используя JQuery.

 

Шаг 3. JS

Мы определили значение для triggerAnimation () функции, которая будет служить для запуска масштабных преобразований CSS3 и вписали его в окно прокрутки.

function triggerAnimation(){
if($(window).width()>= MQ) {
$(window).on('scroll', function(){
animations will be smoother
window.requestAnimationFrame(animateIntro);
});
} else {
$(window).off('scroll');
}
}

 

Мы использовали requestAnimationFrame () для обработчиков событий прокрутки. В принципе, requestAnimationFrame () функция которая дает браузеру команду, что мы хотим чтобы выполнялась анимация, так что браузер может оптимизировать его.
AnimateIntro () функция масштабирует значение #cd-intro-background элемента и меняет прозрачность в зависимости от окна со значением scrollTop () (которая необходима для имитации движения 3D).

Вот и все. Готово!


vk.com/club.ssdru

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


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

04 12.2014
Эффект зума шапки сайта с помощью CSS3

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

16 10.2015
Эффект зума шапки сайта с помощью CSS3

Генератор бэкграунда для сайта позволяет вам разрабатывать собственные изображения используя треугольники и цветные градиенты. Вы можете настраивать ширину и высоту финального изображения, а также вариации и формы треугольников, размеры ячеек и цветовую палитру. Пользуйтесь :)


28 09.2013
Эффект зума шапки сайта с помощью CSS3

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


24 04.2013
Эффект зума шапки сайта с помощью CSS3

Наверное, многие верстальщики и веб-мастера стыкались с проблемой, как проверить код своего сайта на ошибки. Конечно же, большинство знает за известные валидаторы, но я уверен, что есть определенный процент, который этого не знает и им бы это пригодилось. И вот сегодня я решил написать небольшой список неплохих инструментов для верстальщиков.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close