hcodes / Snowflakes
Licence: mit
❄️ Snowflakes in JavaScript
Stars: ✭ 170
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Labels
Projects that are alternatives of or similar to Snowflakes
Snowflake
java edition of [Twitter Snowflake](https://github.com/twitter/snowflake), a network service for generating unique ID numbers at high scale with some simple guarantees.
Stars: ✭ 114 (-32.94%)
Mutual labels: snowflake
Yjplay
一个支持自定义UI布局,流式API, 加密,直播 ,亮度,音量,快进等手势 ,广告视频预览,多种加载模式 ,多种分辨率切换 ,多种封面图, 自定义数据源,列表播放,倍数播放,边播变缓存<font color="red">不是使用AndroidVideoCache</font>,离线播放,神奇的播放器
Stars: ✭ 1,700 (+900%)
Mutual labels: fullscreen
Sonyflake Rs
🃏 A distributed unique ID generator inspired by Twitter's Snowflake.
Stars: ✭ 91 (-46.47%)
Mutual labels: snowflake
Id Generator
id-generator部署即使用的ID生成器, 支持HTTP、Dubbo、Spring Cloud方式.
Stars: ✭ 112 (-34.12%)
Mutual labels: snowflake
Locopy
locopy: Loading/Unloading to Redshift and Snowflake using Python.
Stars: ✭ 73 (-57.06%)
Mutual labels: snowflake
Yuniql
Free and open source schema versioning and database migration made natively with .NET Core.
Stars: ✭ 156 (-8.24%)
Mutual labels: snowflake
Zhpopupcontroller
Help you pop up custom views easily. and support pop-up animation, layout position, mask effect and gesture interaction etc.
Stars: ✭ 1,481 (+771.18%)
Mutual labels: fullscreen
Postcss Viewport Height Correction
PostCSS plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen.
Stars: ✭ 137 (-19.41%)
Mutual labels: fullscreen
Snowflake
A simple to use Go (golang) package to generate or parse Twitter snowflake IDs
Stars: ✭ 1,314 (+672.94%)
Mutual labels: snowflake
Abmediaview
Media view which subclasses UIImageView, and can display & load images, videos, GIFs, and audio and from the web, and has functionality to minimize from fullscreen, as well as show GIF previews for videos.
Stars: ✭ 79 (-53.53%)
Mutual labels: fullscreen
React Intense
A React component for viewing large images up close 🔍
Stars: ✭ 152 (-10.59%)
Mutual labels: fullscreen
Spotispy
Displays the album art from your currently playing Spotify track in full-screen.
Stars: ✭ 74 (-56.47%)
Mutual labels: fullscreen
Vue Fullpage.js
Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/
Stars: ✭ 1,626 (+856.47%)
Mutual labels: fullscreen
Terraform Provider Snowflake
Terraform provider for managing Snowflake accounts
Stars: ✭ 165 (-2.94%)
Mutual labels: snowflake
Glsl Godrays
This module implements a volumetric light scattering effect(godrays)
Stars: ✭ 155 (-8.82%)
Mutual labels: fullscreen
Angular Fullpage
Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/
Stars: ✭ 131 (-22.94%)
Mutual labels: fullscreen
❄️ Falling snowflakes
Details
- Only one JavaScript file
- CSS Animation
- Rubber design
- Flexible settings
Examples
- Demo
- Simple
- Big
- Increased speed
- Layer
- Some layers
- Own color
- Own kind
- Own z-index
- start() and stop()
- Without wind
Using
npm i magic-snowflakes --save-dev
Without settings
<html>
<body>
...
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
Snowflakes();
</script>
</body>
</html>
or
'use strict';
const Snowflakes = require('magic-snowflakes');
Snowflakes();
Advanced settings
<html>
<body>
<div id="snowflakes-container" style="width: 1000px; height: 500px;"></div>
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
var sf = new Snowflakes({
color: '#f00', // Default: "#5ECDEF"
container: document.querySelector('#snowflakes-container'), // Default: document.body
count: 100, // 100 snowflakes. Default: 50
minOpacity: 0.1, // From 0 to 1. Default: 0.6
maxOpacity: 0.95, // From 0 to 1. Default: 1
minSize: 20, // Default: 10
maxSize: 50, // Default: 25
rotation: true, // Default: true
speed: 2, // The property affects the speed of falling. Default: 1
wind: false, // Without wind. Default: true
width: 500, // Default: width of container
height: 250, // Default: height of container
zIndex: 100 // Default: 9999
});
</script>
</body>
</html>
Different Builds
In the dist/ directory of the NPM package you will find many different builds of snowflakes.js.
| Type | Filename | Description |
|---|---|---|
| Full (UMD) | snowflakes.js |
|
| Full (UMD, production) | snowflakes.min.js |
|
| Light (UMD) | snowflakes.light.js |
Without SVG images |
| Light (UMD, production) | snowflakes.light.min.js |
Without SVG images |
Development
git clone [email protected]:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes
npm i
npm run build
npm test
open ./dev-examples/
License
MIT License
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].