I created a full screen banner with an animated gradient using Bootstrap and Granim.js. The banners are transparent to allow the animated gradient background to show through. Combined with white text and even images it creates a really sharp looking banner.
 


In the head I am including the bootstrap css from a cdn. Bootstrap is what will be used to create the carousel. The custom styles for the banner are include in a external css file called sytyle.css

	
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content=" width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="./style.css">

	<title>Bootstrap Carousel & Granim.js</title>
	
</head>
	

 

 

In the body we combine bootstrap carousel and Granim.js in a section called #banner-wrap. Inside #banner-wrap there are two parts

 

The first part piece is a canvas tag which is used by Granim.js to create the animated background.

	
<canvas id="banner-canvas"></canvas>
	

and this second piece is a for the bootstrap carousel

	
<div id="banner-carousel" class="carousel slide" data-ride="carousel">
	...
</div>
	

The two piece combined look like this

	
<section id="banner-wrap">
	<canvas id="banner-canvas"></canvas>
	<div id="banner-carousel" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#banner-carousel" data-slide-to="0" class="active"></li>
			<li data-target="#banner-carousel" data-slide-to="1"></li>
			<li data-target="#banner-carousel" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<div class="container">
					<div class="col-md-12 text-center">
						<h1>Impressive</h1>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
			</div>
			<div class="carousel-item">
				<div class="container">
					<div class="col-md-12 text-center">
						<h1>Amazing</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
			</div>
			<div class="carousel-item">
				<div class="container">
					<div class="col-md-12 text-center">
						<h1>Awesome</h1>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#banner-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#banner-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</section>
	

 

Each slide in the carousel can makes use of bootstrap grid system which allows you to make custom layouts that range from using the full width to spliting the content with one half being text and the other half an image

 

	
<div class="carousel-item">
	<div class="container">
		<div class="col-md-12 text-center">
			<h1>Amazing</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
</div>
	

or

	
<div class="carousel-item">
	<div class="container">
		<div class="col-md-8 text-center">
			<h1>Amazing</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="col-md-4 text-center">
			Image Here.
		</div>
	</div>
</div>
	

 

For the css we start with #banner-wrap selector we set the height to be 100% of the viewport so we take up the full height of the browser window.

 

	
#banner-wrap {
	height: 100vh;
	color: #FFF;
	font-family:  "Helvetica Neue";
}
	

Then for #banner-canvas which is what the animated gradient background will be using to have position of absolute this is so we can position it under the carousel. Setting the width, height, top, left, right, bottom allow us to stretch it to the full width and height of whatever #banner-wrap is.

	
#banner-canvas{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
	

For the carousel you set .carousel-inner to have a height of 100% which gives each slide the max height available for it to use.

	
.carousel-inner{
	height: 100%;
}
	

Then for .carousel-item we need some styles to center the content vertically. We position it absolute and then set top: 50% to move the slide content to center. But this puts the top of the content in the center, not what we want. We want it to be centered vertically on the middle of the content. By adding transform: translateY(-50%); and -webkit-transform: translateY(-50%); the position now gets adjusted so the content is centered vertically no matter what the contents height is.

	
.carousel-inner{
	height: 100%;
}

.carousel-item{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
	

 

All together with some extra selectors the css looks like this.

 

	
#banner-wrap h1{
	font-size: 72px;
}

#banner-wrap p{
	font-size: 24px;
}

#banner-wrap {
	height: 100vh;
	color: #FFF;
	font-family:  "Helvetica Neue";
}

#banner-canvas{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

#banner-carousel{
	height: 100%;
}

.carousel-inner{
	height: 100%;
}

.carousel-item{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
	

In each slide .carousel-item we are able to use bootstrap grid system to create unique layouts. You can make the slide take the full width using col-md-12 or split content with one div using col-md-8 and containg text and the other col-md-4 and holding an image.

	
<div class="carousel-item">
	<div class="container">
		<div class="col-md-8 text-center">
			<h1>Awesome</h1>
			<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
		</div>
		<div class="col-md-4 text-center">
			<p >image here.</p >i
		</div>
	</div>
</div>
	

 

This is what the javascript looks like. We include a external javascript file right before the end of the body. From there we make call to initialize #banner-canvas into an animated gradiented. You pass granim an array of the gradients to switch through like so. you can mess around modify the colors to what you like.

 

You can also take a look at Granim.js documentation to see what else you can do. https://sarcadass.github.io/granim.js/

	
var bannerGranim = new Granim({
	element: '#banner-canvas',
	name: 'basic-gradient',
	direction: 'left-right',
	opacity: [1, 1],
	states : {
		"default-state": {
			gradients: [
				['#EB3349', '#F45C43'],
				['#FF8008', '#FFC837'],
				['#4CB8C4', '#3CD3AD'],
				['#24C6DC', '#514A9D'],
				['#FF512F', '#DD2476'],
				['#DA22FF', '#9733EE']
			],
			transitionSpeed: 7000,
			loop: true
		},
	}
});
	

 

You can download and see all the code working together here https://github.com/ryloostudio/vibrant-banner