Simple Solutions for Dynamic Web Design With HTML5 Data Attributes
Vivid effects on websites could get you an edge in the competition for the user's attention. Parallax scrolling might be what you're thinking of now. That is not the only option for dynamic web design, though.
dynamo, which the function
.dynamo()is applied to. In order to give brand new meanings to the following sentence
dynamo.js could be used as follows:
I wish I had wings
Now, dynamo.js would go through the sentences within the data attribute
I wish I <span class="dynamo" data-lines="had ten million Dollars,was always right,was on vacation">had wings</span>
data-lines, changing every three seconds. The result will be the following (without the bold markup):
I wish I had wings I wish I had ten million Dollars I wish I was always right I wish I was on vacationThis and other effects can be checked out on the dynamo website. In contrast to what I did here, you are better off writing special characters in their respective entities. Dynamo.js can be very specific when it comes to that. In addition to the designation of the rotating content, the attributes
data-delaycontrol the speed of the rotation. The attribute
data-centercenters the text contents within the span. Generally speaking,
.dynamo()can be applied to every element. A wild combination within the same text may lead to a nearly chaotic alienation of the content. The script is available for free usage on GitHub, under the MIT license. It requires jQuery. Animations With skrollr skrollr allows for the animation of any CSS attribute of an element, depending on the position of the horizontal scrollbar. Sounds complicated, but it isn't. [caption id="attachment_104139" align="aligncenter" width="1024"] The demo for skrollr shows what works, but it isn't really eye-catching. (Screenshot: Noupe)[/caption] The animation is controlled via data attributes. The following (rather simple, in comparison) code snippet leads to a change in background color while scrolling.
<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);"></body>
data-0indicates the original position, while the corresponding