Screen Shot    at
October 21, 2014

Web page transitions: magical entertainment

Written By Martin Sandhu

Websites play a major role in transferring information across the web. Examples include brand advertising like the Nike ‘Better World’ page or the Meet Innov campaign, for the International Business Convention for Innovation. Although the purpose of these sites are very different, there is a common denominator – both sites use amazing illusions in their web page transitions. Such creative designs have led to building sites with captivating background videos, such as The Life of Pie.

To create such website designs, there has been a explosion of techniques and libraries to enhance the users’ experience. One of these is the ever growing Angualr JS library produced by Google. Being the super heroic model view controller framework, it enables you to create more intelligent and responsive designs to smoothly engage the user, whilst reducing the need of vast amounts of code to control and manage user interaction.

The model view controller framework, also enables control over the state of elements and variables with the use of its scope class. As a result it can monitor the interaction with HTML DOM and therefore produce an intelligent reaction/transition. The basic example below shows how this works with the ‘ng-click’ function which can call a function in its controller method.

Screen Shot 2014-10-21 at 10.34.45

Complementing Angular’s web transitions, more and more website developers have chosen a single page site with scrolling illusion effects, which is known as a Parallax effect. One of the first well know Parallax sites was developed by Nike. The effect works simply by layering elements on the HTML DOM and reducing the speed of which the background scroll. For a web designer and developer to achieve this natively JQuery can be used. However there are more powerful JQuery plugins, for example Scrollorama, which not only gives you the parallax effect, but it allows you to transition objects on the scroll too.

So far we have discussed just two of several popular frameworks used for webpage transitions which enhance the online experience, content management systems is now a third option. Content management system’s design has changed to include its own user interface design to engage users. The Isotop.js plugin allows records to now be represented visually with media and image. An example of its use is with the Smithsonian Museum, who use some seriously amazing CMS. Individual squares in this site come together to create a patchwork online artwork display, the individual squares expand upon clicking to provide more information.

Full utilisation of HTML 5 can create stunning online transitions. A new generation of websites are continuously being developed to beautifully entertain and inform end users. Therefore web designers must put crafting an entertaining experience through the use of transitions and popular plugins at the forefront of their development process.