Автор

Эффект уменьшения масштаба

Эффект уменьшения масштаба


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

 

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

 

Большие образы заголовков часто используются в эти дни в качестве фона для слогана сайта. Они охватывают раздел «Введение», пользователи могут сосредоточиться на 2-3 основных элементах - меню, сообщении и кнопке «призыв к действию» - тогда, если это будет интересно, они могут прокручивать вниз и узнавать больше. Изображение в основном является визуальным украшением.

В сегодняшнем фрагменте мы создали красивую анимацию, которая уменьшает область изображения во время прокрутки пользователя, создавая тем самым фальшивое трехмерное движение по оси Z (с помощью свойства z-index).

 

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

Мы создали элемент секции #cd-intro, чтобы обернуть наше изображение и tagline / message

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

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

 

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

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

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

 

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

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

function triggerAnimation(){
	if($(window).width()>= MQ) {
		$(window).on('scroll', function(){
			//The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
			window.requestAnimationFrame(animateIntro);
		});
	} else {
		$(window).off('scroll');
	}
}

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

Функция animateIntro () масштабирует элемент #cd-intro-background и изменяет его непрозрачность в соответствии со значением окна scrollTop () (чтобы имитировать 3D-движение).

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

Эффект уменьшения масштаба

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


Эффект уменьшения масштаба

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


Эффект уменьшения масштаба

Это модальное окно позволяет пользователям входить / регистрироваться на вашем сайте. После открытия пользователь может легко переключиться с одной формы на другую или выбрать опцию сброса пароля.


Эффект уменьшения масштаба

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close