Jump to content
Search Community

Inspiring HTML5 Banner Examples with GSAP

Carl test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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!

 

Pic.jpg

  • Like 1
Link to comment
Share on other sites

"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!

 

Pic.jpg

  • Like 3
Link to comment
Share on other sites

 

"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!
 
Pic.jpg

 

 

 

Impressive as always @Volcanoflash!

Link to comment
Share on other sites

  • 2 weeks later...

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?

  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

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

  • 1 month later...

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!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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.  :D

 

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.

 

.

  • Like 5
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...