The Transitional roles of JavaScript, HTML and CSS

JavaScript's role in creative web design had long been seen as the main driving force behind web pages' animated and interactive elements; in comparison, HTML and CSS had generally been seen as the files that supply a page's content and static styling, respectively. As all three languages evolved and expanded over the most recent decade, however, their ability to achieve their respective roles bled into each other. There are now many examples on the Internet of web animations constructed and executed purely within the bounds of CSS files that may work in unison with coordination data present within the accompanying HTML files.

An example of a widely adopted type of aesthetic element that would have previously required either JavaScript or a more dedicated program like Adobe Flash is a set of image layers that each scrolls at a different speed when the user scrolls vertically along the page within their browser window. This can give a website an aesthetic appearance with an engaging degree of depth to it, especially if it is used to create a multi-layered background resembling a landscape. Even if this not used for parallax scaling that reacts to the audience's movements, CSS is still capable of having specific image layers compress and scale themselves in response to user actions like opening the page for the first time.

The landing page at simonsarris.com is an example of a full-screen background effect that does not scroll with the user's bar but nonetheless uses multiple layers and scaling effects to make the page "introduce itself" in a visually distinct manner. While the page settles on a static image that uniformly moves with the user's scrolling motions, the upper area of the background has a layer representing an illustration of a town "growing" from behind a layer of illustrated trees, with more distant buildings growing in layers that are located farther back. Several black spots representing "birds" flying around the town are also a product of CSS that is free of JavaScript. While they appear erratic, their positions routinely cycle through separately animated coordinates lying along horizontal and vertical planes. For more information click here http://simonsarris.com.