Share Posted October 13, 2016 We continue to A\B test banner mechanics. The following asset is an interactive version of the banner to promote British Cruisers in World of Warships. London Bridge, Thames and Union Jack in front of the camera quickly set up the gloomy mood and you should be ready to destroy enemy ships in the British fog. Fire! 2 Link to comment Share on other sites More sharing options...
Share Posted October 14, 2016 Hello All, Here is my first project. Two frames so to speak. The font on the second one has me puzzled. I think I have handled it the same as I did on the first, but it behaves differently, unless my eyes are fooling me. To me it appears to scale and move up instead of just scaling up from the center. Can someone let me know what I'm doing wrong... if I am? Thanks, Ken See the Pen NRBNoY by Art_Maverick (@Art_Maverick) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 14, 2016 I cannibalized the Burger Boy Banner coding, if it looks familiar on the coding side. Link to comment Share on other sites More sharing options...
Share Posted October 14, 2016 Okay. Figured out the text issue. Link to comment Share on other sites More sharing options...
Share Posted October 14, 2016 Life of the cruisers and battleships in World of Warships is not that easy as it seems. You should constantly dodge torpedoes and air attacks. Only skilled commanders can survive till the battle end. Here is the banner that demonstrates all the challenges and remind users about the old times when brave mariners strike for their countries with pride! 1 Link to comment Share on other sites More sharing options...
Share Posted October 17, 2016 "You shall not pass!" - tankers were screaming... Imagine the situation when you are fighting the enemy on the bridge when suddenly the bridge breaks down and there is no way out. The only thing you can do is to ram your enemy down to hell! This can be described as "ultimate physics DEMONstration". Enjoy banner here! 3 Link to comment Share on other sites More sharing options...
Share Posted October 18, 2016 "You shall not pass!" - tankers were screaming... Imagine the situation when you are fighting the enemy on the bridge when suddenly the bridge breaks down and there is no way out. The only thing you can do is to ram your enemy down to hell! This can be described as "ultimate physics DEMONstration". Enjoy banner here! Impressive as always @Volcanoflash! Link to comment Share on other sites More sharing options...
Share Posted October 26, 2016 Seek, draggable, multiply:http://www.bannerhost.hu/budapestbank/oszikalkulator/PK_Osz_Kalkulator_640x360_GEMIUS_04/ 2 Link to comment Share on other sites More sharing options...
Share Posted October 31, 2016 Here's just a few I've worked... http://rabondigital.com/html5/index.html Hope you enjoy! 4 Link to comment Share on other sites More sharing options...
Share Posted October 31, 2016 Here's just a few I've worked... http://rabondigital.com/html5/index.html Hope you enjoy! Nice SVG masking, particles, spritesheet animations and all. Professional DOM banners! Could You please describe Your workflow a bit? 1 Link to comment Share on other sites More sharing options...
Share Posted October 31, 2016 Nice SVG masking, particles, spritesheet animations and all. Professional DOM banners! Could You please describe Your workflow a bit? Thank you very much! I appreciate it. Of course! Coming from a strong development background with a lot of big agency experience, I've had the opportunity to learn from great coders. With that said I strive to hand code all js, css, and html using best practices and as much as I can keep file size minimal as possible. Anything more specific you would like me to elaborate on? 1 Link to comment Share on other sites More sharing options...
Share Posted November 2, 2016 Thank you very much! I appreciate it. Of course! Coming from a strong development background with a lot of big agency experience, I've had the opportunity to learn from great coders. With that said I strive to hand code all js, css, and html using best practices and as much as I can keep file size minimal as possible. Anything more specific you would like me to elaborate on? Hi Ryan, Great banners! Many thanks for sharing them! Great structure and approach overall! (I've gone through some of them). I'm new with GSAP (brilliant platform) and I have few quite simple questions based on 'Infinity ad' example. - You're linking pictures through CSS background. Why not placing pictures by <img> tags? Because of easier access and control? I thought having <img> tags with alt="info" is better in semantic sense. - I see there was a need to use custom fonts. Why haven't you used text converted into svg curves instead of spritesheet? Thanks, Vitaliy Link to comment Share on other sites More sharing options...
Share Posted November 2, 2016 Hi Ryan, Great banners! Many thanks for sharing them! Great structure and approach overall! (I've gone through some of them). I'm new with GSAP (brilliant platform) and I have few quite simple questions based on 'Infinity ad' example. - You're linking pictures through CSS background. Why not placing pictures by <img> tags? Because of easier access and control? I thought having <img> tags with alt="info" is better in semantic sense. - I see there was a need to use custom fonts. Why haven't you used text converted into svg curves instead of spritesheet? Thanks, Vitaliy Hi Vitaly, Thank you very much! Yeah, I typically use css background when building out banners, but when it comes to making websites semantically <img> tags are the way to go. Really you could use either one for banners, it's really personal preference. A colleague started that infiniti banner, and did some of the setup. It was handed off to me to finish it up. He had already setup that sprite sheet with the copy, but I typically and prefer to work with svg. For that client I think we had to support older versions of IE which doesn't play nice with svg. 1 Link to comment Share on other sites More sharing options...
Share Posted November 3, 2016 Hi Vitaly, Thank you very much! Yeah, I typically use css background when building out banners, but when it comes to making websites semantically <img> tags are the way to go. Really you could use either one for banners, it's really personal preference. A colleague started that infiniti banner, and did some of the setup. It was handed off to me to finish it up. He had already setup that sprite sheet with the copy, but I typically and prefer to work with svg. For that client I think we had to support older versions of IE which doesn't play nice with svg. Many thanks for the answer, Ryan! Now that is clear! Link to comment Share on other sites More sharing options...
Share Posted November 3, 2016 Many thanks for the answer, Ryan! Now that is clear! My pleasure, Vitaliy! 1 Link to comment Share on other sites More sharing options...
Share Posted December 5, 2016 Hello coders! I haven't been publishing new banners for a while, it's time to solve this issue. So here is the brand new banner for ASIA region. Some facts: 1) First CUSTOM banner for ASIA 2) Banner is the part of a complex "Think tank" campaign 3) We developed special logo and style for the campaign that you can see in the banner 3 Link to comment Share on other sites More sharing options...
Share Posted December 5, 2016 Hi Volcanoflash, Great banner! Love it like each one before! The only thing. It's not sharp on retina/high dpi. Sorry maybe someone asked before but -> why don't use svg or al least @2x bitmaps? Performance? IE support? Cheers Vitaliy 1 Link to comment Share on other sites More sharing options...
Share Posted December 5, 2016 Hi Volcanoflash, Great banner! Love it like each one before! The only thing. It's not sharp on retina/high dpi. Sorry maybe someone asked before but -> why don't use svg or al least @2x bitmaps? Performance? IE support? Cheers Vitaliy Hi Vitaliy, The first point is that we perform only for desktop advertising campaigns. The second is Google Adwords 150 kb limit. P.S. Thanks for your warm feedback! 1 Link to comment Share on other sites More sharing options...
Share Posted December 6, 2016 Here is another cool case. Hunting season in NA starts in autumn so the team though it would be cool to set up a campaign. Luckily we had such an old banner with a deer. The only thing we had to do is to adopt it from Flash to HTML5. 2 Link to comment Share on other sites More sharing options...
Share Posted December 30, 2016 I've just recently launched my new site with all my new and recent HTML5 banner work. It also includes some of my previous work in Flash. Happy viewing! http://rabondigital.com Cheers, Ryan Rabon 4 Link to comment Share on other sites More sharing options...
Share Posted December 30, 2016 Nice work, @ryanrabon (and everyone else as well - love seeing these demos of GSAP-driven animations). 1 Link to comment Share on other sites More sharing options...
Share Posted December 30, 2016 Nice work, @ryanrabon (and everyone else as well - love seeing these demos of GSAP-driven animations). Thank you very much!! I love GSAP!!! It's been such a pleasure using it to build out animations. 2 Link to comment Share on other sites More sharing options...
Share Posted December 31, 2016 Hi @ryanrabon, I tried looking at your site, but it's pretty unusable. Like a lot of newer computers with Windows, I have touch screens, but it doesn't mean I'm using them. So this is ignoring all my mouse clicks... if(Modernizr.touchevents) { type = 'touchstart'; type_filters = 'touchend'; } It does however work correctly in IE/Edge, but that's because they use pointer events instead of touch events, which you aren't testing for. You should assume everyone has a touchscreen because you can't detect one. Running this simple demo produces very different results on my computer in Chrome/Opera, IE/Edge, and Firefox. See the Pen f5ae913609aa684073d0572a69425741?editors=0010 by osublake (@osublake) on CodePen Is there a reason for doing your events like that? Managing touch and mouse is really difficult, and every browser has their own quirks. For example, in webkit browsers, it fires touch and mouse events separately, so you have might to call event.preventDefault() in your touch handlers to prevent a mouse event from firing immediately after your touch handler gets called. EDIT: I just noticed PointerEvents have been added to Chrome 55! That should eliminate those double touch/mouse event calls. If you really need separate events for touch and mouse, my suggestion would be to use a battle tested 3rd party library like... - PointerEvents Polyfill - Hammer.js - Interact ... and even GSAP's Draggable. That may not be what it was designed for, but it's still my go-to solution for handling complicated interactions as it has a nice pointer event object to reference. . 4 Link to comment Share on other sites More sharing options...
Share Posted January 2, 2017 Here are a few I did: Palm Breeze: < 200kb standard portal.bannerwave.com/_banners/Bannerwave/porfolio_updates-122016/palm_breeze_new_digital-300x600/index.html?var=42778.633734556635 Cruzan Rum: < 200kb standard portal.bannerwave.com/_banners/Bannerwave/porfolio_updates-122016/cruzan_rum_plinko-300x600/index.html?var=68246.90835355349 HP: < 200kb standard portal.bannerwave.com/_banners/HP/1C16DemandGen/300x250_Pegasus_ksp1/release/index.html?var=42029.51572603979 Tony Roma: <200kb standard portal.bannerwave.com/_banners/WI/waltonisaacson-tonyroma-all_recipes/theexercise-300x250/index.html?var=18404.558042498364 Equal: (40k) portal.bannerwave.com/_banners/Tris3ct/PO-4569_Equal_Spanish_Banners/Equal_Equity1_Span_300x250_r1/index.html?var=66514.75963372392 Coke: <200kb standard ( font link seems to have been broken ) portal.bannerwave.com/_banners/Bannerwave/Coke_160x600_ShareAName/index.html?var=49559.26741685848 6 Link to comment Share on other sites More sharing options...
Share Posted January 6, 2017 One of the most impressive portfolio I've seen: http://www.bannerboy.com/#work 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now