Cinema Seat Preview Experiment
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
A look back at2016
A round-up of all Codrops resources of 2016
Every year we make a little summary of all our posts on Codrops.
This year was a truly interesting and creative year. It was filled with bold design choices, new interactive technologies and less conformity.
Geometric shapes, liquid looks and irregular layouts were big in 2016. Embracing the past with retro love and recognizing small, meaningful interactions as crucial was a big motto. Also, letting go of old habits and welcoming new methods and technologies made part of this year.
Let's carry this fresh, sophisticated spirit over to the next year!
And now, join us for a look back at 2016!
Animated Heat Distortion Effects with WebGL
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.
The Making of "The Aviator": Animating a Basic 3D Scene with Three.js
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
Background Segment Effect
A background image segment effect as seen on Filippo Bello's Portfolio, employing the CSS clip-path property and powered by anime.js.
Isometric and 3D Grids
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
Interactive Record Player
An experimental template with an interactive old school record player powered by the Web Audio API.
Simple Interactive Points Effect
An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.
Inspiration for Navigation Indicators
Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.
How to Create an Interactive Animated SVG Drum Kit
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery.
Line Maker: Animated Decorative Lines
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'.
Fancy SVG Letter Animation
An experimental SVG letter animation based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Julian Garnier's anime.js.
Artsy Media Pop Up Effect
A fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects.
Creative SVG Letter Animations
An experimental plugin for animating SVG letters using Segment, a JavaScript helper for drawing and animating SVG path strokes. The idea is to animate the path strokes of an interesting display font in a creative way.
Block Reveal Effects
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
Elastic Circle Slideshow
A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot "Mobile Commerce Interface" by Bilal Mechairia.
Surf Report Template
A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.
Distorted Button Effects with SVG Filters
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
Inspiration for Line Menu Styles
Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection — contributions are welcome!
Interactive Musical Instruments
Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.
Spring Loaders with Rebound and Canvas
A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion.
Polaroid Stack to Grid Intro Animation
A tutorial on how to create an intro animation where a decorative Polaroid stack becomes a grid similar to the effect seen on the 'takeit' website.
Icon Animations Powered by mo.js
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot "Like Animation" by Daryl Ginn.
Animated Animals in CSS and SVG
Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals. A Chrome-only experiment.
Tilt Hover Effects
Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.
Interactive 3D Mall Map
An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
Multi-Layer Page Reveal Effects
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
Item Reveal Animations with SVG
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
Multi-Layout Slideshow
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.
Above & Beneath: Featured Content Layout Effect
A landing page template with a featured content section and background sounds that change according to the view.
Transition Effect with CSS Masks
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!
Cubes Advent Calendar
A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations.
Inspiration for Letter Effects
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'.
Freebies
This year we had many great freebies with creative topics and themes — from Yoga to virtual reality and urban gardening!
-
Kitchen Tools & Appliances Icons
-
Geeky Christmas Vector Set + Patterns
-
Winter Sports Icons
-
Virtual Reality Icons
-
Water Sports Icons
-
Sports & Games Icons
-
Houses & Buildings Icons
-
Yoga Icons
-
Urban Gardening Icons
-
Creativity & Learning Icon Set
-
Meditation & Spa Icons
-
"Synthetica" One Page Website Template
-
Responsive Office Icons
-
Astronomy & Space Icons
-
Environmental Icons
-
Checkout & Delivery Icons
-
Pollution & Energy Icons
-
Science Line Icons
If you'd like to publish your exclusive freebie on Codrops, just drop us a line.
Collectives
This year our Collective has become a bi-weekly news magazine that collects the most interesting design and dev resources around the Web, every Wednesday and Saturday.
Subscribe to our RSS feed to receive them.
You can also get the feed as email.
If you'd like to submit something, just use the Collective submission form.
Our Contributors
An enormous thank you goes to all our excellent contributors who created and maintained fantastic content for Codrops this year!
-
Claudio Calautti
-
Lucas Bebber
-
Hui Jing Chen
(CSS Reference) -
Luis Manuel
-
Karim Maaloul
-
David Khourshid
-
Josh Ellis
-
Manuela Langella
-
Adrien Denat
-
Robin Delaporte
-
Peter Finlan
-
Dale Humphries
-
Anastasia Ageeva
-
Tatiana Lapina
-
Benjamin Bely
-
PixelBuddha
-
Brook Wells
-
Juan Sarmiento
-
Icons8
-
Freepik
-
Epic Coders
-
Eezy Inc.
You!
We'd also like to thank BuySellAds.com.
They make our work possible!
“You must understand the whole of life, not just one little part of it. That is why you must read, that is why you must look at the skies, that is why you must sing, and dance, and write poems, and suffer, and understand, for all that is life.”
— Jiddu Krishnamurti
Have a thriving 2017 everybody!
