Всё для сайтов

Концепт фото сайта, предложенный Codrops, и реализованный Имперой в полноценном шаблоне интернет магазина.

Будьте в курсе событий

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

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

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

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

Страница 404

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

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

Ссылки

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

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

Порядок установки

1 Скачать архивный файл шаблона на компьютер или скопировать URL ссылки выше.

2 Открыть в админпанели страницу дизайн > Дизайны сайта. Если там уже есть такой шаблон, нажать напротив него крестик, чтобы удалить старый.

3 Нажать ссылку загрузить в блоке Дизайны клиентской стороны.

4 В открывшемся окне выбрать скачанный файл или полем ниже вставить URL скопированной ссылки и нажать кнопку Начать.

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

Перечислим все файлы шаблона с иерархией папок. Напомним, стандартный шаблон состоит из папок: 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.
Ответить

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

Теги: фото сайт, photographer, codrops, flickity

Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.

Предложить

Следите за нашими публикациями в социальных сетях и новостных каналах.