just released my second three.js project, a different approach to page scrolling: Unicorn 3D
3 Likes
This is really nice, great work!
I know people are quite divided on this issue, but I think adding a small amount of damping to the animation would make it nicer. I’m using a stepped scroll wheel and it seems really “jumpy” when I scroll, although if I use the touchpad it’s smooth.
One small issue I noticed - when I tried to scroll on the touch pad using the two finger gesture, I guess I accidently did a “pinch” instead of “scroll” and it did some kind of weird mix of zooming and scrolling at the same time, and I noticed the same thing when I zoom in or out with ctrl + wheel. Maybe you could solve this by disabling zoom?
Thank you, that’s an honor!
Yes, it needs some fine tune for sure. I also noticed those glitches and will work on them later.
It was just nice to discover a new dimension on the spectrum of less-is-more, while still using the latest libraries and solutions, even though I’m an enthusiast beginner to 3js.
Wish WebGL had GeometryShader…
Thanks again!
1 Like
Is it supposed to work on mobile? On iPhone SE 2020 iOS 15.3.1 nothing happens when I try to scroll, and the text doesn’t fit the viewport.
This is really cool - thanks for sharing!
It adds a little gamification to your self-advertisement, makes one want to continue experiencing it. Clever approach and well done.
No praise without a little bit of nit-picking though:
In your right introductory quote by Leonardo da Vinci you should, IMO, replace the word “caused” with “warranted” or “founded”. But maybe a native speaker (english) could jump in on that?
Plus one of my favorite criticisms on such occasions:
when your scroll-animation is idle, for lack of user input, it still maintains a fairly high CPU- and GPU-load, which makes the fans go off ( iMac 2014, 4 GHz Quad-Core Intel Core i7, 32 GB 1600 MHz DDR3, AMD Radeon R9 M295X 4 GB )
No, i haven’t set it for mobile yet, thanks for pointing it out. It’s weird 'cos on Android both quotes show. Good feedback.
Thank you! I’m glad you liked it!
I’ll check into that Da Vinci quote.
Yeah, probably it could be optimized somehow, i’m new to 3js, but will change it as soon as i learn stg new.
Thanks!
I checked that on your behalf. And yes, most quotes I found on the internet match your version. (People keep copying each other, don’t they? 
Still doesn’t feel right to me, because things you did _ not _ experience can’t possibly cause you to expect something which would have required that experience. But I’m getting carried away, so never mind …
Tested it on desktop, looks great there and the concept is neat!
The quotes in the beginning look a bit low res, even though it looks like you might already be using troika-three-text.
As mentioned above I would definitely add some easing on the scroll.
Another thing I’d mention is that the website is unusable for users with visual impairments / search engines, since the content is all in WebGL.
I would have all the content present in HTML, and visually hidden from the user but still visible to screen readers / robots.
Your contact at the end should leverage HTML anchor mailto possibilities to both provide a better UX and be accessible to all users.
1 Like
It’s a little old fashioned but it does make sense with “caused”. I checked around and the quote is usually written this way so I think it’s fine. On the other hand, it’s translated from 15th century Italian, presumably, so you could change the wording to be more modern if you want.
I got this when I zoomed in. What zoom is your page at?