{"id":1410,"date":"2013-11-19T11:48:51","date_gmt":"2013-11-19T10:48:51","guid":{"rendered":"http:\/\/meier-online.com\/?p=1410"},"modified":"2015-02-16T18:03:54","modified_gmt":"2015-02-16T17:03:54","slug":"rolling-billboard-css","status":"publish","type":"post","link":"https:\/\/meier-online.com\/en\/2013\/11\/rolling-billboard-css\/","title":{"rendered":"Rotating Billboard with CSS-Animations"},"content":{"rendered":"

\"Billboard<\/a>In 1998, I have presented “Meier’s billboard”. It is a virtual display panel with changing images. I have developed it as Java-applet. In 2009, I have rewritten the\u00a0billboard with JavaScript and jQuery<\/a>.<\/p>\n

Today we can define simple animations in CSS3 style definitions. Thus, we can build a rotating advertising Billboard without JavaScript.<\/p>\n

Basic Structure:<\/h3>\n

We set up the basic framework like in the solution with JavaScript:<\/p>\n

\"Funktionsweise:<\/p>\n

There is a frame and a list of images. The meaning of frame here is that of a picture-frame, not that of a HTML-frame.<\/p>\n

We manipulate the “top” coordinate of the list to create the motion. The clipping property is responsible to let us see only the inside of the frame.<\/p>\n

Animation<\/h3>\n

The definition of a css-animation consists of two parts.<\/p>\n

The first part is the definition of “key frames”, so the key scenes. In the simplest case, we need only two key frames: an opening scene and a final scene. If we want to move an image 200 points upwards, we use a definition like this:<\/p>\n

@keyframes slideup {  \r\n  from {    top: 0px;  }  \r\n  to {    top: -200px;  }\r\n}<\/pre>\n
On the next we must determine an element on which the newly-defined animation is applied. In addition we can determine parameters for this animation here: when it starts, and how often it is repeated. The ‘animation-name’ field name must match the @keyframes-element.<\/p>\n
#billboard ul li{   \r\n  animation-delay: 1s;   \r\n  animation-duration: 3s;   \r\n  animation-iteration-count: infinite;   \r\n  animation-name: slideup;  \r\n... \r\n}<\/pre>\n
This works good so far:<\/p>\n
[button link=”\/develop\/jquery\/billboard-cssani-step1.html” color=”green” target=”blank”]Demo[\/button]<\/p>\n
Multiple images<\/h3>\n
We want to show more than two images in our billboard. But CSS is no imperative programming language, so we can not put together the animations in a controlled way like with JavaScript.<\/p>\n
Instead can we do the opposite, and divide the large animation with small intermediate steps. The points of time of the intermediate steps are specified as a percentage of the total animation:<\/p>\n
@keyframes slideup {   \r\n  from { top: 0px; }   \r\n  16% { top: -200px; }  \r\n  33% { top: -200px; }\r\n  50% { top: -400px; }   \r\n  67% { top: -400px; }  \r\n  84% { top: -600px; }   \r\n  to { top: -600px; } \r\n}<\/pre>\n
The billboard is almost ready for use: we need to increase the animation duration compared with our original solution, as we now specify the duration of a passage of all images.<\/p>\n
To achieve a clean transition between last and first image, we reuse the trick to repeat the first image after the last image.<\/p>\n
[button link=”\/develop\/jquery\/billboard-cssani.html” color=”green” target=”blank”]Demo[\/button]<\/p>\n
You find the source code in my repository on Github.<\/p>","protected":false},"excerpt":{"rendered":"
Sorry, this entry is only available in Deutsch<\/a>.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[192,190,220],"class_list":["post-1410","post","type-post","status-publish","format-standard","hentry","category-develop","tag-animation","tag-css","tag-ux","entry"],"_links":{"self":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1410"}],"collection":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/comments?post=1410"}],"version-history":[{"count":23,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1410\/revisions"}],"predecessor-version":[{"id":1984,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/posts\/1410\/revisions\/1984"}],"wp:attachment":[{"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/media?parent=1410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/categories?post=1410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meier-online.com\/en\/wp-json\/wp\/v2\/tags?post=1410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}