How to add an animated banner that slides in

HTML & CSS
1

Hi Guys,

I need help in making an animated banner.I wanted to add a banner from the top right portion of my site.But after trying several attempts it didn’t work. I want the banner to slide in every time the site opens. Hope you can help me. :smiley: :slight_smile:

You can find the site here : PrintingShoppers

Thanks,
Abbey

2

The “member discounts” button has a bit of a problem because it slides offscreen for those with conventional sized monitors. What is the sliding banner supposed to look like and how you expect to implement it?

3

Hi Ronpat,

Thank you for the reply, yes you are right I tried it with my friend’s monitor and it slides offscreen. I replaced it with a ribbon which is “Register $ Save”. Is it much better than the ones that slides in?

4

I don’t think the current ribbon is very exciting. It always overlays some of the text on the page. It’s in the way. Horizontal might be better, but it would still overlay some text some of the time. Your first button might have a been better choice had it slid inside the page instead of outside of the page.

5

Hmmm… A horizontal ribbon might do the trick. Is it okay to incorporate the hover function to my new ribbon?

6

I don’t see why not.

Your original button was distinctive, yet out of the way unless hovered. It’s problem was that it extended outside of the page instead of inside the page. Except for execution, it seemed like a good concept. The ribbon is not designed to retract, so it seems like it will always cover a larger part of the page than the first button-thingy.

Experiment and discover what works best for your page.

7

Are you using Wordpress? if yes, you can check this plugin WP Content Slide Pro.