×

Создать сайт или лендинг бесплатно

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

ВСЕ ОЧЕНЬ ПРОСТО

1 Войдите или зарегистрируйтесь.
2 На соответствующих страницах появятся ссылки для перехода к инструментам.
3 Ознакомьтесь с инструкцией и приступайте.

Если у вас возникнут проблемы пишите на [email protected] . Благодарим что вы с нами!

О сайте

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

FORGOT YOUR DETAILS?

CREATE ACCOUNT

Swatch Book с CSS3 и JQuery

Swatch Book. Создаем классный экземпляр с помощью CSS3 и JQuery

Swatch Book

CSS3 + JQuery

Введение

Сегодняшнее веб дизайн обучение о создании анимированных Swatch Book с помощью преобразования вращения CSS и JavaScript. Это сделает создание сайта более изысканно результативным.

Идея состоит в том, чтобы показать Swatch Book, как веерную структуру и сделать отдельные образцы интерактивными. После нажатия на образец, мы будем вращать другие образцы с целью выявления одного выбранного.

Мы будем опускать префиксы в этом учебнике. Но вы, конечно, найдете их в скачанных файлах.  

Смотреть образец

Swatch Book разметка

Swatch Book

Последний блок Swatch Book не будет иметь класса и вместо заголовка h4 будет h5. Это будет верхний слой нашей Swatch Book.

Теперь займемся стилем.

Swatch Book CSS

Во-первых, давайте определим стиль для основного контейнера. Мы сделаем его такой же ширины, как один из образцов (хотя они будут занимать больше места), так что мы можем легко центрировать его:

Swatch Book

Наша цель заключается в создании Swatch Book, как структуры с несколькими Swatch "листами". Каждый из них будет вращаться с помощью CSS преобразования и JS.

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

Преобразование-происхождения будет определять, как наши образцы будут повернуты. Поскольку мы хотим использовать нижний левый угол для этого, мы установим значение 25% 90%.

Значение " backface-visibility: hidden;" поможет избежать зубчатого эффекта, глядя на текст при повороте:

Swatch Book

Давайте определим цвет фона и свойства тени для каждого элемента:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.sb-container div:nth-child(1){
    background-color: #ea2a29;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
    background-color: #f16729;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
    background-color: #f89322;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
    background-color: #ffcf14;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
    background-color: #ffea0d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
    background-color: #87b11d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
    background-color: #008253;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
    background-color: #3277b5;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
    background-color: #4c549f;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
    background-color: #764394;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
    background-color: #ca0d86;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}

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

Последний образец будет служить в качестве прикрытия, поэтому мы дадим ему особый фон и значение тени:

Swatch Book

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

Положение зависит от преобразования-происхождения образцов. И так как мы выбрали нижний левый угол, мы установим соответствующее положение латунной застежки:

Swatch Book

Добавим стиль заголовкам:

Swatch Book

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

Swatch Book

И последнее, но не менее важное, давайте стилевые классы значкам. Мы будем использовать значки и шрифт, который мы сформировали на Fontello (Entypo набор иконок):

span.sb-icon{
display: block;
height: 70px;
width: 70px;
margin: 20px auto;
user-select: none;
}
span.sb-icon:before {
font-family: 'icons';
font-style: normal;
font-weight: normal;
speak: none;
display: block;
text-decoration: inherit;
text-align: center;
text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
line-height: 64px;
width: 100%;
font-size: 60px;
color: #000;
text-shadow: 0 0 1px #000;

}
.icon-cog:before { content: '\35'; } /* '5' */
.icon-flight:before { content: '\37'; } /* '7' */
.icon-eye:before { content: '\34'; } /* '4' */
.icon-install:before { content: '\39'; } /* '9' */
.icon-bag:before { content: '\36'; } /* '6' */
.icon-globe:before { content: '\38'; } /* '8' */
.icon-picture:before { content: '\32'; } /* '2' */
.icon-video:before { content: '\30'; } /* '0' */
.icon-download:before { content: '\41'; } /* 'A' */
.icon-mobile:before { content: '\42'; } /* 'B' */
.icon-camera:before { content: '\33'; } /* '3' */

Со стилем все! Теперь добавим немного магии.

Swatch Book JAVASCRIPT

Сначала рассмотрим возможности плагина:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.SwatchBook.defaults = {
    // index of initial centered item
    center : 6,
    // number of degrees that is between each item
    angleInc : 8,
    speed : 700,
    easing : 'ease',
    // amount in degrees for the opened item's next sibling
    proximity : 45,
    // amount in degrees between the opened item's next siblings
    neighbor : 4,
    // animate on load
    onLoadAnim : true,
    // if it should be closed by default
    initclosed : false,
    // index of the element that when clicked, triggers the open/close function
    // by default there is no such element
    closeIdx : -1,
    // open one specific item initially (overrides initclosed)
    openAt : -1
};
Параметры означают следующее:
  • center: Индекс "центрального" пункта, того, который будет иметь угол 0 градусов, когда Книга открывается
  • angleInc: Пространство между элементами (в градусах)
  • speed & easing: Функции скорости и перехода
  • proximity: Расстояние от открывшегося элемента до следующего
  • neighbor: Расстояние от ближайших элементов до открывшегося
  • onLoadAnim: Если этот параметер задан, книга откроется с переходом при клике, в противном случае она будет открыта по умолчанию
  • initclosed: Если этот параметер задан, книга будет изначально закрыта
  • closeIdx: Индекс элемента, который будет вызывать функцию Swatch книги при нажатии
  • openAt: Индекс элемента, который будет открывать книгу изначально
Начнем с выполнения _init функции:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
_init : function( options ) {
    this.options = $.extend( true, {}, $.SwatchBook.defaults, options );
    this.$items = this.$el.children( 'div' );
    this.itemsCount = this.$items.length;
    this.current = -1;
    this.support = Modernizr.csstransitions;
    this.cache = [];
    if( this.options.onLoadAnim ) {
        this._setTransition();
    }
    if( !this.options.initclosed ) {
        this._center( this.options.center, this.options.onLoadAnim );
    }
    else {
        this.isClosed = true;
        if( !this.options.onLoadAnim ) {
            this._setTransition();
        }
    }
    if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) {
        this._openItem( this.$items.eq( this.options.openAt ) );
    }
    this._initEvents();
}

Здесь мы в основном кэшируем некоторые элементы и инициируем некоторые переменные, которые будут использоваться позже. Кроме того, мы должны установить, будет ли книга изначально открыта или закрыта. Если она должна быть закрыта, мы должны установить CSS переходы для элементов (_setTransition function).

Наконец мы загружаем события кликов по пунктам.

1
2
3
4
5
6
7
_setTransition : function() {
    if( this.support ) {
        this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } );
    }
}

Когда мы нажимаем на один из элементов, деталь будет вращаться, потому что она имеет значение 0 градусов. Нам также необходимо повернуть соседние элементы таким образом, что бы мы могли читать содержание открывшегося:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
_initEvents : function() {
    var self = this;
    this.$items.on( 'click.swatchbook', function( event ) {
        self._openItem( $( this ) );
    } );
}
_openItem : function( $item ) {
    var itmIdx = $item.index();
    if( itmIdx !== this.current ) {
        if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) {
            this._openclose();
            this._setCurrent();
        }
        else {
            this._setCurrent( $item );
            $item.css( { 'transform' : 'rotate(0deg)' } );
            this._rotateSiblings( $item );
        }
    }
}

Функция _rotateSiblings выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
_rotateSiblings : function( $item ) {
    var self = this,
        idx = $item.index(),
        $cached = this.cache[ idx ],
        $siblings;
    if( $cached ) {
        $siblings = $cached;
    }
    else {
        $siblings = $item.siblings();
        this.cache[ idx ] = $siblings;
    }
    $siblings.each( function( i ) {
        var rotateVal = i < idx ?
            self.options.angleInc * ( i - idx ) :
            i - idx === 1 ?
                self.options.proximity :
                self.options.proximity + ( i - idx - 1 ) * self.options.neighbor;
        var transformStr = 'rotate(' + rotateVal + 'deg)';
        $( this ).css( { 'transform' : transformStr } );
    } );

В принципе, мы вращаем следующие элементы таким образом, что они оставляют нужное пространство, чтобы прочитать содержание. Сама величина определяется в параметрах (proximity and neighbor).

Если мы хотим, чтобы книга была изначально закрыта, или мы определяем элемент, чтобы вызвать открывание / закрывание, то функция для клика на этом элементе будет открыть / закрыть книгу, в зависимости от его текущего состояния:

_openclose : function() {
    this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } );
    this.isClosed = !this.isClosed;
}

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

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

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

Мэри Лу  (Маноэла Илич).

TOP SQL requests:106. Generation time:0,579 sec. Memory consumption:18.44 mb