Showcase Страница Описания Продуктов с Помощью CSS3

Showcase Страница Описания Продуктов с Помощью CSS3

Showcase Страница Описания Продуктов с Помощью CSS3

Страница продукта, — любая страница на сайте, которая демонстрирует продукт. Она должна показать лучшие изображения, и быть описательной. Естественно, это место, где вы строите интерес посетителей к вашему продукту, однако сегодня, все более и более трудно быть оригинальным, чтобы захватывать их внимание. К счастью, существует компактная библиотека JavaScript, которая помогает создавать впечатляющие страницы описания продуктов.

Демо | Скачать

impress.js небольшая, автономная библиотека, которая позволяет легко разрабатывать передовые CSS3 презентации с броскими эффектами. Но что, если использовать impress.js как нечто иное, чем презентации? Что, если приправить простую старую страницу продукта немного CSS3 магией!

HTML

Начнем с простого HTML5 документа, который будет основой примера.

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Страница Описания Продуктов с Помощью CSS3</title>

        <!-- Google Webfonts и таблица стилей -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="impress" class="impress-not-supported">

            <!-- Слайды будут здесь -->

        </div>

        <a id="arrowLeft" class="arrow"><</a>
        <a id="arrowRight" class="arrow">></a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/impress.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Ничего необычного. Подключаем Google шрифты и основную таблицу стилей, плюс ряд исходных файлов JavaScript перед закрывающим body тегом.

div #impress добавляет слайды. Идентификатор необходим, чтобы его признал impress.js (можно изменить идентификатор, передав другой идентификатор для вызова функции в script.js). Теперь мы получили стрелки, которые инициируют переходы между слайдами.

Последними на странице, располагаются исходные файлы JavaScript.

Showcase Страница Описания Продуктов с Помощью CSS3

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

Элементы слайдов сгруппированы в отдельные « шаги » дивы внутри контейнера #impress.

Использование impress.js

С этой маленькой библиотекой, можно создавать плавные переходы CSS3 между слайдами витрины. Чтобы сделать это, надо указать impress.js, как ориентировать слайды. Это легко сделать — нужно просто использовать атрибуты данных на шагах для дивов. Эти атрибуты преобразуются в реальные преобразования CSS3 в библиотеке, в зависимости от текущего браузера, и влияют на слайд.

Impress.js поддерживает ряд атрибутов:

  • data-x, data-y, data-z двигает слайд на экране в 3D — пространстве;
  • data-rotate, data-rotate-x, data-rotate-y вращает элемент вокруг указанной оси (в градусах);
  • data-scale — увеличивает или уменьшает скольжение.

Разметка слайдов:

<!-- Первый слайд сохраняет свое положение по умолчанию. -->
<div id="intro" class="step" data-x="0" data-y="0">
    <h2>Introducing Galaxy Nexus</h2>
    <p>Android 4.0<br /> Super Amoled 720p Screen<br />
    <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<!-- Компенсируем второй слайд, вращая и увеличивая его в 1,8 раза -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
    <h2>Simplicity in Android 4.0</h2>
    <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
    <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- То же самое для остальных .. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <h2>Connect & Share</h2>
    <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
    <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
    <h2>Instant Upload</h2>
    <p>Your photos upload themselves with Instant Upload, which makes ..</p>
    <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
    <h2>Jam on with Google Music</h2>
    <p>Google Music makes discovery, purchase, and listening effortless and..</p>
    <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

При запуске слайд — шоу, impress.js будет компенсировать эти преобразования, и применять правила обратно к #impress div плавным переходом CSS. Результат, — презентация, которую вы видите на Демо. Конечно, необходимо вручную настроить атрибуты данных каждого слайда для достижения наилучшего результата.

CSS

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

assets/css/style.css
/*----------------------------
    Стилизация презентации
-----------------------------*/

#impress:not(.impress-not-supported) .step{
    opacity:0.4;
}

#impress .step{
    width:700px;
    height: 600px;
    position:relative;
    margin:0 auto;

    -moz-transition:1s opacity;
    -webkit-transition:1s opacity;
    transition:1s opacity;
}

#impress .step.active{
    opacity:1;
}

#impress h2{
    font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
    color:#444648;
    position:absolute;
    z-index:10;
}

#impress p{
    font: normal 18px/1.3 'Open Sans', sans-serif;
    color:#27333f;
    position:absolute;
    z-index:10;
}

#impress img{
    position:absolute;
    z-index:1;
}

Как видете в приведенных выше правилах, а также во фрагменте HTML в начале этого урока, контейнеру #impress назначается класс .impress-not-supported. Класс срабатывает только если текущий браузер поддерживает функциональные возможности, необходимые для библиотеки, чтобы успешно работать.

Теперь нужно установить отдельные слайды. Здесь только классы для первого слайда, остальные в артиве / CSS / styles.css.

 

/*----------------------------
    Слайд 1 - Intro
-----------------------------*/

#impress #intro{
    width: 500px;
}

#intro h2{
    text-align: center;
    width: 100%;
}

#intro p{
    font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
    t

Все…, осталось инициировать impress.js для сниппета и клики по стрелкам.

JQuery

Для того, чтобы инициализировать библиотеку Impress нам нужно вызвать метод с тем же именем. Это также возвращает новый объект, с помощью методов для отображения предыдущих / следующих слайдов.

script.js
$(function(){

    var imp = impress();

    $('#arrowLeft').click(function(e){
        imp.prev();
        e.preventDefault();
    });

    $('#arrowRight').click(function(e){
        imp.next();
        e.preventDefault();
    });

});

Showcase Страница Описания Продуктов с Помощью CSS3 Готова!

Демо | Скачать

Готово!

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

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *