From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Having some fresh and maybe even unexpected effects on a website, can juice up the experience for the user. Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.
We’ve collected some wonderful examples of such effects for your inspiration. Dive in!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Edits Quarterly × Ian Coyle
Edits Quarterly is a great example of a whole new navigation experience. You can scroll down or simply use the arrow keys to view the beauty of it.
neotokio!
Neotokio! will surprise you with different kind of animations while you scroll down the site.
Kyan
Kyan has an awesome slider that just animates wonderfully has gives a real 3D feel to it.
Adrian Baxter
Adrian Baxter’s website has an interesting and original parallax effect. Oh, and don’t scare when you check out the contact form 🙂
Alpis Design
Here we have a nice hover effect in the about section.
Dawid Wadach
Dawid Wadach has a very interesting hover effect which reveals his portfolio items. A combination of lines and boxes that move make this effect very original.
Dangers of Fracking
“Dangers of Fracking” which is designed by brilliant Linda Dong, is just a beautiful on-scroll piece of art that explains the dangers of hydraulic fracturing, a process that is used to release natural gas. See, how the story is being told using this wonderful visualization method.
AIGA 50 DC
AIGA 50 uses this great “cut-out” technique that reveals the images of a slider which always seems to be beneath the other content slides.
Create Digital Media
Create Digital Media has a unique slider that shows content and images in an original way.
Mezcal Buen Viaje
Now, THAT I call a scrollbar! 🙂 “Mescal Buen Viaje” is like entering another world: everything is very original, from the scrollbar to the navigation to the way images are displayed: it’s such a fresh experience. And check out those cute kolibris that flap their wings on scroll.
Alex Pierce
Alex Pierce has some nice sliding happening right after the page is loaded with CSS3 animations. Hovering over the main navigation will make the whole navigation bar move a bit. Also, other subtle (hover) effects make a visit to his website a really nice experience. And don’t you just love the typography?
Styiens – Label Musical
Styiens has a very interesting slider that moves around that central circular element.
Lavazza 20Calendars
20 Calendars of Lavazza uses a beautiful full-page accordion that slides open elegantly when clicking on one of the headlines.
Shelton Fleming
Shelton Fleming divides its content into “Experiences” and “Ideas”, presenting each on one side of the page and making their sub-content slide originally when opening a menu item.
Toast!
Toast! has a really cool and original slider.
Five Thirty Brew by blenderbox
Five Thirty Brew by blenderbox is an exciting scrolling roller-coaster that will present you their fine beer and the process of making it.
CaptainDash
The delicate and original layout and design of CaptainDash makes the sliding content very interesting.
Sir John A Day
Sir John A Day has some really cute subtle details that are not visible at first sight. But once you dive in, you will see those tiny animations, that complement this beautiful design and add life to it: there is something animating in every section of the page.
We hope you liked this little collection and got inspired!
Can you imagine, how many experiment did they do, before they launch their site 🙂
Thanks for share Mary..
(sorry for my bad english..)
Impressive work! 😀
Wow, highly impressive! And thanks for your warning about Adrian Baxter’s website 🙂
I really enjoy your work and fresh perspective on web design Mary. I was wondering if you could explain of point me to how the web page posted here:
Sir John A Day
Has a navigational bar that appears after you start scrolling down the page. I like this and I have been looking to learn how this is done for a while now.
Wow… fantastic examples! Thank you for showing us.
Holy cannoli! What a great showcase of amazing websites!
Keep doing that awesome job!
Thanks.
Wow! Well I love the Create DM site, naturally 😉 But these are some truly wonderful examples. Isn’t the web beautiful these days?
Man, talk about inspiring! I absolutely LOVE all of these designs!
Thanks for sharing. It will be really inspiring. The web is evolving (again) and Codrops is in the place!
Some really good stuff here. Especially like Kyle’s design. Very clean looking.
Amazing designs. Love the new generation of browsers with fast JS engines.
All Designs are very nice and effective….Looking very beautiful.
Good thing we dont need flash to create gratuitous web animations any longer!
Looks beautiful, First time I am looking at new concepts, specially Kyle’s design is superb!
awesomeness!!
i like “Mezcal Buen Viaje” very much.
But are there tutorials how you make something like that.
AIGA 50’s style really gets my attention. Edgy yet refreshing!
I think some really good stuff here. Especially like Kyle’s design. Very clean looking.thanks manan
These are really cool, but some of them are too CPU-intensive that they become choppy or have long load times on slower computers or connections.
I think you eventually reach a point of diminishing returns when it comes to flashiness, because you soon begin to lose visitors whose technology can’t keep up with the website’s over-the-top interface.
Websites like http://www.rodsvoice.com and http://sign-with.us are just as slick, clean and engaging, without running slowly or having to load for a long time.
That’s my 2 cents anyway.
Thank You 🙂
But “Toast!” is a Dead Link!!!!
Please fix!
Thanks Mary for this great collection of new inspirational webdesign 😉
These were all amazing sites. Thank you for the research…
@Gregory F Phillips
Prep your fixed menu. (position: fixed, bottom: 0,…)
Once you’re happy with it, use JS to “if the top of the visible window is > the bottom of the main nav, slide up the fixed nav, otherwise slide down the fixed nav”.
Hope it starts your search on the right path.
Cheers,
iso
I am thoroughly impressed by all of these examples! It really shows what is possible by creatively using the tools that are available to web designers, with CSS and HTML5’s ever-expanding capabilities. And lucky for us, we can look at the code and learn from them!
nice list!
What nice blog! I was searching this type of blog for long time.
Thanks
Good collection… more inspirations..Thanks for sharing… Lavazza is my preferite.. but I love also site like editsquarterly and 50.aigadc
Thanks Mary, codrop is my inspiration when I look for modern web effects.
Want to share one sophisticated “scroll style” website : beetle.de
Great List. Thank you so much. Im always finding good stuff on your site
This is an interesting page….
Nice List. Came to it after reading the second one. Good Work.
Hi excellent post. These designs are really so beautiful. Thanks for sharing it. Keep posting