Banner Example
How do I make an banner example?
Introductory display banner ad demonstrating simple semantic HTML, CSS, and the greensock javascript animation platform TweenMax. What is a banner example? How do you make a banner example? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.
Banner Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Banner Example</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ banner{ width: 300px; height: 250px; border:1px solid rgba(0,0,0,.8); font-family: 'Raleway'; font-weight: 200;
}
banner *{ position: absolute;
}
#photo{ top:70px; left:-180px;
}
h1{ width: 100%; font-size:22px; text-align: center;
}
#hed1{ top:30px;
}
#hed2{ top:35px;
}
h2{ width:100%; height:40px; padding:4px 10px; font-size:20px; text-align:left; background-color:rgba(255,255,255,.6); color:rgba(0,160,200,.7); font-size:20px; top:220px;
}
/*general styles for reset and centering*/
*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.absolute-center{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.crop{ overflow: hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <banner class="absolute-center crop"> <img id="photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/iphone.jpg"/> <img id="icon" class="absolute-center" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/icon_1.png"/> <h1 id="hed1">Huge for developers.</h2> <h1 id="hed2">Massive for everyone else.<h2> <h2 id="cta"><em>Learn more ></em></h3>
</banner> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Banner Example - Script Codes CSS Codes
banner{ width: 300px; height: 250px; border:1px solid rgba(0,0,0,.8); font-family: 'Raleway'; font-weight: 200;
}
banner *{ position: absolute;
}
#photo{ top:70px; left:-180px;
}
h1{ width: 100%; font-size:22px; text-align: center;
}
#hed1{ top:30px;
}
#hed2{ top:35px;
}
h2{ width:100%; height:40px; padding:4px 10px; font-size:20px; text-align:left; background-color:rgba(255,255,255,.6); color:rgba(0,160,200,.7); font-size:20px; top:220px;
}
/*general styles for reset and centering*/
*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.absolute-center{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.crop{ overflow: hidden;
}
Banner Example - Script Codes JS Codes
TweenMax.from('#icon', 1, {scale:2, rotation:180, ease:Back.easeOut.config(5)})
TweenMax.from('#hed1', .5, {delay:1, alpha:0, y:'-=20'})
TweenMax.from('#photo',3, {delay:1.5, top:'-=400', left:'+=600', ease:'Quad.easeOut'})
TweenMax.to('#hed1', .3, {delay:2, y:'-=20'})
TweenMax.to('#icon', 1, {delay:2, x:'-=60', y:'-=5', width:'80px'}, 3)
TweenMax.from('#hed2', 1.5, {delay:3, alpha:0, top:'+=30', ease:'Back.easeOut'})
TweenMax.from('#cta', 1, {delay:4,alpha:0})
TweenMax.from('#cta>em', .5 , {delay:4.5, alpha:0});
TweenMax.to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:1, yoyo:true});
Developer | Andy Hullinger |
Username | andyhullinger |
Uploaded | September 15, 2022 |
Rating | 3.5 |
Size | 3,025 Kb |
Views | 38,456 |
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!
Name | Size |
Simple photo captions | 2,030 Kb |
Simple example infographic pen | 2,618 Kb |
Mageractive Class 1 | 2,505 Kb |
Semantic HTML for animated menus | 2,623 Kb |
CSS type and layout - discrete elements | 2,010 Kb |
A Pen by Andy Hullinger | 2,227 Kb |
Presentation Template with Animation | 4,597 Kb |
MFA iteration example | 7,065 Kb |
Simple animated infographic | 2,803 Kb |
Landing Page Demo | 4,804 Kb |
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!
Name | Username | Size |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!