Как реализовать такой эффект?

54

victorpavloff

10 июня 2015, 18:29

466

На сайте Apple (блок "Самый мощный iMac в истории") есть эффект параллакса. При прокрутке до определенной точки картинка начинает прокручиваться медленнее текста, и в конце медленная прокрутка сменяется стандартной. Как можно реализовать такой же эффект?

Партнёрка №1 в essay-нише (https://goo.gl/YfTPtG)

T2

60

tpaktop2007

10 июня 2015, 18:31

#1

Знакомство с Parallax Scrolling

V

54

victorpavloff

10 июня 2015, 18:41

#2

tpaktop2007:
Знакомство с Parallax Scrolling

С Parallax Scrolling я уже познакомился. Меня интересует, как включить, а потом сбросить эффект параллакс.

K

5

kreolx

10 июня 2015, 23:59

#3

через Jquery. Если в хроме открыть инструменты разработчика и посмотреть на интересующий блок, то можно увидеть, что в определенный момент у блока меняется position с abolute на fixed, после чего производится трансформация фона элемента при дальнейшей прокрутке. Ну и если прокручивают еще ниже у блока опять переключается position в обратном порядке с fixed на absolute. Применяйте инструменты разработчика, они во всех браузерах есть, можно много чего интересного увидеть на страницах) А остальное додумать труда не составит)

WordPress для начинающих (http://belentsov.ru) Ваш личный помощник выполнит любую работу в ЛЮБОЕ время (http://www.work-zilla.com?ref=121253&sub=search)

opera 12 position:fixed Как реализовать смену фона Как доработать скрипт по

V

54

victorpavloff

11 июня 2015, 02:48

#4

В хроме я открыл js-файл того сайта, и вообще ничего не понял.

---------- Добавлено 11.06.2015 в 06:55 ----------

Как для всего этого написать js-код?

K

5

kreolx

11 июня 2015, 02:58

#5

victorpavloff:
В хроме я открыл js-файл того сайта, и вообще ничего не понял.

А я и не говорил про js-файлы. Смотрите что происходит в DOM-модели. Самое главное понять как оно работает, а как написать это уже второстепенно)

K

45

kostyanet

11 июня 2015, 05:10

#6

victorpavloff, как угодно напишите. Посмотрите как уже сделано, если сочтете что сделано криво, сделайте по-своему. Это же js, тут почти нет ограничений. Кроме того есть готовые библиотеки для презентаций.

javascript presentation

Например самая как говорят популярная http://lab.hakim.se/reveal-js/#/

MYSQL PHP JS HTML CSS SEO TXT США СССР

Каталоги статей пустая трата В каких ситуациях пригодится Сделать дизайн сайта на

Зачем быть уникальным в мире, где все можно скопировать

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов