Simple parallax scrolling parallax.js

2.2 Configuration Options

relativeInput

Property: relativeInput Attribute: data-relative-input

Value: boolean Default: false

Makes mouse input relative to the position of the scene element. No effect when gyroscope is used.

clipRelativeInput

Property: clipRelativeInput Attribute: data-clip-relative-input

Value: boolean Default: false

Clips mouse input to the bounds of the scene. This means the movement stops as soon as the edge of the scene element is reached by the cursor. No effect when gyroscope is used, or is active.

hoverOnly

Property: hoverOnly Attribute: data-hover-only

Value: boolean Default: false

Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position. Works best in combination with . No effect when gyroscope is used.

inputElement

Property: inputElement Attribute: data-input-element Method: setInputElement(HTMLElement)

Value: null or HTMLElement / String Default: null

Allows usage of a different element for cursor input. The configuration property expects an HTMLElement, the data value attribute a query selector string. Will only work in combination with , setting might make sense too. No effect when gyroscope is used.

calibrateX & calibrateY

Property: calibrateX & calibrateY Attribute: data-calibrate-x & data-calibrate-y Method: calibrate(x, y)

Value: boolean Default: false for X, true for Y

Caches the initial X/Y axis value on initialization and calculates motion relative to this. No effect when cursor is used.

invertX & invertY

Property: invertX & invertY Attribute: data-invert-x & data-invert-y Method: invert(x, y)

Value: boolean Default: true

Inverts the movement of the layers relative to the input. Setting both of these values to false will cause the layers to move with the device motion or cursor.


limitX & limitY

Property: limitX & limitY Attribute: data-limit-x & data-limit-y Method: limit(x, y)

Value: false or integer Default: false

Limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom to the movement.

scalarX & scalarY

Property: scalarX & scalarY Attribute: data-scalar-x & data-scalar-y Method: scalar(x, y)

Value: float Default: 10.0

Multiplies the input motion by this value, increasing or decreasing the movement speed and range.

frictionX & frictionY

Property: frictionX & frictionY Attribute: data-friction-x & data-friction-y Method: friction(x, y)

Value: float between and 1 Default: 0.1

Amount of friction applied to the layers. At 1 the layers will instantly go to their new positions, everything below 1 adds some easing. The default value of 0.1 adds some sensible easing. Try 0.15 or 0.075 for some difference.

originX & originY

Property: originX & originY Attribute: data-origin-x & data-origin-y Method: origin(x, y)

Value: float between and 1 Default: 0.5

X and Y origin of the mouse input. The default of 0.5 refers to the center of the screen or element, is the left (X axis) or top (Y axis) border, 1 the right or bottom. No effect when gyroscope is used.

precision

Property: precision Attribute: data-precision

Value: integer Default: 1

Decimals the element positions will be rounded to. 1 is a sensible default which you should not need to change in the next few years, unless you have a very interesting and unique setup.

selector

Property: selector Attribute: data-selector

Value: null or string Default: null

String that will be fed to querySelectorAll on the scene element to select the layer elements. When null, will simply select all direct child elements. Use for legacy behaviour, selecting only child elements having the class name layer.

pointerEvents

Property: pointerEvents Attribute: data-pointer-events

Value: boolean Default: false

Set to true to enable interactions with the scene and layer elements. When set to the default of false, the CSS attribute will be applied for performance reasons. Setting this to true alone will not be enough to fully interact with all layers, since they will be overlapping. You have to either set on all layer child elements, or keep pointerEvents at false and set for the interactable elements only.

onReady

Property: onReady

Value: null or function Default: null

Callback function that will be called as soon as the Parallax instance has finished its setup. This might currently take up to 1000ms ().

3. Methods

In addition to the configuration methods outlined in the section above, there are a few more publicly accessible methods:

Returns the version number of the Parallax library.

Теория

Прежде чем говорить о принципе работы, давайте выполним базовую разметку:

А вот основные стили:

Именно класс содержит всю магию параллакс-эффекта. Указав для элемента свойства и , мы привяжем построение перспективы от центра этого элемента, создав тем самым исходный фиксированный 3D вьюпорт. Благодаря свойству контент внутри элемента будет прокручиваться как обычно, но элементы-потомки теперь будут отображаться относительно фиксированной точки. Это ключевой принцип создания параллакс-эффекта.

Далее — класс . Как можно понять из названия класса, он определяет слой контента, к которому будет применяться параллакс-эффект; элемент выпадает из основного потока и заполняет собой всё пространство контейнера.

И наконец, у нас есть классы-модификаторы и . Они определяют скорость прокрутки параллакс-элемента посредством перемещения его по оси Z (отодвигая его от вьюпорта или приближая к нему). Для краткости я установил только две скорости слоя — позже добавим ещё.

CSS

Прежде, чем перейти к магии jQuery добавим фоновые изображения для каждого элемента в коде CSS.

#home {
background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px;
}
#about {
background: url(about.jpg) 50% 0 no-repeat min-height: 1000px;
}

И определим стили для остальных элементов нашей демонстрационной страницы.

#home {
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}
#about {
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Создать параллакс

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

Пример с пикселями

<style>.parallax {  /* Используемое изображение */  background-image: url(«img_parallax.jpg»);   /* Установите определенную высоту */  height: 500px;  /* Создайте эффект параллакса прокрутки */   background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}</style><!— Элемент контейнера —><div class=»parallax»></div>

В приведенном выше примере используются пиксели для установки высоты изображения. Если вы хотите использовать процент, например 100%, чтобы изображение соответствовало всему экрану, установите высоту контейнера параллакса на 100%. Примечание: Вы также должны подать заявку как в <html> и <body>:

Пример with percent

body, html {  height: 100%;}.parallax {  /* Используемое изображение */  background-image: url(«img_parallax.jpg»);  /* Полный рост */  height: 100%;  /* Создайте эффект параллакса прокрутки */  background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}


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

Пример

/* Выключите параллакс прокрутки для всех планшетов и телефонов. Увеличение уменьшение пикселей при необходимости */@media only screen and (max-device-width: 1366px) {  .parallax {     background-attachment: scroll;  }}

1.2 Preparations

Include the Script

If you use the compiled version, either downloaded from the releases page, or copied from the folder, include the script like any other Javascript library:

Of course, when you’ve installed via npm, and use browserify/babel, you can also simply do: or

Create your HTML elements

Each Parallax.js instance needs a container element, the scene. You’re free to identify it by any means you want, but for now, let’s use an ID:

<div id="scene">
</div>

Per default, all direct child elements of the scene will become moving objects, the layers. You can change this to a custom query selector, but again, we’re going with the easiest approach for now:

<div id="scene">
  <div>My first Layer!</div>
  <div>My second Layer!</div>
</div>

While all other options and parameters are optional, with sane defaults, and can be set programatically, each layer needs a attribute. The movement applied to each layer will be multiplied by its depth attribute.

<div id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Usage

  1. Just add a link to the css file in your :

    <link rel="stylesheet" href="../dist/jquery.parallux.min.css">
  2. Then, before your closing tag add:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="dist/jquery.parallux.min.js"></script>
  3. Set the HTML scructure:

    	<!-- Parallax Item -->
    	<div class="parallux">
    
    		<!-- Background layer -->
    		<div class="parallux-bg">
    
    			<!-- Div for parallax efect -->
    			<div class="parallux-inner">
    
    				<!-- Any HTML elements you want -->
    
    			</div>
    
    		</div>
    
    		<!-- Parallax foreground -->
    
    	</div> 
  4. Call the plugin

    $(".parallux").parallux();

Бонусы от переводчика:

Relief Parallax Mapping

  • Выполняем расчет Steep PM и получаем текстурные координаты и – в этом интервале лежит точка пересечения вектора с рельефом поверхности. Истинная точка пересечения отмечена красным крестиком.
  • Разделить на два текущие значения смещения текстурных координат и высоты слоя глубины.
  • Сместить текстурные координаты из точки в направлении обратном вектору на величину смещения. Уменьшить глубину слоя на текущее значение размера слоя.
  • Непосредственно бинарный поиск. Повторяется заданное число итераций:
    1. Осуществить выборку из карты глубин. Разделить на два текущие значения смещения текстурных координат и размера слоя глубины.
    2. Если величина выборки оказалась больше текущей глубины слоя, то увеличить глубину слоя на текущий размер слоя, а текстурные координаты изменить вдоль вектора на текущее смещение.
    3. Если же величина выборки оказалась меньше текущей глубины слоя, то уменьшить глубину слоя на текущий размер слоя, а текстурные координаты изменить вдоль вектора обратного на текущее смещение.
  • Последние полученные текстурные координаты и есть результаты Relief PM.

Самозатенение

1.0 – stepIndex/numberOfSteps

  • Инициализируем итоговый коэффициент освещенности в ноль.
  • Делаем шаг вдоль вектора , попадая в точку . Глубина точки явно меньше, чем выборка из карты – она находится под поверхностью. Здесь мы сделали первую проверку и, помня об общем числе проверок, находим и сохраняем первый частичный коэффициент освещенности: (1.0 – 1.0/3.0).
  • Делаем шаг вдоль вектора , попадая в точку . Глубина точки явно меньше, чем выборка из карты – она находится под поверхностью. Вторая проверка и второй частичный коэффициент: (1.0 – 2.0/3.0).
  • Делаем еще один шаг вдоль вектора и попадаем на минимальную глубину 0. Останавливаем движение.
  • Определение результата: если точек под поверхностью не было найдено, то возвращаем коэффициент равный 1 (отсутствие затенения). Иначе результирующим коэффициентом становится максимальный из вычисленных частичных. Для использования в расчете освещения мы вычитаем это значение из единицы.

Сравнение всех методов

How To Create a Parallax Scrolling Effect

Use a container element and add a background image to the container with a specific height. Then use the to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

Example with pixels

<style>.parallax {   /* The image used */  background-image: url(«img_parallax.jpg»);   /* Set a specific height */  height: 500px;   /* Create the parallax scrolling effect */   background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}</style><!— Container element —><div class=»parallax»></div>

The example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply to both <html> and <body>:

Example with percent

body, html {  height: 100%;}.parallax {   /* The image used */  background-image: url(«img_parallax.jpg»);  /* Full height */  height: 100%;   /* Create the parallax scrolling effect */  background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}

Some mobile devices have a problem with . However, you can use media queries to turn off the parallax effect for mobile devices:

Example

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */@media only screen and (max-device-width: 1366px) {  .parallax {     background-attachment: scroll;  }}

Магический код

Используем jQuery. Начнем со стандартного метода , чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){
});

Теперь нужно внимание. Первое, что здесь происходит — итерация по всем элементам с атрибутом на странице

$(document).ready(function(){
    $('section').each(function(){
      var $bgobj = $(this); // Назначаем объект
    });
});

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

Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на  величину, определяемую в атрибуте .

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

— получаем текущее значение прокрутки сверху. ссылается на атрибут в разметке. — окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.

В нашем примере атрибут имеет значение 10. Предположим, что окно браузера прокручивается на . Это означает, что делится на = .

// Собираем положение фона
var coords = '50% '+ yPos + 'px';
// Смещаем фон
$bgobj.css({ backgroundPosition: coords });

Теперь надо собрать все данные в одно значение. Чтобы сохранить горизонтальное положение фона статичным, мы используем значение для его свойства . Затем добавляем в качестве значения свойства , а затем присваиваем координаты фону : .

В окончательном виде код будет выглядеть так:

$(document).ready(function(){
    $('section').each(function(){
        var $bgobj = $(this); // Назначаем объект
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            // Собираем значение координат фона вместе
            var coords = '50% '+ yPos + 'px';
            // Смещаем фон
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Фиксатор для IE

Остается один момент: старые версии IE не могут вывести теги и . Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.

// Создаем элементы для IE
document.createElement("article");
document.createElement("section");

Дополнительно мы используем файл сброса CSS, чтобы все браузеры выводили страницу одинаково.

Features

####Tiny and simple With ~6kb only, and just 4 options, the plugin is quite simple and straight forward

Parallaxing everything

You can add all kind of content inside the background layer, it will works. I tested with videos, images ( tags), videos, background, sliders (slick slider), text, and it works just fine, thanks CSS3 translate3D hardware acceleration.

Foreground and Background layers

Sometimes you may want to add some elements inside the parallax wrapper that use the normal scroll speed, so I added a layer for foreground elements and another one for the background layer (the one doing parallax effect). Check the demos and you will see what I’m talking about.

Fallback for Old Browsers

If the browser don’t support translate3D, I decided to not do parallax at all. But the layer will be fixed in the background. Is proved that the scroll performance animating with javascript and will be a problem.

Fallback in Mobile

In the last version of Safari and Chrome for mobile, there is already support for translate3d! That is great, but still is not very smooth and depends a lot of the mobile hardware. For example, in Safari and iPhone 6 works great, but not in Chrome in a regular Android device, so I added an option () and it’s up to you to enable parallax on mobile devices. Works great in last versions of Chrome and Safari.

The theory

Before we dive into how the effect works, let’s establish some barebones markup:

And here are the basic style rules:

The class is where the parallax magic happens. Defining the and style properties of an element will lock the perspective to its centre, creating a fixed origin 3D viewport. Setting will allow the content inside the element to scroll in the usual way, but now descendant elements will be rendered relative to the fixed perspective. This is the key to creating the parallax effect.

Next is the class. As the name suggests, it defines a layer of content to which the parallax effect will be applied; the element is pulled out of content flow and configured to fill the space of the container.

Finally we have the modifier classes and . These are used to determine the scrolling speed of a parallax element by translating it along the Z axis (moving it farther away, or closer to the viewport). For brevity I have only defined two layer speeds — we’ll add more later.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Parallax sections

The previous examples demonstrated the basic techniques using very simple content but most parallax sites break the page into distinct sections where different effects can be applied. Here’s how to do that.

Firstly, we need a element to group our layers together:


Here’s the CSS for the group element:

In this example, I want each group to fill the viewport so I’ve set , however arbitrary values can be set for each group if required. prevents the browser flattening the elements and is used to allow the child elements to be positioned relative to the group element.

One important rule to keep in mind when grouping elements is, we cannot clip the content of a group. Setting on a will break the parallax effect. Unclipped content will result in descendant elements overflowing, so we need to be creative with the values of the groups to ensure content is correctly revealed/hidden as the visitor scrolls through the document.

There are no hard and fast rules for dealing with layering as implementations will differ between designs. It’s much easier to debug layering issues if you can see how the parallax effect works — you can do that by applying simple transform to the group elements:

Have a look at the following example — note the debug option!

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

2.1 Programmatic vs Declarative

Most configuration settings can be declared either as data-value attribute of the scene element, or property of the configuration object. The programmatic approach will take priority over the data-value attributes set in the HTML. Some options can also be set at run-time via instance methods.

Declarative:

<div data-relative-input="true" id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

Programmatic:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
  relativeInput: true
});

Using Methods at Runtime:

parallaxInstance.friction(0.2, 0.2);

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Update: 25 Feb 2015

Since writing this article it’s become apparent that webkit based browsers don’t correctly calculate the effective width of an element once transformed into 3D space and scaled up. This bug allows users to scroll content horiziontally ignoring any constraits defined with property. It is possible to work around for this bug by anchoring the and to the right hand side of the viewport:

Locking the perspective and transform origins in this way causes any content overflow to occur off the left side of the screen. Since it’s not possible to scroll to a negative position the overflow issue is masked.

Проблемы параллакс эффекта

Для начала давайте рассмотрим 2 основных пути для достижения параллакс эффекта, и в частности почему они не подходят для наших целей.

Плохо: использование событий scroll

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

Во многих браузерах события прокрутки предоставляются низкого качества и нет гарантии доставки их к каждому кадру анимации прокрутки!

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

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

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

Плохо: обновление background-position

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

Если мы хотим выполнить обещанное параллакс перемещение, нам необходимо что-то такое, что может быть применено в качестве ускорителя (что на сегодняшний день означает придерживаться transforms и opacity), и которое не полагается на события scroll.


С этим читают