From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
If you want your web presence to stand out, creating a beautiful website is the first step to go. In order to make a visit to your website memorable and interesting you can add exciting and fun effects. Here is another collection of websites that do exactly that.
If you are interested in more inspiration you can check out our previous collection Examples of Fresh Effects in Web Design.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Layrr
When you visit Layrr you get a superb scrolling experience. Scrolling will reveal the message of the network that supports creatives in realizing their projects.
Contain.r
Hover over the single project items after they fly in to see a fast-running slideshow. When leaving the item, it will stay with the current image.
Faces of New York Fashion Week
Here we have a great layout with a BW to color hover effect and dynamic loading of the images. Try to zoom the page out and you’ll see how the items will re-arrange!
Subsens
Thierry Alexandre Schmitt makes navigating through his site a smooth “sliding” experience. Click on a project to see the details sliding in from the right or use the filters on the top to see the projects squeezing up like an accordion.
Soleil Noir 2012
Soleil Noir Studio gives us another amazing scrolling experience with some thoughtful messages about believing…
Air Jordan 2012
Visiting Air Jordan 2012 and scrolling will just blow you away: making extensive use of the parallax effect you’ll get the impression that the shoe parts are going to fly right into your face!
3Digital
3Digital is another great example of turning a website into one big slider: everything just slides up and down, to the sides, in and out… An amazing experience because it all just feels “right”.
HERR LEDER
On HERR LEDER (Mr. Leather) you will find another scrolling Easter-egg and don’t forget to refresh the page because the background will change!
TokioLab!
TokioLab! add some spice to the scrolling effect with the help of some subtle parallax effect and scaling the letters.
MENDO
MENDO offers a fresh book browsing experience with a stunning full page image view.
Colorz
Colorz will surprise you with their hover effect on the portfolio items. The image slide direction depends on where you come from with your mouse and to where you are leaving. Make sure to check out the rest of the site since it’s packed with fresh, subtle effects (i.e. their News section).
MahiFX
A smooth scrolling experience with some subtle effects…
CCR – 10 Anos de IPO
This website combines the scrolling effect with a timeline, showing the yearly achievements of the company. Notice the detail of the blurry images, making the “driving” experience appear more real.
g4interactive
Don’t you just love to see some non-straight shapes? G4interactive rotates its website elements 45 degrees and creates a fresh look with some subtle effects.
TAG REACTION
Up for some fun chemistry? On Tag Reaction you can fly (scroll) through some interesting “molecule bindings” and check out the “details” of each reaction. What an amazingly creative concept that will blow you away!
Yuna Kim
Some sweet hover effects here. Check out how the shapes bounce or how the top bar slides in smoothly.
Manual
Manual surprises with a fresh project navigation: just click on projects and choose one of the sort options to see the items slide to their places or fade.
One Darnley Road
Check out the subtle menu effects and see the content sliding into place.
Barcito Chicago
Barcito does not have any fancy scrolling or sliding but simply a very subtle and sweet hover effects. Don’t you just love Pintxo?
Bagigia
Bagigia offers yet another great scrolling experience by showing you their product in detail and from all sides. Hey, a zipper indicates the progress, sweet!
Acuterays
Last, but not least, Acuterays is another scrolling site with some asymmetrical design elements.
And that’s all! We hope you liked this little collection and got inspired!
Are there tutorials that show how to build scolling size like those?
hohohohoho reading anymore…ty for lists \m/
Nice examples, but with some complicated animations my computer fan went crazy. They should work on performance of this effects.
Yeah my fine had kicked in over time as well, still amazing things to see though.
Reminds me of those unusable Flashsites that were a good for a visit for some nice effects but didn´t wanted you to read or explore any content.
History repeats itself but the technology changed 🙂
Wow, that Air Jordan page has just blown me away! I think that huge companies using modern technologies will push development, though you can surely overdo effects (which has been done earlier, too). I love to “inspect” sites like these to find out how things can be done. Thank you for this collection!
Some designs/interfaces are really nice.
But…
… most are “demo quality” only too. Do only work on latest and greatest Browser(s?) which most designers seem to think is latest Safari, maybe Chrome, sometimes maybe even Firefox? But if you want to be inspired this is really spoiling as most sites fail miserably at least in at least IE (I did not bother other browsers like shitty Android Webkits, Opera mobile, older Firefoxes etc). As an example For IE failing not just in IE 8 (ignorance of lower versions may be understandable) but also in IE9. Another site does not even work in latest Firefox which really is a unbelievable.
These “inspiring designs” cannot be used at all as they show no fallback behavior whatsoever.
Disclaimer: Sorry if designers of some sites actually did provide fallback stuff, of the ones I tried none did. As an example the http://g4interactive.com/ site is not even accessible in e.g. IE9 (diamond shaped infos are cut off etc). And this even is a browser which should be capable to at least show the stuff, maybe not as glorious but at least provide an accessible fallback. Try open the site in IE8 and it does not even load at all?!
I definitely am no IE fan but reality is that there are more browsers out there than just Safari, lastest Chrome or latest Firefox.
The real problem with this stuff is that beginner designers being inspired by this stuff are totally spoiled and simple mimic this. This then ends up really bad for the users of these sites which then ends up bad for the clients too, as of course they loose at lot (sometimes most) of their visitors.
For beginner designers this is frustrating. Or they become cocky enough to not care for other browsers any more at all. “f*ck IE” is heard often, but that is not the real problem. Problem is the missed business for the clients and in the end for themselves.
I rarely look at these “hero” designs for this reason. I am not saying to not do this stuff but at least try to offer some kind of fallback. For your own sake…
Exactly.
All those nicely done sites sent my fans over the 6200rpm, It’s like he flash craziness back again. My thought is that just because you can do it that doesn’t mean this is necessarily the way to go. I don’t know about you, but in the real world my clients still ask that I deliver sites that are viewable by EVERY customer (browser).
all site is awesome ………
Awesome Examples. As the design this will be nice to having more ideas, btw i like most the Typographic designs! which is more cool!
Absolutely amazing effects and animations, thanks for sharing 🙂
Loved http://www.soleilnoir.net – very creative and eye-catching!
Good to see some astonishing examples of effects. Great to be use on my website next time. Thanks 🙂
Nice examples, some of the sites have over done the effects a little
Thanks impressive and beautiful designs.
I love all these examples, really inspiring, I wish I could use them. It seems they mostly only fit websites that are promoting unique webdesign, or other artists sites, in general. :/
Thanks for the collection! 🙂 I like the Layrr site.
Wow, I love seeing these examples, especially the air jordan site. Very impressive design.
Awesome examples!
thank you, this helped!
Hi Mary Lou
Thanks for creating this broad collection of websites, I agree with the previous comments, a lot of these sites resemble the old full flash websites that end up turning users away.
I think a balance needs to be found between new technologies and keeping sites user friendly as well as being intuitive to use.
Cathy
Awesome .. Thank you ..
check out my works which fit well in this collection: http://www.slowear.com (hover on edges) and http://www.infographicsagency.org (hey, look at the main slider and the pointing arrow to where to go!)
My top pick- Soleil Noir, seems like Logitech Air 3D Laser Mouse… 🙂
Very impressive and beautiful designs 🙂
Impressive!!
good one sharing , Thanks
love the Air Jordan site, it like an online game 🙂
nice article! here’s an other one: http://www.archikon.nl
Great Blog of web design .
Really amazing collection, i like “SOLEIL NOIR 2012” it’s really cool
Great job, fantastic blog, thanks a lot for sharing!
Thanks for nice collection of Site. They are great design Inspiration.
Earlier commenters on this would just *love* my site. If it doesn’t kick-start your computer fan, your computer is nicer than mine.
I don’t have words to praise you. I just like to kiss your face for thanks for good sharing.
Oh man! Super duper awesomely fabulous collection of the same kind of websites. Great efforts meets cool results. 🙂 This is one of the best collection I have gone through. Thank you very very much Mary Lou for doing this great job of making us aware about these great works!
Regards,
Prerak Trivedi
Is anyone thinking about the usability of these parallax scrolling sites? Yeah, they’re impressive in terms of engagement and exploration. But has anyone measure them on usability? I found the Nike Air Jordan site to be slow to load and its performance wasn’t great in Firefox.