Автор

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

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


Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба 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-движение).

 

Вот и всё!


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



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

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

Многие вебмастера и разработчики сайтов не раз задавались вопросом: «Как перевести картинку в CSS»! Представляю Вам конвертер который делает эту задачу реальной!


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

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


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

Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности. Все больше разработчиков используют SVG, что заставляет развивать данное направление. Мы хотели бы поделиться некоторыми идеями для воздействия на кнопки.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close