Автор

Эффект зума шапки сайта с помощью 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

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

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


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

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


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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


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

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close