Airport departure board or split-flap display effect with JavaScript

Airport departure board or split-flap display effect with JavaScript

 

In this tutorial I’ll show you how to achieve the split-flap display (aka airport departure board) effect with JavaScript. Now available also as Jquery plugin

Before we start with the coding, let my explain really quick what we’ll do. For the purpose of this tutorial I’ve prepared a table with strings. My if-act (effect) will be executed on mouse over and stopped on mouse out if necessary. Let’s get started!

When you look at an airport departure board what do you see? Yep, flipping characters! So lets begin by defining the chars we want to flip in a long string.

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz ";

Let’s put this variable in the body of a constructor function that will be our flipper class.

function flipper (obj) { var...
Прочети цялата публикация

Коментари

Tози сайт използва "Бисквитки". Научи повече Приемам

Моля, запознайте се с нашите Общи условия и Политика за поверителност