v1.0.0
Starline.js introduces the Marquee in a modern way. It's now smoother than ever for it uses HTML5 Canvas element to create the animation. Besides, it allows you to choose the speed, animation direction, border radius for images being used in it, pause on hover feature and much more. So, let's take a look at it and see how you can integrate it.
Integration involves 3 very simple steps and if you are familiar with ES6 Modules then you probably know it already. Let's take a look at the procedure:
Download the starline.min.js file from the GitHub repository and save it anywhere in your project directory.
We need to add a Javascript file as an ES6 Module in the <head> of our page. We need this script to initiate Starline.js on our canvas elements. Let's call it initiator.js. We'll create this file later.
<script type="module" src="/path/to/initiator.js" defer ></script>Now, place a <canvas> element wrapped in a <div> with position: relative style applied in it. Create a data attribute with the name data-starline-srcset in the canvas and type in the path of the images you want to display separated by comma as its value like below:
<div style="position: relative;" >
<canvas data-starline-srcset="https://eg.site/external/image.jpg, /local/image.webp, /like/so/on.png" ></canvas>
</div>You can also place the canvas items freely - without wrapping them in a relatively positioned element anywhere but placing them like as we mentioned earlier is recommended for it enables certain features!
Remember that in the last step, we talked about the initiator.js file? Let's create it and import our class from the downloaded file with it as depicted below. This line must reside at the very top of the script.
import starline from '/path/to/starline.min.js';After that, use the Query Selector for the <canvas> elements in your HTML to initialize. You can put this line anywhere based on your needs. In this example, we are targeting canvas element with class starline:
new starline(".starline");Now, just save the file initiator.js. Congratulations, you have successfully integrated and activated Starline.js!
Starline.js is pretty straight forward with a pretty basic syntax. Let's take a look:
new starline(querySelector, options);querySelector: string (Required)
A string representing the query selector(s) for target canvas element(s).
options: object (Optional)
An object with key-value pairs to control certain behaviours:
mode: string ("horizontal")
Sets the animation direction. Accepts "horizontal" or "vertical" as value.
speed: int (100)
A positive or negative integer representing the movement in pixel/sec. Positive value in "horizontal" mode sets right-to-left animation and in "vertical" mode sets bottom-to-top animation. Negative value reverses the animation direction.
hoverPause: bool (false)
If set to true, hovering over the respective canvas will pause the animation.
radius: int (0)
Accepts a positive integer value. Sets border radius on all the images in pixel.
gap: int (32)
Accepts a positive integer value. Sets gap between the images in pixel.
width: int|string (128)
Effective only in "vertical" mode. Accepts a positive integer value (as pixel) or a string with a valid css representation of length to set an equal amount of width for the images and the canvas element itself. Dynamic values (eg. "40%") rely on the nearest relatively set container's dimension. Height for the images are set automatically maintaining the aspect ratio.
height: int|string (96)
Effective only in "horizontal" mode. Accepts a positive integer value (as pixel) or a string with a valid css representation of length to set an equal amount of height for the images and the canvas element itself. Dynamic values (eg. "25%") rely on the nearest relatively set container's dimension. Width for the images are set automatically maintaining the aspect ratio.
Starline.js is solely coded by Amlan Das Karmakar, Director, Red Nexus Smartcom LLP. It takes immense dedication to create such projects. Red Nexus is committed to make the web a better place with such works. Wanna buy our developers some coffee?
