From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Modern web technologies are pushing the boundaries of creativity and today we want to share a little collection of modern websites with some great effects. From hover to scroll, there are many ways to surprise and engage the visitor. The possibilities are endless. Get inspired with these examples of creative and modern effects in web design.
If you are interested in more inspiration you can check out our previous collections Examples of Fresh Effects in Web Design and More Examples of Fresh Effects in Web Design.
Spacho
Spacho has a fresh and contrasty design with an asymmetrical layout and some sweet hover effects. Just delicious!
Readymag
Get ready for some serious kick-ass scroll folding effect and some great interactive experiences!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Adam Coulombe
Adam Coulombe’s portfolio has some smart and beautiful effects and a stunning design.
nanozoom
nanozoom, the creators of one of the most exquisite web presences, give us a unique navigation experience on their portfolio.
Lift Interactive
Lift Interactive use some interesting hover effects to entertain their visitors. Check out their “Log” with the featured article images as rotating book covers. Definitely hip!
Lotta Nieminen
A unique navigation experience with a minimal design. Just lovely.
Joint
An absolutely bold and novel content navigation concept. But you’ll be surprised how intuitive it is. Absolutely genius.
Bicikli Fumi?
Bicikli Fumi? has a nice balance of vertical and horizontal alignment with some great complementary sliding effects. Great colors, too.
Healing Histories
Healing Stories will take you on a emotional journey with their full-screen video and their interesting vertical navigation.
ChilliPear
ChilliPear will surprise you with a word eating Pacman animation.
Babel
A beautiful website for the interactive book app with some lovely scroll and hover effects.
LAMDASH DNA
Although many of you might be sick of the parallax scrolling effect, this website will surprise you nonetheless with that DNA play.
Sidewalk
Sidewalk has a great layout and color choice with a pinch of nice effects and a great display of their music.
It’s time for Skype
Explore their featured demos to see some great and colorful animations.
Evoenergy
Evoenergy has a comprehensive and beautiful way to present some stunning data along with some great hover effects.
ididthat.ca
Nick DeGiorgio’s website has a great concept for the top menu and some swift circle hover effects.
Folicuré
Folicuré has a lovely design and some nice movements on mouse move.
Rule of Three
Absolutely stunning design with strong typography elements and some “slide on scroll” action.
Mailboxing
Another great app site design with a little double slider on tablet and phone. Really nice concept.
And that’s all! We hope you liked this little collection and got inspired!
Rule of three…stunning!!
Great collection love the panasonic shaver website
I just wanna ask/discuss , is those effect need to create one by one? for example, if a website has 10 difference custom animate effect, we need to write each one by one? which mean if we wanna make and sell as template(just wanna ask, not plan to rip-off or whatsoever), that mean our buyer will have hard to to tweak the effect/layout of the template?
and how about the responsive, just disable if view on iphone? and how those effect look on 27inch imac, i use my macbook to make it small with pinch out the screen, it look weird thought.
Lotta Nieminen makes “flipping” through her portfolio a clean dream! I love the idea of using effects in minimal design; surprising and fresh.
Thanks for the round up,
Sarah Bauer
Navigator Multimedia
http://www.navigatormm.com
Nice to see some unique ideas that SPACHO site is pretty neat, love the scrolling effect on the bottle.
I’m inspired.
they are is good web, but tympanus.net is special 😛
readymag is my favorite <3
It really was a very inspirational post. I was looking for such web Design. As i’m a new designer and i keep searching for help. Thanks for sharing
I’d love to see a tutorial here on how to create the kind of single-page layout Joint is using, so I wouldn’t feel guilty about doing something just like it…
Wow. Stunning pieces of work. great inspiration indeed
Wow great websites for inspiration.
Great collection Manoela.
Awesome collection of new tech websites with good graphics and animation combination.
Nice Collection
How to design such interactive themes i am just started web designing what should i learn to develop sites like this !!! HELP SOMEONE !!!
Great designs, seems scrolling is hot topic for a while now. Most visually intressting is SPACHO for sure. The Scroll/Rotating bottle is pretty genius, fresh colors and looks like a great advertisement. The best and clear portfolio presentation I’d say Adam Couloumbe. The most funny and daring is Joint with their ‘joints’ all over the world, I wish them the best of luck.
Others like Babel and Skype should also be mentioned for design and atmosphere. Great list, but these are my picks.
Sidewalk salutes Mary Lou!
<3
facebook.com/walksideways
Amazing. Thanks for this collection. Rule of three shows how beautiful a design concept can be — without color and without photography! Truly amazing!
Very nice collection! Thanks for putting together! My favourite is „Joint“!
Wonderful collection! this page is a source of good inspiration!
stunning designs tech does change the world! Good job!
Great listings