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 ,
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.
A seamless background pattern is a repeating graphic that can be used to fill a large area without any visible breaks or seams between the repetitions. This type of pattern is often used in web design, graphic design, and textile design to add visual interest and texture to a surface without overwhelming the other design elements. They can be created using various software and can be in various format such as jpeg, png, svg, gif etc.
Background patterns are used in various design fields as they can serve several purposes. Some of the reasons why they are used include:
Overall, background patterns can be used as a design tool to add visual interest, create movement, conceal imperfections, establish a theme, and enhance branding.
There are several ways to create seamless patterns, including the following:
Each method has its own advantages and disadvantages and it’s best to try each method to find the one that works best for you. Once you have created your seamless pattern, you can save it and use it in various projects.
Looking for a background pattern or want to share a unique pattern of your own?
Look no more, Subtle Patterns is a quality resource for anyone searching for tilable textured patterns.
Subtl Patterns ( provided by Toptal®)
Particle network animations in JavaScript typically involve creating visual representations of particles (often small dots or shapes) that move around in a defined space, interacting with each other based on predefined rules or behaviors. These animations are commonly used for visual effects on websites, data visualization, or interactive demos.
Particle network animations in JavaScript offer a visually appealing way to represent various phenomena or data in a dynamic and interactive manner on the web. There are multiple solutions out there to create a nice particle network animation in Javascript.
Depending on the amount of particles interacting, they will all spin up your fan at some point depending on your hardware ;) You can also use Three.js / D3.js / PixiJS or Anime.js to create it, but that might be an overkill.
These libraries offer different features and capabilities, so you can choose the one that best fits your project requirements and familiarity with the tools.
Here some of the popular solutions: