Quick Hello Bar / Top Notification Bar with News Ticker Style Animation in 5 Minutes

The president of the UAE, His Highness Sheikh Khalifa bin Zayed Al Nahyan passed away recently and the UAE officially announced a 40 day mourning period. A magnanimous leader and an amazing human being, who took UAE to the 21st century, placing UAE on the world map, we wish God Almighty to grant him eternal peace and the UAE people patience and solace.

Ever since the mourning period was announced, we have been bombarded with requests of condolence messages to be posted on client websites. The majority of requests were to put a news ticker type, scrolling text animated hello bar / notification bar on the websites we manage. Though a simple task in itself, since there was a large number of requests and very less time to implement this on multiple websites, we decided to use a free plugin to get this done and was surprised that there were almost no free plugins in the wordpress plugin directory to get this done easily.

So we decided to use a free plugin along with some custom CSS code to get this done.

We used the plugin “Announcer“ which made possible the display and placing of the text we need as a sticky bottom hello bar. However, the animation options were limited to the “Pro” version of the plugin.

We quickly added in the below CSS to animate the text as a news ticker

.ancr-inner { height: 24px; overflow: hidden; position: relative; }
.ancr-inner p { width: 100%; height: 100%; margin: 0; line-height: 24px; text-align: center; -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-animation: scroll-left 40s linear infinite; -webkit-animation: scroll-left 40s linear infinite; animation: scroll-left 40s linear infinite; }

@-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

Voila! There we have a nice “News Ticker” style animated Hello Bar ready for all kinds of announcements done in 5 minutes.