Проект Flatiron School Project 3: Виртуальная художественная галерея

В модуле 3 моего обучения в Flatiron School мы с партнером создали одностраничное приложение, используя Javascript во внешнем интерфейсе и Ruby on Rails для внутреннего интерфейса. Мы решили создать виртуальную картинную галерею, которая воссоздала бы ощущение пребывания в музее. Хотя нас вдохновляли такие сайты, как Коллекция Фрика, Смитсоновский музей и серия «Внимательного чтения» картин New York Times, мы также стремились пойти еще дальше в обеспечении осязаемого и интерактивного взаимодействия с пользователем во внешнем интерфейсе. Ниже перечислены некоторые уникальные особенности нашего сайта:

Визуальные и аудиотуры по картинам (с масштабированием с возможностью прокрутки)

Одной из функций этого приложения является визуальный тур по картине с помощью масштабирования с возможностью прокрутки. Вот видео, демонстрирующее эту функцию:

У этой функции прокрутки и масштабирования было несколько аспектов. Во время прокрутки изображение остается фиксированным на странице, в то время как контейнеры для заметок постепенно поднимаются. Используя прослушиватель событий «window.onscroll», мы устанавливаем диапазоны «window.pageYOffset» (количество пикселей, которые прокручиваются от верхней части окна). В пределах этих диапазонов мы использовали свойство CSS transform для изменения масштаба изображения и, таким образом, увеличения различных элементов. Кроме того, свойство стиля transformOrigin позволяет нам устанавливать разные источники изображения для увеличения.

Поскольку мы хотели, чтобы масштабирование реагировало на прокрутку, мы написали функцию для расчета скорости изменения прокрутки и, таким образом, возврата соответствующего значения y для масштаба масштабирования. Функция ниже:

// Calculate linear value based on scroll position
function getLinearValue(yOffset1, yOffset2, scale1, scale2){
  let currentYOffset = yOffset // current scroll position
  let x2 = yOffset2 //x2
  let x1 = yOffset1 //x1
  let scaleY2 = scale2 //y2
  let scaleY1 = scale1 //y1
  let slope = (scaleY2 - scaleY1)/(x2 - x1) // Calculate slope
  let b = scaleY1 - (slope * x1) // calculate y-intercept
  //Calculate y- value for x-offset value
  let currentScale = (slope * currentYOffset) + b 
  return currentScale // Return linear y-value
}

В зависимости от текущей позиции прокрутки свойство преобразования CSS будет увеличиваться или уменьшаться с той же скоростью прокрутки. Это выглядело бы так:

window.onscroll = () => {
  let yOffset = window.pageYOffset
  //Set initial scale and position of image
  if (yOffset > 1 && yOffset < 250){
    svgTag.style.transform = "scale(1.0)"
    svgTag.style.transformOrigin = "50% 50%"
  }
  // Transform scale of image as user scrolls down
  if (yOffset > 250 && yOffset < 766){
    svgTag.style.transform = `scale(${getLinearValue(250, 766, 1.0, 2.0)})`
    svgTag.style.transformOrigin = "75% 75%"
    svgTag.style.transition = "transform .3s"
  }
[...]
}

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

Художественно оформленные картины с использованием HTML Canvas

С помощью холста HTML мы могли «рисовать» рисунки и фреймы на DOM. После создания таблицы с информацией о картинах и изображениями, мы создали элемент холста для каждой картины, чтобы создать эффект, описанный выше. Наш предполагаемый эффект состоял в том, чтобы воспроизвести осязаемый опыт пребывания в музее.

Увеличение изображения с помощью библиотеки JQZoom

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

Интерактивное искусство

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

Конечный продукт

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

Это ссылка на репозиторий GitHub: https://github.com/chsohn15/final_art_gallery