Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2014, 13:40
Интересующийся
Отправить личное сообщение для factory_girl Посмотреть профиль Найти все сообщения от factory_girl
 
Регистрация: 30.05.2014
Сообщений: 10

Javascript-driven анимация, зависящая от скролла страницы пользователем
Здравствуйте.
Мне нужно реализовать длинную посадочную страницу а-ля https://rocketbank.ru
Суть в том, что движение анимации должно зависеть от скролла пользотвателем (пользователь читает - анимация стоит, пользователь начал прокручивать страницу - начинается движение анимации)
Я подозреваю есть какая-то стандартная возможность для этого в jQuery. По аналогии с тем, как сделано здесь (нажмите на дверь и посмотрите как движутся осколки стекла: http://students.uni-vologda.ac.ru/pages/pm08/krl/ но только здесь зависимость от движений мыши, а мне нужно от скролла).
Подскажите, пожалуйста, с помощью каких функций/библиотек это можно реализовать, насколько сложно/долго такую анимацию сделать человеку с нормальным пониманием яваскрипта и что для этого нужно?
Каким образом дизайнер должен нарисовать эту анимацию, по кадрам или как, в одном файле или для кадого кадра отдельный и как это всё соединяется в яваскрипте?
Нужно кроссплатформленное решение, Safari, Chrome, Firefox. Жел-но чтобы Opera, IE и мобилка(Android, iOS) тоже работали.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2014, 14:20
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

1. window.onscroll Отслеживать скролл, при достижении нужной позиции принимать решение о запуске то или иной "анимации" (цепочка анимированного показа блоков).
2. на rocketbank.ru вся "анимация" в телефонах это - HTML5 Video
3. на втором сайте это parallax scrolling
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2014, 14:43
Интересующийся
Отправить личное сообщение для factory_girl Посмотреть профиль Найти все сообщения от factory_girl
 
Регистрация: 30.05.2014
Сообщений: 10

Супер, спасибо за инфомрацию. На рокетбанке да, не совсем то, что нужно. http://makot.me -вот более точный пример, что хотелось бы видеть. Там что?
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2014, 14:41
Интересующийся
Отправить личное сообщение для factory_girl Посмотреть профиль Найти все сообщения от factory_girl
 
Регистрация: 30.05.2014
Сообщений: 10

И в каком виде должна быть нарисована эта анимация (в PSD по кадрам или как?), чтобы с ней можно было так работать в яваскрипте?
Ответить с цитированием
  #5 (permalink)  
Старый 06.06.2014, 15:23
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

factory_girl,
посмотрите как здесь реализовано.

вот еще
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправить почту из страницы через javascript prog90 Javascript под браузер 5 14.09.2012 17:38
Порядок загрузки страницы и javascript prog90 Events/DOM/Window 9 18.12.2010 21:42
DOM javascript загрузка удаленной страницы galiaf45 AJAX и COMET 1 28.03.2010 19:33
WYSIWYG редактор текста HTML страницы на javascript Дмитри Чижиков Ваши сайты и скрипты 4 14.09.2009 17:05
Замена текста в нутри страницы через JavaScript kqlek Общие вопросы Javascript 10 28.04.2009 23:33