Banner-demo

Developer
Patrick Walburg
Size
4,285 Kb
Views
10,115
  1. Banner-demo Previews
  2. Banner-demo HTML Codes
  3. Banner-demo CSS Codes
  4. Banner-demo JS Codes

How do I make an banner-demo?

What is a banner-demo? How do you make a banner-demo? This script and codes were developed by Patrick Walburg on 20 November 2022, Sunday.

Banner-demo Previews
IQ Test

Banner-demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>banner-demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="herobanner">	<a href="home.php">	<div class="hero_side">	<div class="image">	<img src="http://lorempixel.com/output/abstract-q-c-1280-600-6.jpg" />	</div>	<div class="text">	<span class="title-xl">SUMMER SALE</span>	<p class="subtitle">Daka start de Summer Sale met kortingen tot 50%!</p>	<div class="btn btn-banner">Bekijk de sale</div>	</div>	</div>	</a>	<a href="home.php" >	<div class="hero_side">	<div class="image">	<img src="http://lorempixel.com/g/1280/600/" />	</div>	<div class="text">	<span class="title-xl">RUNNING</span>	<p class="subtitle">TIJDELIJK 30 EURO KORTING OP ASICS NUMBIS 17 & KAYANO 22</p>	<div class="btn btn-banner">BEKIJK ASSORTIMENT</div>	</div>	</div>	</a>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Banner-demo - Script Codes CSS Codes

html { color: #012429; font-family: opensans-regular, sans-serif; font-size: 62.5%; line-height: 1.92; width: 100%;
}
h1,
.title-xl { font-size: 6rem; line-height: 1.08; letter-spacing: -0.3rem;
}
.btn { background: #3F4A5F; border: .1rem solid #3F4A5F; color: #FFF; cursor: pointer; display: inline-block; font-family: opensans-extrabold, sans-serif; font-size: 1.3rem; padding: .6rem 2rem .7rem 2rem; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 150ms cubic-bezier(1, 0, 0, 1); transition: all 150ms cubic-bezier(1, 0, 0, 1); white-space: nowrap;
}
.herobanner { overflow: hidden; padding-bottom: 50%; position: relative; width: 100%;
}
@media (min-width: 121em) { .herobanner { max-width: 206rem; margin: auto; padding-bottom: 25%; }
}
.herobanner a { background-color: transparent;
}
.herobanner a:nth-child(1) .hero_side { -webkit-transform: skew(-30deg) translate(-24%, 0); transform: skew(-30deg) translate(-24%, 0);
}
.herobanner a:nth-child(1) .hero_side .image { -webkit-transform: skew(30deg) translate(14%, 0); transform: skew(30deg) translate(14%, 0);
}
.herobanner a:nth-child(1) .hero_side .text { -webkit-transform: skew(30deg) translate(15%, -50%); transform: skew(30deg) translate(15%, -50%);
}
.herobanner a:nth-child(2) .hero_side { right: 0; -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); -webkit-transform: skew(-30deg) translate(32.9%, 0); transform: skew(-30deg) translate(32.9%, 0);
}
.herobanner a:nth-child(2) .hero_side .image { -webkit-transform: skew(30deg) translate(-14%, 0); transform: skew(30deg) translate(-14%, 0);
}
.herobanner a:nth-child(2) .hero_side .text { left: 30%; -webkit-transform: skew(30deg) translate(-10%, -50%); transform: skew(30deg) translate(-10%, -50%);
}
.herobanner a.is_inactive .hero_side:before { opacity: 0.7;
}
.herobanner a:hover ~ :not(:hover) .hero_side:before { opacity: 0.7;
}
.herobanner a:nth-child(1):hover .hero_side { -webkit-transition: z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0s -1s; transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); -webkit-transform: skew(-30deg) translate(-14%, 0); transform: skew(-30deg) translate(-14%, 0); z-index: 2;
}
.herobanner a:nth-child(1):hover .hero_side .image { -webkit-transform: skew(30deg) translate(14%, 0); transform: skew(30deg) translate(14%, 0);
}
.herobanner a:nth-child(1):hover .hero_side .text { -webkit-transform: skew(30deg) translate(15%, -50%); transform: skew(30deg) translate(15%, -50%);
}
.herobanner a:nth-child(2):hover .hero_side { -webkit-transition: z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0s -1s; transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0s -1s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); -webkit-transform: skew(-30deg) translate(14%, 0); transform: skew(-30deg) translate(14%, 0); z-index: 2;
}
.herobanner a:nth-child(2):hover .hero_side .image { -webkit-transform: skew(30deg) translate(-14%, 0); transform: skew(30deg) translate(-14%, 0);
}
.herobanner a:nth-child(2):hover .hero_side .text { -webkit-transform: skew(30deg) translate(-10%, -50%); transform: skew(30deg) translate(-10%, -50%);
}
.hero_side { display: inline-block; height: 100%; max-height: 62vh; overflow: hidden; position: absolute; -webkit-transform: skew(-30deg) translate(-28%, 0); transform: skew(-30deg) translate(-28%, 0); -webkit-transition: z-index 0.01s 0.38s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: z-index 0.01s 0.38s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0.01s 0.38s; transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), z-index 0.01s 0.38s, -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); width: 70%; z-index: 0;
}
.hero_side:before { background: #000; bottom: 0; content: ''; left: -0.1rem; opacity: 0.28; position: absolute; -webkit-transition: opacity 0.38s; transition: opacity 0.38s; right: 0; top: 0;
}
.hero_side .image { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transform: skew(30deg) translate(0, 0); transform: skew(30deg) translate(0, 0); -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1), -webkit-transform 0.38s cubic-bezier(0.66, 0.02, 0.48, 1);
}
.hero_side .image img { left: 50%; opacity: 1; position: absolute; top: 50%; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.hero_side .text { z-index: 2; left: 50%; position: absolute; top: 50%; -webkit-transform: skew(30deg) translate(0, -50%); transform: skew(30deg) translate(0, -50%); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.66, 0.02, 0.48, 1); transition: -webkit-transform 0.5s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.5s cubic-bezier(0.66, 0.02, 0.48, 1); transition: transform 0.5s cubic-bezier(0.66, 0.02, 0.48, 1), -webkit-transform 0.5s cubic-bezier(0.66, 0.02, 0.48, 1);
}
.hero_side .text .title-xl { color: #fff; margin-bottom: 0;
}
.hero_side .text .subtitle { color: #fff;
}
.hero_side .text .btn-banner { background: #ED1C24; border-color: #ED1C24; padding: 1.2rem 6rem 1.2rem 2rem;
}
.hero_side .text .btn-banner:after { content: ''; height: 1rem; margin: 0.7rem 0; position: absolute; right: 2rem; -webkit-transition: right 0.3s cubic-bezier(0.66, 0.02, 0.48, 1); transition: right 0.3s cubic-bezier(0.66, 0.02, 0.48, 1); width: 1.1rem;
}
.hero_side .text .btn-banner:hover:after { right: 1rem;
}

Banner-demo - Script Codes JS Codes

$('.herobanner a', data).on('addClass',function() {	$(this).siblings('a').addClass('is_inactive');	}).on('removeClass', function() {	$(this).siblings('a').removeClass('is_inactive');	}).on('mouseenter',function() {	$(this).trigger('addClass');	}).on('mouseleave',function() {	$(this).trigger('removeClass');	});
Banner-demo - Script Codes
Banner-demo - Script Codes
Home Page Home
Developer Patrick Walburg
Username tripack
Uploaded November 20, 2022
Rating 3
Size 4,285 Kb
Views 10,115
Do you need developer help for Banner-demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick Walburg (tripack) Script Codes
Name
Responvise design with sticky menu
Cofee and sugar
Hamburger css
Study in Knockout.js
Rollovers with transitions.
A Pen by Patrick Walburg
Voorbeeldcode
Animation study
To do list
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!