hustcc / Ribbon.js
Licence: mit
🎀 Only 1kb javascript gist to generate a ribbon in your website with HTML5 canvas.
Stars: ✭ 189
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ribbon.js
Canvas Nest.js
♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.
Stars: ✭ 3,966 (+1998.41%)
Mutual labels: html5-canvas, html5, canvas
The Matrix Effect
The incredible effect of rain of letters in the style of the Matrix trilogy.
Stars: ✭ 109 (-42.33%)
Mutual labels: html5-canvas, html5, canvas
One Html Page Challenge
Can you create something cool without modern tools?
Stars: ✭ 205 (+8.47%)
Mutual labels: html5-canvas, html5, canvas
Icon Machine
Web application for randomly generating pixel art icons.
Stars: ✭ 73 (-61.38%)
Mutual labels: html5-canvas, html5, canvas
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-38.1%)
Mutual labels: html5-canvas, html5
Freeciv Web
Freeciv-web is an Open Source strategy game implemented in HTML5 and WebGL, which can be played online against other players, or in single player mode against AI opponents.
Stars: ✭ 1,626 (+760.32%)
Mutual labels: html5, canvas
Tap Tap Adventure
Tap Tap Adventure is a massively online 2D MMORPG set in the medieval times with twists.
Stars: ✭ 123 (-34.92%)
Mutual labels: html5-canvas, html5
Vue Canvas Nest
💫 A Vue.js background component for canvas-nest.
Stars: ✭ 136 (-28.04%)
Mutual labels: html5-canvas, canvas
Micro Racing
🚗 🏎️ 🎮 online 3D multiplayer neural networks based racing game
Stars: ✭ 100 (-47.09%)
Mutual labels: html5, canvas
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (+759.79%)
Mutual labels: html5, canvas
Kaetram Open
An open-source 2D HTML5 adventure based off BrowserQuest (BQ).
Stars: ✭ 138 (-26.98%)
Mutual labels: html5-canvas, html5
Foster Ts
A WebGL + TypeScript 2D Game framework with a Scene>Entity>Component model.
Stars: ✭ 112 (-40.74%)
Mutual labels: html5-canvas, html5
Textor
Experimental Text Editor using HTML5 canvas.
Stars: ✭ 107 (-43.39%)
Mutual labels: html5, canvas
Scrawl Canvas
Responsive, integrated and interactive HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!
Stars: ✭ 134 (-29.1%)
Mutual labels: html5, canvas
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-19.58%)
Mutual labels: html5, canvas
ribbon.js
Only 1kb javascript gist to generate a ribbon in your website with HTML5 canvas. Code from evanyou.
1. usage
Very easy and simple.
insert the code below between <body> and </body>.
<script src="dist/ribbon.min.js"></script>
Suggest before the tag </body>, like below:
<html>
<head>
...
</head>
<body>
...
...
...
<script src="dist/ribbon.min.js"></script>
</body>
</html>
Please do not add the code in the <head> </head>. then ok!
2. config
-
size: the size of ribbon, default:90. -
alpha: the opacity of line (0 ~ 1), default:0.6. -
zIndex: the index of z space, default:-1.
Example:
<script type="text/javascript" size="150" alpha='0.3' zIndex="-2" src="dist/ribbon.min.js"></script>
Set the config on the script node as a attribute. all the config has the default value, you can choose to set any of them, or none of them.
3. preview
4. other
The project source comes from http://evanyou.me/.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].