Interactive ad banners improve click-through rates. In this article I’m going to present a HTML-CSS only soluton that imitates a fly swatter game inviting the website visitor to click on the moving insect. The whole banner is a link tag that in fact redirects to another website.
See the live demo here.
HTML Code
<a href="https://pranx.com/" target="_blank" id="flyFrame"> <div id="wrapCloseFly"> <div id="closeFly"> x </div> </div> <img src="swatter.png" alt="swatter" id="swatter"> <span id="flyLink"> <img src="fly.png" alt="fly" id="fly"> </span> <em id="gplink"> Pranx.com </em> </a>
The HTML code is wrapped inside an anchor tag and it’s made of only inline elements, otherwise the code wouldn’t validate. It contains a close × icon which doesn’t hide the banner because remember: this is a clickbait. Add the onclick event below if you do want to be able to close the banner:
<div id=”closeFly” onclick=’$(“#wrapFlyWidget”).hide(300);’>
There’s a swatter image hovering on the upper section and a fly png walking around. There’s a text that shows up on hover and in this case it shows the destination URL.
Images
We have to add three images: the fly, the swatter and the red target frame:
fly.png
swatter.png
target.png
The CSS Styles
The swatter and the fly is moved with CSS3 animation keyframes:
#wrapCloseFly { position: absolute; right: 10px; top: -10px; margin: 0; z-index: 99; display: block; } #closeFly { font-weight: bold; text-decoration: none !important; background: #ddd; width: 25px; display: inline-block; height: 25px; margin: 0; line-height: 23px; font-size: 30px; text-align: center; border-radius: 20px; border: 2px solid #0645ad; cursor: pointer; color: #0645ad; } #closeFly:hover { color: #ffffff; background: #0645ad; } #flyFrame { font-family: Arial, Helvetica, sans-serif; width: 300px; display: block; height: 340px; background: #F3F3F3; margin: 20px auto; position: relative; border-radius: 10px; border: 1px solid #ddd; } #flyFrame:hover, #flyFrame a:hover { cursor: url(swatter.png) 25 90, auto; -webkit-transition: width 2s; transition: width 2s; } #flyFrame:hover #swatter { display: none; } #flyLink { top: 200px; left: 200px; position: absolute; height: 50px; padding: 17px 0 2px 3px; width: 50px; } #flyLink:hover { background: url(target.png) center center no-repeat transparent; } #fly { transform: rotate(-30deg); } em#gplink { display: none; right: 5px; bottom: 0px; font-family: Arial; position: absolute; font-size: 11px; color: #1746a2; text-decoration: none; font-weight: bold; padding: 3px 6px; cursor: pointer !important; } #flyFrame:hover em#gplink { display: inline-block; } em#gplink:hover { text-decoration: underline; } #swatter { position: absolute; animation: swatterX 15s infinite, swatterY 2s infinite; } @keyframes swatterX { 0% { left: 50px; } 50% { left: 150px; } 100% { left: 50px; } } @keyframes swatterY { 0% { top: 5px; } 50% { top: 30px; } 100% { top: 5px; } } #flyLink { animation: flyPosition 13s infinite; animation-timing-function: linear; /*animation-delay: -35s;*/ } #fly { animation: fly 13s infinite; animation-timing-function: linear; /*animation-delay: -35s;*/ } @keyframes flyPosition {0%{top: 200px;left: 200px;}4%{top: 150px;left: 150px;}6%{top: 155px;left: 130px;}10%{top: 135px;left: 50px;}13%{top: 140px;left: 10px;}14%{top: 140px;left: 10px;}17%{top: 150px;left: 8px;}19%{top: 180px;left: 5px;}23%{top: 220px;left: 5px;}25%{top: 225px;left: 15px;}26%{top: 235px;left: 25px;}30%{top: 265px;left: 55px;}31%{top: 270px;left: 65px;}35%{top: 280px;left: 100px;}39%{top: 280px;left: 140px;}40%{top: 278px;left: 150px;}42%{top: 274px;left: 160px;}44%{top: 265px;left: 175px;}46%{top: 250px;left: 180px;}48%{top: 230px;left: 182px;}52%{top: 200px;left: 182px;}54%{top: 180px;left: 180px;}56%{top: 160px;left: 170px;}58%{top: 140px;left: 170px;}60%{top: 123px;left: 175px;}62%{top: 118px;left: 185px;}63%{top: 118px;left: 185px;}64%{top: 115px;left: 195px;}66%{top: 115px;left: 215px;}68%{top: 118px;left: 232px;}70%{top: 118px;left: 252px;}72%{top: 118px;left: 252px;}74%{top: 125px;left: 255px;}75%{top: 140px;left: 260px;}77%{top: 165px;left: 260px;}79%{top: 180px;left: 257px;}81%{top: 195px;left: 253px;}83%{top: 195px;left: 253px;}85%{top: 210px;left: 243px;}86%{top: 220px;left: 243px;}88%{top: 240px;left: 243px;}89%{top: 240px;left: 243px;}90%{top: 245px;left: 238px;}91%{top: 250px;left: 228px;}92%{top: 250px;left: 218px;}94%{top: 250px;left: 208px;}96%{top: 240px;left: 200px;}97%{top: 230px;left: 200px;}100%{top: 200px;left: 200px;} } @keyframes fly {0%{transform: rotate(315deg);}4%{transform: rotate(315deg);}6%{transform: rotate(295deg);}10%{transform: rotate(275deg);}13%{transform: rotate(260deg);}14%{transform: rotate(260deg);}17%{transform: rotate(220deg);}19%{transform: rotate(180deg);}23%{transform: rotate(180deg);}25%{transform: rotate(160deg);}26%{transform: rotate(135deg);}30%{transform: rotate(135deg);}31%{transform: rotate(105deg);}35%{transform: rotate(105deg);}39%{transform: rotate(90deg);}40%{transform: rotate(80deg);}42%{transform: rotate(70deg);}44%{transform: rotate(45deg);}46%{transform: rotate(25deg);}48%{transform: rotate(0deg);}52%{transform: rotate(0deg);}54%{transform: rotate(-20deg);}56%{transform: rotate(-30deg);}58%{transform: rotate(0deg);}60%{transform: rotate(20deg);}62%{transform: rotate(45deg);}63%{transform: rotate(45deg);}64%{transform: rotate(80deg);}66%{transform: rotate(90deg);}68%{transform: rotate(95deg);}70%{transform: rotate(90deg);}72%{transform: rotate(90deg);}74%{transform: rotate(130deg);}75%{transform: rotate(150deg);}77%{transform: rotate(180deg);}79%{transform: rotate(190deg);}81%{transform: rotate(190deg);}83%{transform: rotate(190deg);}85%{transform: rotate(200deg);}86%{transform: rotate(180deg);}88%{transform: rotate(180deg);}89%{transform: rotate(200deg);}90%{transform: rotate(225deg);}91%{transform: rotate(250deg);}92%{transform: rotate(270deg);}94%{transform: rotate(300deg);}96%{transform: rotate(325deg);}97%{transform: rotate(360deg);}100%{transform: rotate(315deg);} }