Really well-designed parallax(?) scrolling
madogatari.jp
madogatari.jp
Original image is 1MB: http://www.madogatari.jp/teaser/images/s06_illust4.png
PNGquant version is 250kb: http://i.imgur.com/4R0hZkQ.png
PNG quant does this properly, see here:
It has essentially mapped the vertical scrolling onto the zooming in and out of the page.
Impressive effect but not very useful.
It is basically allowing you to scroll "into and out" of the page and that's it, instead of "up and down". It's not really changing how you interface with it.
[0] http://www.thefreedictionary.com/hairsplitting
[1] https://www.nymark.me/en/weblog/2010/depth-scrolling-effect
:P
Parallax is a necessary property to create the illusion of depth, regardless of the technique used to achieve that parallax.
"Parallax scrolling" is a 2D technique where layer translation is dependent on both progress and layer index.
This technique is computing a layer scale that is dependent on both progress and layer index.
Translation vs. scale. This isn't parallax scrolling.
As i see it, usual scrolljacking implementations give the illusion of a more immersive experience with the following tradeoffs over clicking navigation:
- interferes with the inherent perception of what the scroll does (moving a page up/down)
- harder to navigate (you have to scroll a lot to trigger a section change)
- harder to understand how much more is left to see
- harder to implement and to debug potential bugs
- needs a menu to mitigate all of the above (defeating the purpose of scrolling)
and probably more stuff that i can't think of right now
> - harder to understand how much more is left to see
I think in this page, unlike many other scrolljacking implementations, this one is actually fully scroll-functional. ie You can drag the scrollbar from the side of your browser window, use pgup/pgdn, or click a point in the scrollbar and it still functions well, so the scrollbar gives you all the same navigation flexibility and information as a traditional page, without breaking the aesthetics.
> - interferes with the inherent perception of what the scroll does (moving a page up/down)
As for that one, I think it's evident very quickly that it moves you forward and back, unlike some other scrolljacks that try to do weird things like animate images and run slideshows and things and mixes a bunch of paradigms.
In fact, it actually felt good when I move my fingers on my scroll wheel forward and it pushes the world forward, and back when I pull back, it felt more connected than a classic up/down scroll.
A gimmick, of the same kind I hate flash for.
There is a lot of people who would like this.
Purpose of such a tunneled scroll isn't navigation in the traditional sense. It's rather a visual drive-through between two points where the artist gets to introduce the characters of her animation. In a sort of gallery.
Like billboards on either side when you're on the highway.
IMHO it does what it is supposed to do. Works for the artist. And that is great!
https://github.com/camoconnell/lazy-line-painter
Things like these remind me of wow effect of Flash websites of late 90s. Those worked reliably across browsers though.
http://imgur.com/wuMIpR0 Kyubey being funky again.
As some else mentioned, this is a example of use CSS 3D transforms. Here is a nice intro https://desandro.github.io/3dtransforms/
So I am not sure, if the well designed parallax scrolling really does mean anything.
I played around with it for about a minute and started feeling a bit off, but then again I can't play FPS either without getting the same effects.
I understand that some people/business want or need to be different to get more attention, but you should mantain a good level of user-friendliness, just my 2c.