Говорят, если вы не знаете, что делать, когда украшаете комнату, выберите предмет мебели и спроектируйте вокруг него. Это метод, который я использовал, чтобы выбрать идею проекта для фазы 4 программы разработки программного обеспечения Flatiron. Поскольку мы приступили к javascript, я знал, что хочу использовать javascript для создания анимации параллакса на основе курсора, используя эффект параллакса для создания искусственной глубины. Я чувствовал, что наиболее интуитивно понятной и простой концепцией для этого было пространство со слоями звезд. Это я занимался космосом, веб-сайт Музея авиации и космонавтики казался наиболее логичным проектом.
Итак, первое, над чем я работал, это полный обзор фона пространства, который создавал анимацию параллакса на основе вашего курсора. Я начал с поиска примеров кода, чтобы увидеть, как это сделали другие люди, и код был на удивление простым.
Вы настраиваете свой div с несколькими фоновыми изображениями, устанавливаете переменные для высоты окна, ширины, положения мыши по осям x и y, создаете отдельную глубину для каждого из слоев вашего фона в зависимости от положения мыши и размера окна (вы заметите они *.00001, это тот множитель, который создает ощущение глубины и творит настоящее волшебство). Затем вы сохраняете их все в переменную и устанавливаете для нее значение backgroundPosition. Все это обновляется на «mousemove».
Я хотел сделать еще один шаг вперед, поэтому я нашел доступ к акселерометру мобильных устройств. Javascript имеет встроенные функции для доступа к акселерометру, поэтому нужно было просто получить доступ к «ориентации устройства» и установить тайм-аут, а затем оператор if, чтобы проверить, есть ли у браузера доступ к DeviceOrientationEvent и onTouchStart, чтобы определить, использовать ли мобильное приложение. версию или настольную версию.
Этот код все еще нуждается в некоторой доработке. В настоящее время большинство моих фоновых слоев сглажены, и я пока не совсем уверен, связано ли это с несовместимостью мобильного браузера с мультифоновым css или с другой проблемой, но я продолжу ее отлаживать. Мне также нужно будет в конечном итоге настроить запрос разрешения (который, как вы видите, я уже начал) для устройств Apple, которым требуется разрешение на доступ к акселерометру. Но я продолжу работу над мобильной версией этого эффекта.
Еще одной целью, которую я преследовал для этого сайта, была небольшая образовательная игра. Поскольку это был веб-сайт музея авиации и космонавтики, а в музеях всегда есть небольшие интерактивные образовательные элементы, я хотел сделать небольшую головоломку «привести в порядок солнечную систему». Это была еще одна удивительно простая задача. Хотя было несколько вопросов. Я использовал библиотеку CreateJS и Canvas, чтобы упростить задачу.
Две проблемы, с которыми я столкнулся, заключались в том, что javascript не смог получить доступ к области this.slot0.x изнутри функции внутри цикла. Таким образом, мой обходной путь для этого заключался в сохранении позиций x в массив. Затем я столкнулся с другой проблемой, так как я планировал использовать переменную i из своего цикла для динамического определения того, какой элемент в массиве мне нужен, но я также не смог получить доступ к переменной i из функции внутри цикла. Итак, я закончил тем, что разделил имя цели и сохранил число из имени в новую переменную и использовал это число для вызова соответствующего номера массива. Вот как я определяю, когда вы бросаете кусочки в правильном месте.
Следующей моей большой задачей были мои полиморфные ассоциации. В моем проекте было три основных модели. Заказ билетов в музей, театр в музее (в музеях всегда есть такие кинотеатры, часто 4D, с познавательными фильмами) и кафетерий при музее. Все эти сгенерированные (has_many) билеты. Поэтому имело смысл установить полиморфную ассоциацию с моделью билетов. Это был мой первый раз, когда я использовал эту функцию, но оказалось, что это довольно просто. Правильно настроить мои столбцы и сказать, что это полиморфно.
Другими проблемами, с которыми я столкнулся, было позиционирование iFrames, так как я использовал 2. (Моя игра и видео, которое я встроил на главную страницу.) Но в целом я вполне доволен финалом. Конечно, я не думаю, что когда-нибудь назову его полностью законченным. Но сколько людей когда-либо смотрели на проект и говорили: «Да, я думаю, что он закончен»? ;)
