I will explain what a Javascript API Blotter is and than I will go through its operations, explaining how to implement them and attaching describe all functions and materials.
If we read this tutorial from the beginning to the end, then we will learn a little about:
Basic
To create an animated text on a website, web programmers usually combine css and html functions, merge them and draw them on a web page.
At this time we will try to create and manipulate an animated text using a different approach. We will use an Javascript API created by Bradley. The API name is Blotter
The picture above is one of the result of Blotter API. We can see there is no animated on that picture, because Utopian didn't generate that picture using Blotter, but if we see it on http://example.farinside.com/blotter, we will see that the text animating very awesome.
Currently, there are 5 animation models provided by Blotter. Which are Channel Split Material, Liquid Distort Material, Flies Material, Rolling Distort Material, Sliding Door Material. Next, We will see and learn what's the difference each of them.
Actually, there are 4 important steps to make text animation using Blotter:
Download and Clone Blotter
Then, extract and copy and all files / folders in the build folder, https://github.com/bradley/Blotter/tree/master/build , put in your js local folder.
Next, call javascript blotter and supporting materials.
<head>
...
<script src="js/blotter.min.js"></script>
<script src="js/materials/channelSplitMaterial.js"></script>
<script src="js/materials/liquidDistortMaterial.js"></script>
<script src="js/materials/fliesMaterial.js"></script>
<script src="js/materials/rollingDistortMaterial.js"></script>
<script src="js/materials/slidingDoorMaterial.js"></script>
...
</head>
OK, after we call javascript blotter and supporting materials, we will try to test it by typing Blotter on the console in our browser. If there is reaction in our console, it indicates that our programming code above have been going to the plan :)
Next, we will create text/sentence which we will draw to make animation. In this process, we can also specify the type of font to use, the color, and the size of the text.
// We will declare the model, size, color and text
// which we will draw and display it on web page
var text = new Blotter.Text("Steem Indovote", {
family : "serif",
size : 99,
fill : "#111925"
});
In the example above, we imagine that we will create an animation text Steem Indovote with the font size 99 and the base color # 111925
In this step is a very important part for creating animations.
Because on each material have difference elements of property and interfaces.
For example on Material Channel Split, there is one interface, uApplyBlur, which will make our text animation blur and shadow.
If we set uApplyBlur variable, true, that means, the text will be drawn with Blur animation.
// here we will determine what material will be used
var material = new Blotter.ChannelSplitMaterial();
// add a supporting element for creating animations
// here we add blur effect to the text
material.uniforms.uApplyBlur.value = true;
Rows of code above will be rendered, then drawn into canvas and on web page will display the animation as written in rows of code above.
Next we write rows of code that will render our text and display it into canvas.
First we specify in our Html Code, where the animation text will be displayed.
<div id="satu"></div>
Next we create rows of code below to display the text.
var blotter = new Blotter(material, { texts : text });
var scope = blotter.forText(text);
// we will display it in element 'satu' in html
scope.appendTo(satu);
After we save all lines of code above in html file, then we see in our browser, it will appear its animated text image. :)
In this Liquid Distort Blotter material, we will get our effect text as well as a puddle of water splattered.
There are many properties and functions that we can use here to get that impression.
var material = new Blotter.LiquidDistortMaterial();
// setting for speed twisting motion
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uSpeed.value = 0.25;
// setting untuk distorsi liukan gelombang
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uVolatility.value = 0.11;
Just like Blotter Liquid Distort material, Rolling Distort material also displays distortion in the image. We can imagine images on the TV which little bumpy because incorrect antena position.
There are several properties and functions that can be set.
var material = new Blotter.RollingDistortMaterial();
// setting for speed twisting motion
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uSpeed.value = 0.25;
// setting the degree of rotation of the distortion wave to be formed.
// it is a degree variable from 0-360 degrees
material.uniforms.uRotation.value = 100;
// setting the wave noise, the higher the value the more noise appeared.
// is a float variable of 0 ~ 1, we can arrange
// to find the noise animation according to our wishes
material.uniforms.uSineDistortAmplitude.value = 0.152
In this Flies material, we will get a text effect like a lot of bees / ants that always move tirelessly.
There are many properties and functions that we can use here to add the impression of animation according to our expectation.
var material = new Blotter.FliesMaterial();
// setting the size of the point that impressed like ant / bee.
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uPointCellWidth.value = 0.007;
// setting point thickness
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uPointRadius.value = 1.7;
// setting point speed of movement
// it is a float variable between 0.0 ~ any number
material.uniforms.uSpeed.value= 7;
In this Sliding Door material, we will get text effect that moves from below, appears, moves up, then gone. Or text could also moving from left, appears, moves to the right, then gone.
var material = new Blotter.SlidingDoorMaterial();
// setting numbers of text that separates the text
// it is interger variable between 0.0 ~ any number
material.uniforms.uDivisions.value = 8;
// setting speed for text movement
// it is a float variable between 0.0 ~ 1.0
material.uniforms.uSpeed.value = 0.25;
// the text that appears will move from left to right or vice versa
// is a boolean variable, filled with false or true
material.uniforms.uAnimateHorizontal.value = true;
We recommend, this API is not used for lengthy bodies of text, actually it could be, however it looks not owesome
Instead this API is perfect when used on elements that function as a thickener, such as the title, header or animated text images.
For demo can be seen at http://example.farinside.com/blotter
I hope this Tutorial might help you. thank you.