Автор

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

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

Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..


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

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


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

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.


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

Фон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close