Шаблон магазина фото товаров - Photographer

Codrops' Photography Website Concept - компоновка сайта с горизонтальным слайдером пачек фотографий, раскрывающихся по вертикали в страницу привычного вида, и фоновым изображением с эффектом 3D-наклона в сторону двигающегося курсора мыши.

Как об этом рассказал Codrops

Источник tympanus.net/codrops/2015/05/06/photography-website-concept (страница на английском языке).

Сегодня хотим показать идею компоновки фотографического веб сайта. Концепт основан на слайдере нескольких фото, разложенных в пачки и демонстрируемых с помощью Flickity, а когда пачка раскрывается, она скользит вверх и показывает контент пачки. Фоновое изображение реагирует на движение мыши, создаёт иллюзию наклона, подобную эффекту, замеченному в проекте DNA - интерактивный сайт-альбом j.viewz. Как только пачка фотографий раскрыта, фоновое изображение преобразуется в маленькую круглую эмблему и перемещается вверх - идея эффекта вдохновлена анимированным скриншотом картинки профиля в Dribbble Алексея Оксанченко.

Живое демо tympanus.net/Development/PhotographyWebsiteConcept

Обратите внимание, это экспериментальная разработка, создана для современных браузеров. InternetExplorer плохо работает с viewport значениями, которые мы использовали в некоторых преобразованиях, поэтому вы не увидите слайдинг контента.

Вот начальный вид, где пачки фотографий показаны как слайдер по низу экрана, он появляется, когда все фото загрузятся (до этого момента на месте слайдера виден индикатор загрузки из мигающих точек).

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

Изображение фона - от Pawel Kadysz из TookAPic.

Надеемся, вам понравится эта компоновка и воодушевит.

Что предложила Impera CMS

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

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

Страница контактов

Страница обратного звонка

Обычная форма, при наличии ошибок заполнения подсвечивает неправильные поля, а в полях hover- и focus-события выдают под полем описание ошибки.

Страница оформленного заказа

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

Поиск

Кроме результатов поиска, содержит поле поиска, под ним - история "что искали другие".

Публикации

Обычный список с датой и краткой аннотацией к каждой публикации, ссылка на подробное чтение. В конце списка пагинация страниц.

Страница 404

Вид на узком экране

Ссылки

Живое демо demo.imperacms.com/?theme=Photographer

Скачать шаблон imperacms.com/files/media/Photographer.zip (шаблон бесплатен для пользователей Impera CMS).

Файлы шаблона

Перечислим все файлы шаблона с иерархией папок. Напомним, стандартный шаблон состоит из папок: css - стили, fonts - нестандартные шрифты, html - вёрстка, images - картинки, js - скрипты. В папке html хранятся tpl- или htm-файлы шаблона, представляющие собой исходные коды вёрстки. В этой папке файл index.tpl является макетом страницы без центрального блока, остальные файлы являются макетами центрального блока для конкретных страниц. Файл helper.php является расширением функций шаблона, здесь обычно размещают дополнительные php-функции, если таковые необходимы в шаблоне.

• css
  • style.css - стили
• fonts
  • flaticon.eot - Иконочный шрифт (embedded-opentype версия)
  • flaticon.svg - Иконочный шрифт (svg версия)
  • flaticon.ttf - Иконочный шрифт (truetype версия)
  • flaticon.woff - Иконочный шрифт (woff версия)
• html
  • common
    • check404.htm - проверка неучтённых случаев "Ошибка 404"
    • comments.htm - блок комментариев
    • no-items.htm - блок "нет элементов"
    • product-card.htm - блок "карточка товара"
    • publication-card.htm - блок "карточка публикации"
    • share.htm - блок "поделиться в соцсетях"
  • email
    • callme-to-admin.htm - шаблон письма админу о запросе обратного звонка
    • callme-to-user.htm - шаблон письма клиенту об успешном принятии его запроса
    • feedback-to-admin.htm - шаблон письма админу о сообщении обратной связи
    • feedback-to-user.htm - шаблон письма клиенту об успешном принятии его сообщения
  • other-pages
    • about.htm - страница "О нас"
    • categorized.htm - страница "Каталог по разделам"
    • featured.htm - страница "Специальные товары"
  • sms
    • callme-to-admin.htm - шаблон СМС админу о запросе обратного звонка
    • callme-to-user.htm - шаблон СМС клиенту об успешном принятии его запроса
    • feedback-to-admin.htm - шаблон СМС админу о сообщении обратной связи
    • feedback-to-user.htm - шаблон СМС клиенту об успешном принятии его сообщения
  • article.htm - страница статьи
  • articles.htm - список статей
  • callme.htm - страница обратного звонка
  • cart.htm - страница корзины
  • catalog.htm - главная страница (каталог по производителям)
  • feedback.htm - страница обратной связи
  • helper.php - хелпер шаблона (вспомогательные php функции)
  • index.tpl - макет страницы
  • missing_template.htm - заглушка для отсутствующих файлов шаблона (грубо говоря, страница 404)
  • navigation.htm - пагинация страниц
  • news.htm - список новостей
  • news_item.htm - страница новости
  • order.htm - страница заказа
  • price.htm - прайс-лист
  • product.htm - страница товара
  • products.htm - список товаров
  • search.htm - страница поиска
  • sitemap.htm - карта сайта
  • static_page.htm - статическая страница
• images
  • demo - папка с демо картинками (можете удалить на реальном сайте)
    • codrops.png - постер (для страницы "О нас")
    • impera.png - логотип (для страницы "О нас")
    • product-1.jpg - товар 1
    • product-2.jpg - товар 2
    • product-3.jpg - товар 3
    • product-4.jpg - товар 4
    • product-5.jpg - товар 5
    • product-6.jpg - товар 6
    • publication-1.jpg - публикация 1
    • publication-2.jpg - публикация 2
  • 404.jpg - картинка "страница не найдена"
  • arrow-colored.svg - картинка "раскрыть пачку элементов"
  • arrow-gray.svg - картинка "следующая пачка элементов"
  • background.png - фон главной страницы (снимок фотографа)
  • background-body.png - фон страниц (едва заметная мелкая сеточка)
  • favicon.ico - ярлыковая иконка
  • map.jpg - картинка "наш магазин на карте"
  • no-photo.png - картинка "нет фотографии" (для товара)
  • no-photo-publication.png - картинка "нет фотографии" (для публикации)
  • three-dots.svg - картинка "индикатор загрузки"
  • thumbnail.jpg - миниатюра шаблона
• js
  • flickity.pkgd.min.js - скрипт слайдера Flickity (v.1.0.0)
  • modernizr.custom.js - скрипт Modernizr (v.2.8.3, выборочная сборка)
  • script.js - скрипты шаблона
  • smoothscroll.js - скрипт мягкого скролла

Обсуждение

«Сергей | 17 май 15:16

Баг. На смартфоне с частотой процессора 800мгц автоматическое раскрытие контента раз через раз срабатывает. Смотрел в script.js, похоже интервал автоклика недостаточен для медленного устройства.

Ответить

«Андрей | 18 май 21:27

Там клик посреди инита фликити стоит, мб поэтому клик успевает быстрее чем фликити проинициализировался. Ну а 800 мгц это ж архаика. Наверно еще и экран 320/240?

Ответить

«Николай | 30 май 11:14

Опечатка в sitemap.htm на строке 176.
Вместо {news count=250 assign=articles}
должно быть {articles count=250 assign=articles}

Ответить

«Разработчик | 3 янв 12:34

Появилось ещё одно интересное решение с Кодропса - лендинг Synthetica.

Ответить

Написать комментарий

Ваш комментарий:

Как вас назвать:Код с картинки: Отправить

Нажатием кнопки "Отправить" даю согласие на обработку моих данных службами сайта.

Допустимые теги:опционально парные: [shot=image-url]alt[/shot] [link=page-url]txt[/link]
всегда парные: [quote]src[/quote] [code]src[/code]
одинарные: [youtube=video-url]
и символы: « »

Другие обсуждения »