React / Vue dev
Raisense - Nuxt.js project
Добавлено
17 апр 2020 в 22:30
Проблемы:
Решения:
- Основная задача состояла в том, чтобы предоставить кристально чистый веб-сайт, чтобы объяснить нашу главную цель в ИТ-индустрии без использования каких-либо причудливых изображений, различных цветов радуги. Ранее мы разрабатывали разные веб-сайты, но они не соответствовали нашему видению. Затем мы уделяем немного времени поиску вдохновения на сайте www.awwards.com.
- На нашем воображаемом веб-сайте мы решили использовать простую веб-анимацию. Я хотел сделать некоторые анимации WebGL на основе THREE.js, но это заняло бы некоторое количество времени, которого нам не хватало.
- Логотип и значок меню должны были быть липкими. Задача состояла в том, чтобы переключать их цвета на светлом и темном фоне.
- Отзывчивость сайта была немного сложной задачей. Потому что я не мог оставить анимацию как на рабочем столе.
- Доставка контента должна была быть легкой и простой. Были разные варианты, такие как Markdown, Headless CMS, Wordpress и т.д.
Решения:
- Во время исследования мы нашли hellomonday.com. Это действительно вдохновило нас и было очень похоже на сайт, который мы хотели создать. Конечно, мы не могли использовать модные GLSL, WebGL взаимодействия с нашим сайтом. Но основная концепция была взята с hellomonday.com
- Решением для анимации на основе SVG была Lottie, которую я и моя команда хотели попробовать в течение долгого времени. Основными особенностями Lottie являются гибкость, простота управления кадрами. Плюс это легкий из-за SVG. Более того, я хотел сделать морфируемую анимацию, которая меняет свою форму на основе пользовательской прокрутки.
- Чтобы решить проблему, я просто использовал простой JavaScript, чтобы изменить цвет логотипа SVG.
- Отзывчивость была непростой, но я выбрал худший способ: переключать элементы с помощью v-if в зависимости от размера экрана. Это был плохой путь, но он не повлиял на производительность из-за реактивности vue.js. Я просто нарушил правило СУХОГО. (Разработчик это знает)
- Для доставки контента я решил использовать Prismic, которая является одной из лучших Headless CMS.
