Haroenv / Floating.js
Licence: apache-2.0
Float a number of things up on a page (hearts, flowers, emojis, words ...)
Stars: ✭ 209
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Floating.js
React Perf Devtool
A browser developer tool extension to inspect performance of React components.
Stars: ✭ 2,277 (+989.47%)
Mutual labels: performance
Onednn
oneAPI Deep Neural Network Library (oneDNN)
Stars: ✭ 2,600 (+1144.02%)
Mutual labels: performance
Perf.rocks
Curated resources that help you build lightning fast websites
Stars: ✭ 206 (-1.44%)
Mutual labels: performance
Python Raytracer
A basic Ray Tracer that exploits numpy arrays and functions to work fast.
Stars: ✭ 204 (-2.39%)
Mutual labels: fun
Floatingkeyboard
A Draggable and Floating KeyboardView for android that several EditText's can register to use it.
Stars: ✭ 204 (-2.39%)
Mutual labels: floating
Laravel Partialcache
Blade directive to cache rendered partials in laravel
Stars: ✭ 205 (-1.91%)
Mutual labels: performance
Autowebperf
AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.
Stars: ✭ 199 (-4.78%)
Mutual labels: performance
Argusapm
Powerful, comprehensive (Android) application performance management platform. 360线上移动性能检测平台
Stars: ✭ 2,452 (+1073.21%)
Mutual labels: performance
Perfume.js
Web performance library for measuring all User-centric performance metrics
Stars: ✭ 2,533 (+1111.96%)
Mutual labels: performance
Fastmod
A C/C++ header file for fast 32-bit division remainders (and divisibility tests) on 64-bit hardware.
Stars: ✭ 203 (-2.87%)
Mutual labels: performance
Http2 Prioritization Issues
Tracks issues / notes for HTTP/2 prioritization across browsers, CDNs and servers
Stars: ✭ 204 (-2.39%)
Mutual labels: performance
Meter
Laravel package to find performance bottlenecks in your laravel application.
Stars: ✭ 204 (-2.39%)
Mutual labels: performance
Labjs
Loading And Blocking JavaScript: On-demand parallel loader for JavaScript with execution order dependencies
Stars: ✭ 2,277 (+989.47%)
Mutual labels: performance
Kafka Influxdb
High performance Kafka consumer for InfluxDB. Supports collectd message formats.
Stars: ✭ 206 (-1.44%)
Mutual labels: performance
Cms
GleezCMS - A Light, Simple, Flexible Content Management System
Stars: ✭ 200 (-4.31%)
Mutual labels: performance
Axonframework
Framework for Evolutionary Event-Driven Microservices on the JVM
Stars: ✭ 2,558 (+1123.92%)
Mutual labels: performance
Easy.messagehub
No need for .NET Events! A thread-safe, high performance & easy to use cross platform implementation of the Event Aggregator Pattern.
Stars: ✭ 208 (-0.48%)
Mutual labels: performance
React Performance Observer
Get performance measurements from React Fiber
Stars: ✭ 207 (-0.96%)
Mutual labels: performance
Liveprof
A performance monitoring system for running on live sites
Stars: ✭ 206 (-1.44%)
Mutual labels: performance
Floating.js
Let a few elements float infinitely up your page
Usage
- You can install it via
npm install --save floating.js
, and browserify it in your page - You can download the script and embed it in your page
/**
* Float a number of things up on a page (hearts, flowers, 👌 ...)
* @param {string} [options.content='👌']
* the character or string to float
* @param {number} [options.number=1]
* the number of items
* @param {number} [options.duration=10]
* the amount of seconds it takes to float up (default 10s)
* @param {number|string} [options.repeat='infinite']
* the number of times you want the animation to repeat (default:'infinite')
* @param {string} [options.direction='normal']
* The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction">
* animation-direction</a> of the main animation
* @param {number|array} [options.sizes=2]
* The size (in em) of each element. Giving two values in an array will
* give a random size between those values.
*/
floating({
content: "🙋",
number: 1,
duration: 3,
repeat: 1,
size: 3
});
Example
All that was needed to make this example (haroen.me/floating.js) work is this:
<script src="https://unpkg.com/floating.js"></script>
<script>
floating({
content: "😇",
number: 3,
duration: 11
});
floating({
content: "👌",
number: 5,
duration: 8
});
floating({
content: "test",
number: 3,
duration: 15
});
floating({
content: "🙋",
number: 1,
duration: 3,
repeat: 1,
size: 1
});
floating({
content: '<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Weather-snow.svg">',
number: 10,
direction: 'reverse'
size: [1,10]
});
floating({});
</script>
As another option you could do:
import floating from 'floating.js';
floating({
content: "😇",
number: 3,
duration: 11
});
floating({
content: "👌",
number: 5,
duration: 8
});
floating({
content: "test",
number: 3,
duration: 15
});
floating({
content: "🙋",
number: 1,
duration: 3,
repeat: 1,
size: 1
});
floating({
content: '<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Weather-snow.svg">',
number: 10,
direction: 'reverse'
size: [1,10]
});
floating({});
Support
This makes use of css animations, which aren't supported on every version of IE.
License
Apache 2.0
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].