Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> CSS

Анимированная линия времени с CSS и 3D преобразованиями для сайта


Сегодня мы познакомимся с ещё одним экспериментальным уроком в котором будем использовать CSS и 3D эффекты. Идея заключается в том, чтобы увеличивать область контента по нажатию на радио кнопку.


    В этом интересном уроке, мы будем экспериментировать с трюками которые можно сделать с помощью радио кнопки, чтобы получить оригинальную линию времени используя CSS. Идея заключается в том, чтобы показать основное содержимое блока, по нажатию на связанную радио кнопку. Блок будет расширяться и вращаться с помощью 3D, что придаст некоторую глубину данному эксперименту. Для родительских элементов мы будем использовать CSS 3D трансформацию и переходы.

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

    Так же обратите внимание, что 3D эффекты, выглядят лучше в WebKit браузерах. К сожалению в FireFox, анимация протекает не так красиво.

    Давайте начнем!

    Разметка.

    Давайте создадим маркированный список, который будет иметь класс “timeline”.  И добавим несколько элементов списка, с классом “event ”. Каждый такой элемент, будет иметь радио кнопку, с назначенной нами картинкой, а так же блок для контента. Этот элемент по задумке будет трансформироваться, поэтому мы зададим ему класс “content-perspective”. Обратите внимание, что все радиокнопки, должны иметь одинаковые имена. Этим мы указываем, что принадлежать они будут к одной группе, по которой мы будем совершать клики.

<ul class="timeline">
     
    <li class="event">
        <input type="radio" name="tl-group" checked/>
        <label></label>
        <div class="thumb user-4"><span>19 Nov</span></div>
        <div class="content-perspective">
            <div class="content">
                <div class="content-inner">
                    <h3>I find your lack of faith disturbing</h3>
                    <p>Some text</p>
                </div>
            </div>
        </div>
    </li>
 
    <li class="event">
        <input type="radio" name="tl-group"/>
        <!-- ... -->
    </li>
 
    <!-- ... -->
 
</ul>

    Миниатюра изображения будет иметь класс “thumb” и дополнительный класс для каждого пользователя, в нашем случае от 1 до 8. В элементе <span> будет просто добавлена дата.

    CSS

    Обратите внимание, что в CSS стилях статьи, мы не будем указывать префиксы, их вы сможете найти в стилях демонстрации примера. Чтобы убрать некоторые свойства заданные умолчанию, мы переназначим их в следующем фрагменте:

*,
*:after,
*:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

    Следующее что мы сделаем, это подключим шрифт, который мы создали в fontello.com. Этот шрифт будет использовать только для 4 элементов, 2 для галочки радио кнопки, к которым мы применим классы “checked” и “unchecked”, а так же 2 для стрелки правой части блока с контентом. Это Awesome шрифты:

@font-face {
    font-family: 'fontawesome-selected';
    src: url("/zhitelyam/font/fontawesome-selected.eot");
    src: 
    url("/zhitelyam/font/fontawesome-selected.eot?") format('embedded-opentype'), 
    url("/zhitelyam/font/fontawesome-selected.woff") format('woff'), 
    url("/zhitelyam/font/fontawesome-selected.ttf") format('truetype'), 
    url("/zhitelyam/font/fontawesome-selected.svg") format('svg');
    font-weight: normal;
    font-style: normal;
}

    Для нашей линии времени, мы установим некоторые внутренние отступы, а так же назначим относительное позиционирование:

.timeline {
    position: relative;
    padding: 30px 0 50px 0;
    font-family: 'Gorditas', Arial, sans-serif;
}

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

.timeline:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    top: 0;
    left: 165px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
}

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

.event {
    position: relative;
    margin-bottom: 80px;
    padding-right: 40px;
}

    А сейчас, давайте займёмся левым блоком. Здесь мы хотим расположить миниатюру изображения, назначить абсолютное позиционирование, и сделать её круглой, установив радиус границ в 50%:

.thumb {
    position: absolute;
    width: 100px;
    height: 100px;
    box-shadow: 
        0 0 0 8px rgba(65,131,142,1), 
        0 1px 1px rgba(255,255,255,0.5);
    background-repeat: no-repeat;
    border-radius: 50%;
    transform: scale(0.8) translateX(24px);
}

    Мы так же добавили преобразование, которое немного сократит его масштаб. Нашей целью является сделать так, чтобы по нажатию на соответствующий переключатель, наша миниатюра увеличивала масштаб. Поскольку масштабирование перемещает недостаточно, мы могли бы так же поднять его по оси Х. Давайте сделаем это на 24 пикселя. Почему мы будем перемещать их всех? В один момент времени, будет открыт лишь один блок, поэтому мы добавляем псевдо-элемент, который будет прозрачной точкой  в нашей миниатюре, и задаём ей зигзагообразный фон, чтобы при выборе радио кнопки, происходила смежная анимация:

.thumb:before {
    content: '';
    position: absolute;
    height: 8px;
    z-index: -1;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);
    width: 51px;
    top: 42px;
    left: 100%;
    margin-left: 8px;
}

    Давайте зададим стиль  для даты. Мы установили его в положение абсолютного позиционирования  и расположили под маленькой картинкой:

.thumb span {
    color: #41838e; 
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    position: absolute;
    bottom: -30px;
}

    Пришло время определить различные фоновые изображения для пользователей (также мы могли бы использовать изображения вместо фонового цвета):

.user-1 {
    background-image: url(/zhitelyam/images/chewbacca.jpg);
}
 
.user-2 {
    background-image: url(/zhitelyam/images/barf.jpg);
}
 
.user-3 {
    background-image: url(/zhitelyam/images/darkhelmet.jpg);
}
 
.user-4 {
    background-image: url(/zhitelyam/images/darthvader.jpg);
}
 
.user-5 {
    background-image: url(/zhitelyam/images/leia.jpg);
}
 
.user-6 {
    background-image: url(/zhitelyam/images/vespa.jpg);
}
 
.user-7 {
    background-image: url(/zhitelyam/images/c3po.jpg);
}
 
.user-8 {
    background-image: url(/zhitelyam/images/dotmatrix.jpg);
}

    Для радио кнопки, мы будем использовать небольшую хитрость. Мы хотим, чтобы при выборе радио кнопки, происходили все необходимые переходы и изменения, для этого мы будем использовать состояние “checked ” для родственных селекторов.  Есть много способов реализовать это, один из них, с помощью метки label, которая будет активировать кнопку если мы на неё нажмём. Но мы не хотим, чтобы сама радиокнопка отображалась, поэтому мы разместим её в верхней части label метки и сделаем её прозрачной, а по нажатию на метку, она будет получать все необходимые входные данные автоматически. Это позволит выводить красивую метку, которая будет работать как кнопка ввода если на неё нажать. 

    Итак, давайте напишем стиль для метки, определим высоту, ширину, с позиционируем в виде блока и добавим отступы:

.event label,
.event input[type="radio"] {
    width: 24px;
    height: 24px;
    left: 158px;
    top: 36px;
    position: absolute;
    display: block;
}

    Поскольку событие нажатие по кнопке должно предшествовать всем другим элементам (помните, что мы хотим добраться до них через родительские селекторы), мы дадим ей более высокий z-index, чтобы она была в верхней части метки label. Если мы не сделаем этого, этикетка, естественно, будут выше и ничего не выйдет:

.event input[type="radio"] {
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

    Теперь, давайте создадим псевдо-элемент, который будет содержать маленькую иконку из файла шрифта, который мы включили ранее. Зададим ей абсолютное позиционирование и несколько отступов:

.event label:after {
    font-family: 'fontawesome-selected';
    content: '\e702';
    background: #fff;
    border-radius: 50%;
    color: #41838E;
    font-size: 26px;
    height: 100%;
    width: 100%;
    left: -2px;
    top: -3px;
    line-height: 24px;
    position: absolute;
    text-align: center;
}

    Давайте перейдем к правой стороне нашей линии времени, к содержанию. Нам нужна обёртка с перспективой, которая будет иметь левую границу, для перемещения его в сторону:

.content-perspective {
    margin-left: 230px;
    position: relative;
    perspective: 600px;
}

    Для  элемента “connect” содержащего часть кнопки ввода, мы будем использовать псевдо-элемент, который будет выглядеть как линия:

.content-perspective:before {
    content: '';
    width: 37px;
    left: -51px;
    top: 45px;
    position: absolute;
    height: 1px;
    z-index: -1;
    background: #fff;
}

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

    Итак, следующие стили будут поворачивать содержание на 10 градусов, что создаст впечатление, будто блок изнутри выталкивают, толкая в правый бок:

.content {
    transform: rotateY(10deg);
    transform-origin: 0 0;
    transform-style: preserve-3d;
}

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

.content-inner {
    position: relative;
    padding: 20px;
    color: #333;
    border-left: 5px solid #41838e;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background: #fff;
}

    Давайте создадим стиль для h3 заголовка содержимого:

.content-inner h3 {
    font-size: 26px;
    padding: 5px 0 5px 0;
    color: #41838e;
}

    Следующий элемент который мы создадим, будем параграф, для нас он будет иметь особое значение. Потому что мы не можем анимировать вот так height: auto (что было бы оптимальным, поскольку мы не знаем высоту элемента), поэтому мы будем использовать smart hack, предложенный Lea Verou. Ставим значение max-height равным 0, чтобы по умолчанию блок был скрыт. Заметьте, что это поможет создать нам нужный переход, если max-height будет близким к реальной высоте. Это не является хорошим решением, но в нашем примере, мы не хотим использовать JavaScript, поэтому данный вариант нам подходит более всего. Давайте определим некоторые стили для нашего параграфа.

    Итак, мы установим max-height в 0 пикселей и зададим ему прозрачный цвет текста:

.content-inner p {
    font-size: 1.8px;
    max-height: 0px;
    overflow: hidden;
    color: rgba(0,0,0,0);
    text-align: left;
}

    Во время анимации мы будем расширять пункт и анимировать альфа-прозрачность до RGBA 1, имитируя угасание.

    Давайте добавим маленькую стрелку в левой стороне, используя значок шрифта:

.content-inner:before {
    font-family: 'fontawesome-selected';
    content: '\25c2';
    font-weight: normal;
    font-size: 54px;
    line-height: 54px;
    position: absolute;
    width: 30px;
    height: 30px;
    color: #41838e;
    left: -22px;
    top: 19px;
    z-index: -1;
}

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

    Сначала, мы создадим задержку для миниатюры изображения, тега <span> содержащего время и заголовка блока с содержимым, она будет равна 0,2сек:

.thumb,
.thumb span,
.content-inner h3 {
    transition: all 0.6s ease-in-out 0.2s;
}

    Внутреннему содержанию так же нужен переход для поля с тенью:

.content-inner {
    transition: box-shadow 0.8s linear 0.2s;
}

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

.content {
    transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
}

    А сейчас, давайте добавим необходимый переход к максимальной высоте и цвету нашего параграфа:

.content-inner p {
    transition: max-height 0.5s linear, color 0.3s linear;
}

    Следующим шагом, мы создадим переход для нашей радио кнопки. Если она установлена в “checked”, т.е. её выбрали, мы меняем ярлычок для псевдо-класса, меняем цвет и добавляем белую тень:

.event input[type="radio"]:checked + label:after {
    content: '\2714';
    color: #F26328;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);
}

    Давайте также изменим цвет линий, заголовка, содержания и других:

.event input[type="radio"]:checked ~ .content-perspective:before {
    background: #F26328;
}
 
.event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {
    color: #F26328;
}

    Контент будет вращаться к фронту, т.е. создастся ощущение, будто контент толкнули в сторону миниатюры фотографии:

.event input[type="radio"]:checked ~ .content-perspective .content {
    transform: rotateY(-5deg);
}

    Здесь, для содержания мы определим другой цвет для границ и создадим тень:

.event input[type="radio"]:checked ~ .content-perspective .content-inner {
    border-color: #F26328;
    box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);
}

    Этот параграф, во время анимации будет изменять свой max-height на 260 пикселей, а цвет его станет более размытым из-за изменения прозрачности:

.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
    max-height: 260px; /* Add media queries */
    color: rgba(0,0,0,0.6);
    transition-delay: 0s, 0.6s;
}

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

    Давайте изменим цвет стрелки:

.event input[type="radio"]:checked ~ .content-perspective .content-inner:before {
    color: #F26328;
}

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

.event input[type="radio"]:checked ~ .thumb {
    transform: scale(1);
    box-shadow: 
        0 0 0 8px rgba(242,99,40,1), 
        0 1px 1px rgba(255,255,255,0.5);
}

    Дата так же изменит свой цвет:

.event input[type="radio"]:checked ~ .thumb span {
    color: #F26328;
}

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

.event input[type="radio"]:checked ~ .thumb:before {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);
}

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

@media screen and (max-width: 850px) { 
    .content-inner h3 {
        font-size: 20px;
    }
 
    .content-inner p {
        font-size: 14px;
        text-align: justify;
    }
 
    .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
        max-height: 500px; 
    }
}

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

@media screen and (max-width: 540px) {
    .timeline:before {
        left: 50px;
    }
 
    .event { 
        padding-right: 0px;
        margin-bottom: 100px;
    }
 
    .thumb {
        transform: scale(0.8);
    }
 
    .event input[type="radio"] {
        width: 100px;
        height: 100px;
        left: 0px;
        top: 0px;
    }
 
    .thumb:before,
    .event input[type="radio"]:checked ~ .thumb:before {
        background: none;
        width: 0;
    }
 
    .event label {
        display: none;
    }
 
    .content-perspective {
        margin-left: 0px; 
        top: 80px;
    }
 
    .content-perspective:before {
        height: 0px; 
    }
 
    .content {
        transform: rotateX(-10deg);
    }
 
    .event input[type="radio"]:checked ~ .content-perspective .content {
        transform: rotateX(10deg);
    }
 
    .content-inner {
        border-left: none;
        border-top: 5px solid #41838e;
    }
 
    .event input[type="radio"]:checked ~ .content-perspective .content-inner {
        border-color: #F26328;
        box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
    }
 
    .content-inner:before {
        content: '\25b4';
        left: 33px;
        top: -32px;
    }
 
    .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
        max-height: 300px; 
    }
}

    max-height  нам необходимо настроить еще раз, потому что сейчас у нас будет немного больше горизонтального пространство для абзаца.

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

    Вот и все! Надеюсь, вам понравилась данная статья и вы нашли её вдохновляющей!

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


Дата публикации: 28.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 557
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

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