Добавление анимации к слайдеру героя

В части III нашей серии Slick Slider мы покажем вам, как добавить анимацию в ваш Hero Slider с помощью animate.css от Дэниела Идена. CSS стал более мощным, чем когда-либо, и плагины, которые были созданы в результате, позволяют вам добавить интерактивности на ваш сайт, как никогда раньше. Эта статья покажет вам, как добавить анимацию в слайдер героев с помощью animate.css.

Если вы пропустили Часть I нашей серии Slick Slider о добавлении главного слайдера на свой сайт, вы можете найти ее здесь.

Ниже приведены HTML, CSS и JavaScript, необходимые для анимации ваших главных изображений.

Шаг 1

Добавьте приведенный ниже HTML-код туда, где вы хотите разместить слайдер анимированного героя.

<div class="ct-header ct-header--slider ct-slick-custom-dots" id="home">
   <div class="ct-slick-homepage" data-arrows="true" data-autoplay="true">
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide1.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Big Data. Realtime Insight.</h1>
                        <p class="animated">Leverage your data and improve marketing and sales ROI.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide2.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Disrupting Industries with Grace</h1>
                        <p class="animated">WebCorpCo is at the forefront of digital marketing, content management, automated marketing, and more.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="ct-header tablex item" data-background="https://www.solodev.com/assets/hero-slider/slide3.jpg">
         <div class="ct-u-display-tablex">
            <div class="inner">
               <div class="container">
                  <div class="row">
                     <div class="col-md-8 col-lg-6 slider-inner">
                        <h1 class="big animated">Moving Business Forward</h1>
                        <p class="animated">Learn how WebCorpCo can take your business to the next level.</p>
                        <a class="btn btn-transparent btn-lg text-uppercase animated" href="">Learn More</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- .ct-slick-homepage -->
</div>
<!-- .ct-header -->

Шаг 2

Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.

.slick-slider
{
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
}
.slick-list
{
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
}
.slick-list:focus
{
        outline: none;
}
.slick-list.dragging
{
        cursor: pointer;
        cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track
{
        position: relative;
        top: 0;
        left: 0;
        display: block;
}
.slick-track:before,
.slick-track:after
{
        display: table;
        content: '';
}
.slick-track:after
{
        clear: both;
}
.slick-loading .slick-track
{
        visibility: hidden;
}
.slick-slide
{
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
}
[dir='rtl'] .slick-slide
{
        float: right;
}
.slick-slide img
{
        display: block;
}
.slick-slide.slick-loading img
{
        display: none;
}
.slick-slide.dragging img
{
        pointer-events: none;
}
.slick-initialized .slick-slide
{
        display: block;
}
.slick-loading .slick-slide
{
        visibility: hidden;
}
.slick-vertical .slick-slide
{
        display: block;
        height: auto;
        border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
        display: none;
}
.slick-prev,
.slick-next {
        position: absolute;
        display: block;
        width: 60px;
        height: 100px;
        cursor: pointer;
        background: transparent;
        top: 50%;
        margin-top: -45px;
        font-size: 0;
        border: none;
        z-index: 2;
}
.slick-prev:before,
.slick-next:before,
.slick-prev:after,
.slick-next:after {
        content: '';
        position: absolute;
        background: #fff;
        height: 2px;
        width: 50px;
        top: 50%;
        left: 5px;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
}
.slick-prev:before,
.slick-next:before {
        margin-top: -22px;
}
.slick-prev:after,
.slick-next:after {
        margin-top: 22px;
        margin-top: 2.2rem;
}
.slick-prev:hover:before,
.slick-next:hover:before {
        margin-top: -18px;
        margin-top: -1.8rem;
}
.slick-prev:hover:after,
.slick-next:hover:after {
        margin-top: 18px;
        margin-top: 1.8rem;
}
.slick-prev {
        left: -7px;
        left: -0.7rem;
}
.slick-prev:before {
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.slick-prev:after {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.slick-prev:hover:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.slick-prev:hover:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.slick-next {
        right: -7px;
        right: -0.7rem;
}
.slick-next:before {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.slick-next:after {
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.slick-next:hover:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.slick-next:hover:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev,
.ct-slick-arrows--type2 .slick-next {
        opacity: 0.85;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
        -webkit-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
        background-color: #fff;
        height: 15px;
        height: 1.5rem;
        width: 70px;
        width: 7rem;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before {
        margin-top: -20px;
        margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
        margin-top: 20px;
        margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:before,
.ct-slick-arrows--type2 .slick-next:hover:before {
        margin-top: -20px;
        margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:after,
.ct-slick-arrows--type2 .slick-next:hover:after {
        margin-top: 20px;
        margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:active,
.ct-slick-arrows--type2 .slick-next:hover:active {
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.ct-slick-arrows--type2 .slick-prev {
        left: 10px;
        left: 1rem;
}
.ct-slick-arrows--type2 .slick-prev:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:before {
        margin-top: -27px;
        margin-top: -2.7rem;
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:after {
        margin-top: 27px;
        margin-top: 2.7rem;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next {
        right: 10px;
        right: 1rem;
}
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-next:after {
        left: auto;
        right: 0;
}
.ct-slick-arrows--type2 .slick-next:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-next:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-next:hover:before {
        margin-top: -27px;
        margin-top: -2.7rem;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next:hover:after {
        margin-top: 27px;
        margin-top: 2.7rem;
        -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        transform: rotate(-60deg);
}
#home.ct-header.ct-header--slider {
        background-size: cover;
}
.ct-header .ct-slick {
        margin-bottom: 0;
}
.slick-initialized .slick-slide {
        display: block;
}
.ct-u-display-tablex {
        display: table;
        width: 100%;
        height: 600px;
}
.ct-u-display-tablex > .inner {
        display: table-cell;
        width: 100%;
        vertical-align: middle;
}
.ct-header h1.big {
        font-size: 6.7rem;
        line-height: 1;
        color: #fff;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        padding-top: 50px;
}
.ct-header p {
        font-size: 2.3rem;
        line-height: 1.1;
        margin: 30px 0 40px;
        color: #fff;
}
.btn {
        text-transform: uppercase;
    font-weight: bold;
    padding: 15px 26px;
    padding: 1.5rem 2.6rem;
    color: #fff;
    border-radius: 0;
    border: none;
    font-size: 22px;
    font-size: 2.2rem;
}
* {
outline: none !important;
}
.btn:hover,
.btn:focus,
.btn:active {
        color: #fff;
}
.btn-transparent {
        background-color: transparent;
        border: 3px solid #fff;
}
.ct-slick .slick-track,
.ct-slick .slick-list,
.ct-slick .item,
.ct-slick .slick-item {
        min-height: inherit;
}
.ct-slick .item {
        background-size: cover;
}
.slick-list {
        height: 600px;
}
/* Transitions */
.activate {
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        opacity: 1;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1 * 100);
        filter: alpha(opacity=1 * 100);
}
.animated {
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        opacity: 0;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 * 100);
        filter: alpha(opacity=0 * 100);
}

Шаг 3

Добавьте приведенный ниже код JavaScript на страницу, где будет располагаться ваш главный слайдер.

$(document).ready(function(){                   
  $('.ct-slick-homepage').on('init', function(event, slick){
    $('.animated').addClass('activate fadeInUp');
  });
$('.ct-slick-homepage').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
  });
$('.ct-slick-homepage').on('afterChange', function(event, slick, currentSlide) {
    $('.animated').removeClass('off');
    $('.animated').addClass('activate fadeInUp');
  });
$('.ct-slick-homepage').on('beforeChange', function(event, slick, currentSlide) {
    $('.animated').removeClass('activate fadeInUp');
    $('.animated').addClass('off');
  });
});
$(document).ready(function() {
 if ($('[data-background]').length > 0) {
      $('[data-background]').each(function() {
        var $background, $backgroundmobile, $this;
        $this = $(this);
        $background = $(this).attr('data-background');
        $backgroundmobile = $(this).attr('data-background-mobile');
        if ($this.attr('data-background').substr(0, 1) === '#') {
          return $this.css('background-color', $background);
        } else if ($this.attr('data-background-mobile') && device.mobile()) {
          return $this.css('background-image', 'url(' + $backgroundmobile + ')');
        } else {
          return $this.css('background-image', 'url(' + $background + ')');
        }
      });
    }
  });

Шаг 4

Добавьте нижеприведенные ссылки на страницу, где будет жить ваш главный слайдер.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Есть много способов использовать возможности CSS и JavaScript для добавления интерактивности на ваши веб-страницы, и animate.css — еще один пример этого.

Демо на JSFiddle

Скачать с GitHub

Исходно опубликовано в блоге Солодева

Узнайте о возможностях платформы Solodev Web Design на solodev.com!

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.