cssscript.com cssscript.com

Multipurpose HTML5 Audio Player With JavaScript – calamansi.js

calamansi.js is a responsive, customizable HTML5 audio player that works with any audio files/audio streams and supports themes, ID3 reading, playlist, and more. Basic Usage: 1. Insert the minified version of the calamansi.js library into the document. <link href="dist/calamansi.min.css" rel="stylesheet" /> <script src="dist/calamansi.min.js"></script> 2. Create a basic inline audio...

cssscript.com cssscript.com

Awesome Check Interactions For Radio Buttons – radiobox.css

Similar to the checkbox.css, radiobox.css is a pure CSS library that provides a set of 13 pretty awesome animations to radio buttons on check and uncheck. How to use it: 1. Load the minified version of the radiobox.css library from the dist folder. <link rel="stylesheet" href="./dist/css/radiobox.min.css" /> 2. Apply the following animation class to the radio buttons and done. Available...

cssscript.com cssscript.com

Flash (Toast) Messages In JavaScript – notify.js

Yet another toast style notification library to send temporary flash messages to end-users. Comes with 3 styles (danger, success, and default) and auto dismisses after 5 seconds by default. How to use it: 1. Add notify.js and notify.css to the page. <link rel="stylesheet" href="./notify.min.css" /> <script src="./notify.min.js"></script> 2. The JavaScript to display a basic toast message on the...

cssscript.com cssscript.com

Wrap Each Character From Your Text In An HTML Element – Letterize.js

Letterize.js is a JavaScript library to wrap each letter from your text in a given HTML element (defaults to span) for further use (e.g. character by character animations). How to use it: 1. Download and load the minified version of the Letterize.js library in the document. <script src="/path/to/lib/letterize.min.js"></script> 2. Create a new Letterize instance and determine the target element containing the text...

cssscript.com cssscript.com

Select Box Based Star Rating JavaScript Library – star-rating.js

star-rating.js is a small JavaScript library to generate a customizable, progressively enhancement star rating control from a regular select box with numeric values. How to use it: 1. Create a select box for your star rating system. <select class="star-rating"> <option value="">Select a rating</option> <option value="5">Excellent</option> <option value="4">Very...

cssscript.com cssscript.com

Accessible Tabs & Accordion Component In JavaScript – a11y-accordion-tabs

A flexible, customizable, responsive, mobile-friendly, WAI-ARIA compliant tabs & accordion component for the web. On small devices, the tabs switch to an accordion interface where you can expand/collapse associated panels in the vertical direction. How to use it: 1. Insert the JavaScript file right before the closing body tag. <script src="./a11y-accordion-tabs.min.js"></script> 2. The example HTML shows how to...

cssscript.com cssscript.com

Animate Elements Between States – Animatum

Animatum is a tiny JavaScript animation library used to animate all children elements in a container based on the current animation state. How to use it: 1. Install and import the Animatum as a module. # NPM $ npm install animatum --save import Animatum from 'animatum'; 2. Or include the animatum.js from the dist folder. <script src="./dist/animatum.js"></script> 3. Create a list of elements you want to animate. <div...

cssscript.com cssscript.com

Create Cool Particle Animation Effects With Proton.js

Proton.js is an easy yet powerful Javascript animation engine to create pretty cool particle effects (e.g. flames, fireworks, bullets, explosions, etc) on the modern web application. Basic Usage: 1. Install and import the proton-engine. # NPM $ npm install proton-engine --save import Proton from 'proton-engine'; 2. Or directly load the proton.min.js script in the HTML. <script src="build/proton.min.js"></script> 3....

cssscript.com cssscript.com

Customizable Push Notification Library For The Web – Notifier.js

Notifier.js is an easy yet fully configurable push notification library to show toast and growl style messages in the bottom right corner of the page. More Features: Allows you to attach the notifications to any container. 4 built-in themes: Success, Error, Warning, Info. Auto dismisses with a countdown bar. Allows you to create your own themes (styles). How to use it: 1. Download & unzip the library and then load the minified...

cssscript.com cssscript.com

Responsive Flexbox Based CSS Front-end Framework – Griddle

Griddle is a CSS front-end framework that mainly provides a flexbox based grid system for modern mobile-first web design. Features: xs, sm, md, lg, xl, and xxl breakpoints. Custom space between grid items. Allows you to specify the number of rows. Spacing, Display, Color, and Image modifiers. Customizable via CSS variables. How to use it: 1. Install and download the Griddle. # Yarn $ yarn add @daveberning/griddle # NPM $ npm install...

cssscript.com cssscript.com

Interactive Dot Matrix In JavaScript And SVG – DotMatrx.js

DotMatrx.js is a JavaScript library to create an animated, responsive, interactive, SVG based dot/letter matrix where dots/letters react to mouse and touch events. How to use it: 1. Load the necessary JavaScript files in the document. <script src="src/CoordinateTranslator.js"></script> <script src="src/BaseDot.js"></script> <script src="src/SmartDot.js"></script> <script...