Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
|
1 2 3 4 5 6 7 |
$("#sticky_item").stick_in_parent() .on("sticky_kit:stick", function(e) { console.log("has stuck!", e.target); }) .on("sticky_kit:unstick", function(e) { console.log("has unstuck!", e.target); }); |
Player.js is a library that allows you to programmatically control video and audio within iFrames across a number of services.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var player = new playerjs.Player('iframe'); player.on('ready', function(){ player.on('play', function(){ console.log('play'); }); player.getDuration(function(duration){ console.log(duration); }); if (player.supports('method', 'mute')){ player.mute(); } player.play(); }); |
SpinThatShit is a set of SCSS mixins for single element loaders and spinners.
|
1 |
<div class="your-loader"></div> |
|
1 2 3 |
.your-loader { @include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle); } |
Art-list makes it simple and affordable to license high-quality music from real musicians.
For a subscription fee of $199/ yr you can use all of their music for your next video project.
Tiny PNG provides smart compression of PNG & JPG. They also offer a simple developer API to compress your images.
The first 500 images per month are free ,
Fontsup.com is an archive containing over 100.000 free fonts.
The Unsplash license says it all : “All photos published on Unsplash are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash.”
And most importantly, they also offer a development API :)
Granim.js – Create fluid and interactive gradients animations with this small (< 10 kB) js library.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Create a <canvas> element --> <canvas id="granim-canvas"></canvas> <!-- Call the script --> <script src="granim.min.js"></script> <!-- Create a Granim instance --> <script> var granimInstance = new Granim({ element: '#granim-canvas', name: 'granim', opacity: [1, 1], states : { "default-state": { gradients: [ ['#834D9B', '#D04ED6'], ['#1CD8D2', '#93EDC7'] ] } } }); </script> |
The Bellmaker is a library of device-agnostic and device-specific media queries that will complement your exisiting CSS.
|
1 2 3 4 5 6 7 8 9 |
.bellmaker_container { @media #{$da_baseline} { width: $pw_baseline;} @media #{$da_2x_small} { width: $pw_2x_small;} @media #{$da_x_small} { width: $pw_x_small;} @media #{$da_small} { width: $pw_small;} @media #{$da_medium} { width: $pw_medium;} @media #{$da_large} { width: $pw_large;} @media #{$da_x_large} { width: $pw_x_large;} } |
A responsive sticky element plugin, designed to be used with Foundation, Bootstrap or your own css solution.