Add Animation to your Hero Image using animate.css

Add Animation to your Hero Image using animate.css

by Yure Pereira

HTML

<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<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...

CSS

/* Slider */
.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...

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 + ')');
        }
      });
    }
  });