Slice Revealer
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk's transitions experiments.
A look back at2018
A round-up of all Codrops resources of 2018
2018 was a year full of sophisticated designs and experiments. Interactivity and play were big. Sound, shape and movement marked the most interesting web presences around and we are excited to see what's coming next.
Like every year, we've created a little round-up of Codrops resources.
Come and join us for a look back.
Outdoors Template
An implementation of Gil Huybrecht's “Outdoors” design project powered by layered CSS grids.
Gradient Topography Animation
An organic SVG shape layer animation based on Diana Hlevnjak's work "Gradient Topography". Powered by anime.js.
Decorative Letter Animations
Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.
Scrolling Letters Animation
A switching title effect where a fixed text element changes with an animation depending on the scroll position.
Interactive Animated Landscape
An exploration of an animated interactive landscape built with three.js.
Ambient Canvas Backgrounds
Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library.
Motion Transition Effect
A speedy motion transition effect for an image slideshow inspired by Gal Shir's "Ping Pong Slow Motion" animation.
Interactive Repulsion Effect with Three.js
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot Holographic-Interactions".
Triple Panel Reveal Slideshow
A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax.
Animated Fragment Slideshow
A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the "Pieces" library, which was created for achieving interesting effects like these easily.
Creative Audio Visualizers
An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library.
Grid Layout with Motion Hover Effect and Content Preview
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.
Fullscreen Hover Loop Effect
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Particle Effects for Buttons
A little library that can be used for bursting particles effects. The idea is to disintegrate an element into particles and make it disappear (or vice versa).
An Introduction to CSS Shapes
CSS Shapes allow us to make interesting and unique layouts by defining geometric shapes, images, and gradients that text content can flow around. Learn how to use them in this tutorial.
WebGL Distortion Hover Effects
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
Diagonal Slideshow
A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
Image Reveal Hover Effects
A set of link hover effects that reveal a thumbnail in different creative ways.
Expanding Grid Menu
A CSS Grid powered menu with a box look inspired by the effect seen in the "Ableton Live 10: What's New" video.
Animated Grid Previews
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
Glitch Effect Slideshow
A simple slideshow that uses the CSS Glitch Effect for the slide transitions.
Collapsing Logo Effect
A recreation of the collapsing logo effect seen on PracticalVR. The idea is to have an initial view that animates to a logo in the top left corner of the page.
Slide Out Box Menu
A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.
Password Strength Visualization
Visual feedback for password strength on an image based on Colibro's sign up form.
Full Image Reveal Effect
A simple fullscreen image reveal effect where thumbnails slide out of the viewport to reveal a larger image.
Motion Reveal Slideshow
A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view.
Page Flip Layout
A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.
Multibox Menu
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Ideas for Proximity Feedback with Progressive Hover Effects
We're exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it.
Grid Layout with Scrollable Content View
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
Inspirational Websites from 2018
An inspirational collection of our favorite website designs from 2018.
Freebies
Amie Chen and Diana Hlevnjak made some wonderful freebies this year:
-
"Libre" Web App Template
-
"Oasis" Jekyll Website Template
-
Designer Workspace Illustrations (AI, EPS, SVG, PNG)
-
"Dropcast" Website Template (HTML, Sketch)
-
"Scribbler" Website Template (HTML, Sketch)
Collectives
At number 479, our bi-weekly Collectives continue to be a very popular source of web design and development news.
Subscribe here to receive our monthly newsletter and the Collective directly in you inbox.
Send us news items via the Collective submission form.
Our Contributors
A big thank you to all our fantastic writers!
-
Amie Chen
-
Luis Manuel
-
Yannis Yannakopoulos
-
Robin Delaporte
-
Tania Rascia
-
Ion D. Filho
-
Sean Free
-
André Mattos
-
Diana Hlevnjak
-
You!
“Talent is a pursued interest. Anything that you're willing to practice, you can do.”
— Bob Ross
