Автор

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

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


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

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

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


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

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


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

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


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

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close