INVERSER
INVERSER
Powerful web-based technologies
Powerful web-based technologies
Email:
Mobile:
YouTube

1. Описание сайта.

Авторский сайт фотографа Ирины Сухенко. Создан для демонстрации её работ, а также возможности связаться по удобному для пользователя виду связи. Хотя, на первый взгляд, сайт кажется очень простым, но в нем есть свои удивительные моменты.

2. Функционал.

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

Кроме того, на сайте присутствует автоматическое добавление материалов при прокрутке страницы. Т.е., если пользователь опускается вниз страницы, находясь при этом в какой-либо категории, то при прокрутке, внизу появляются еще материалы (фото). Они появляются до тех пор, пока есть в базе данных. Очень удобный способ, который применяется большинством популярных социальных сетей и других сайтов. При этом пользователю не приходится переходить на другие страницы – он остается на одной и той же странице, при этом, может увидеть все материалы сайта.

Традиционно,сайт адаптирован для любого разрешения экрана. Его можно легко использовать на ПК, мобильном и планшете. При этом функционал сайта не теряется, а мобильная версия отсутствует, так как лишь некоторые функции нуждаются в специальном отображении для пользователей с мобильных или планшетов.

3. Видео представление.

4. Снимки и стиль.

Главная страница имеет удобный слайдер. Также с неё можно попасть в выбранные администратором материалы. Использовав меню, можно перейти в разделы сайта или к контактам, а также связаться с фотографом.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

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

  • началу страницы,
  • её концу
  • или же к месту, куда он прокрутил при просмотре.

Слайдер адаптирован для всех устройств. Им можно пользоваться как с компьютера, так и с мобильного (планшета). Перейти к следующему слайду можно четырьмя способами: по нажатию на изображение, по нажатию стрелок (внизу и вверху – справа от слайдера), а также нажимая на изображения под слайдером. Кроме того, он реагирует на swipe-действия – при который фотографии пролистываются при скольжении пальцев по экрану мобильного или планшета или удерживанию и перетаскиванию указателя мыши.

Также при смене слайдов меняются:

  • название фотографии,
  • ссылка в окне адреса обозревателя интернет,
  • слайды внизу,
  • количество «Сердечек» от пользователей сайта, для каждой фотографии – свое количество.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

Фотографию сохранить нельзя обычным способом: нажимая на ней правой кнопкой мыши.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

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

AJAX – технология обмена данными обозревателя интернет с сервером без перезагрузки страницы. Что это значит? Вы сможете посмотреть все фотографии, пролистывая страницу вниз. При этом, изначально на ней расположено только 16 фотографий. Прокручивая, Вы вызываете определенные функции, которые написаны мной. Они передают и принимают данные от сервера, поэтому можно видеть, как предыдущие фотографии загружаются внизу страницы. Это позволяет создать больше вариантов выбора для пользователя. Он сможет перейти к любой из этих фото, нажать «Сердечко», поделиться с друзьями в социальных сетях...

В момент, когда запрос посла и ожидается ответ от сервера, пользователь может видеть CSS3 анимацию загрузки данных.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

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

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

Контакты выглядят следующим образом. При этом, Вы можете заметить все ссылки на социальные сети и номера телефонов подаются в удобном для простого пользователя виде. Также фотография автора сайта слева от контактов и текст (который написан мной) внизу, создают прекрасный вид страницы.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

Один из интересных эффектов, которые я применил для этого сайта: плавное появление изображений.

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко

5. Быль сайта.

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

Демонстрация сайта от inverser.pro Сайт фотографа Ирины Сухенко


Добавить отзыв

Отзывов пока нет