Really well-designed parallax(?) scrolling(madogatari.jp)
madogatari.jp
Really well-designed parallax(?) scrolling
http://www.madogatari.jp/
50 comments
doesn't work at all on my ipad mini
Yes it's very well designed but the load time is huge and honestly I still dont like it. I think dislike scrolling in general...
I had to wait about 15 seconds for it to load, on fibre it felt like a lifetime, that said the experience delivered was great, crisp and fluid, worth the wait. As this is targeted at people with a rich appetite for visual content and well used to content heavy sites, the experience seems appropriate and well executed, it's not a bus timetable or directions to the A&E!
I completely didn't notice the loading time. Fibre is beautiful.
Shaft is a well known anime studio, famous for several series including https://en.wikipedia.org/wiki/Puella_Magi_Madoka_Magica and https://en.wikipedia.org/wiki/Monogatari_(series) shown here.
This is called a Zooming User Interface [0]. Parallax scrolling refers to a 2D CG technique [1] that has also been used as a scroll-hijacking effect. It doesn't refer to the general case of scroll-hijacking.
[0] https://en.wikipedia.org/wiki/Zooming_user_interface
[1] https://en.wikipedia.org/wiki/Parallax_scrolling
[0] https://en.wikipedia.org/wiki/Zooming_user_interface
[1] https://en.wikipedia.org/wiki/Parallax_scrolling
This is definitely parallax scrolling. Watching the items far away as you scroll forward and backward. The ones farthest away seem to gather at the center of the screen. As you scroll you don't just move in and out you move left and right as well. Watch the movement of the things in the back vs. the things in the front when this happens. The things in the back move left and right very little while the things closer to you move left and right a lot. It's definitely parallax.
You are right that it is parallax [0], but you are wrong that it is parallax scrolling.
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.
[0] https://en.wikipedia.org/wiki/Parallax
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.
[0] https://en.wikipedia.org/wiki/Parallax
I think I would call this "depth scrolling" as it is somewhat different from a zooming interface (where the interface is laid out in space, like landmarks in Google Maps).
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.
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.
This is called hairsplitting [0]. The only thing that anyone has referred to as "depth scrolling" in regards to page scrolling was just parallax scrolling [1].
[0] http://www.thefreedictionary.com/hairsplitting
[1] https://www.nymark.me/en/weblog/2010/depth-scrolling-effect
:P
[0] http://www.thefreedictionary.com/hairsplitting
[1] https://www.nymark.me/en/weblog/2010/depth-scrolling-effect
:P
I wouldn't call it a zoomable UI as I can only go in one precoded direction.
It has essentially mapped the vertical scrolling onto the zooming in and out of the page.
Impressive effect but not very useful.
It has essentially mapped the vertical scrolling onto the zooming in and out of the page.
Impressive effect but not very useful.
The scrolling is very jumpy for me on a macbook pro, it's almost impossible to zoom to a specific 'frame' of the animation, the whole thing just jumps around everywhere.
It's very smooth for me on the Windows version of Firefox, on a Haswell quad core i5. I'm actually surprised since Firefox has issues with other graphics heavy sites.
[deleted]
[deleted]
What is the real advantage of this over clicking on the page ?
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
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 navigate (you have to scroll a lot to trigger a section change)
> - 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.
> - 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.
Yes, you are right, i was mislead by the final animation (it is indeed an animation and not a scrollable part).
It's basically an ad from studio Shaft known for it's stylistic approach to certain things in anime production. Something nonstandard from them is what people expect. Plus, there's nothing wrong with trying to show off in an ad at the price of usability.
I agree. I guess i was mislead by the title then.
It gives you an illusion of zooming in/out with your scroll wheel when you're actually scrolling the page.
Mobile experience is completely different, but the desktop version is really impressive.
They could at least have run it through PNGquant...
Original image is 1MB: http://www.madogatari.jp/teaser/images/s06_illust4.png
PNGquant version is 250kb: http://i.imgur.com/4R0hZkQ.png
Original image is 1MB: http://www.madogatari.jp/teaser/images/s06_illust4.png
PNGquant version is 250kb: http://i.imgur.com/4R0hZkQ.png
Do do you mean PNGQuant? There's the usual issue that it's lossy, for that image you might as well use mid-level JPEG compression.
It's got alpha transparency, you can only use PNG or GIF for that, the issue is that most sofware only saves proper transparency for 24-bit PNG while for 8-bit it becomes jagged.
PNG quant does this properly, see here:
https://pngquant.org/
PNG quant does this properly, see here:
https://pngquant.org/
I don't see how JPEG could be used in this case as the images clearly have per-pixel transparency in the borders. Maybe if you had PNG masks or edges and JPEG central content, but that would be twice as many images.
It's a different type of lossy, and I think dithering noise is more suitible for manga-style drawings than jpeg noise.
Even using optipng would've been an improvement: the image could've been reduced by 10% by running it through that.
What's PNGquadrant? Google didn't help
I'm sorry it was auto-corrected, it should read quant:
https://pngquant.org/
https://pngquant.org/
The first time when I scrolled through it felt like automatically pulling through each pages taking away the control from me.
So I am not sure, if the well designed parallax scrolling really does mean anything.
So I am not sure, if the well designed parallax scrolling really does mean anything.
Let's try not to hijack the term "parallax scrolling" to refer to scroll hijacking in general. This is "zooming user interface".
This is a nice use of CSS 3d transforms. I wonder why it isn’t 3d on an iPhone, which ought to support these transforms. Perhaps it was too slow or memory-hungry?
Great work! thanks for share the idea with us.
As some else mentioned, this is a example of use CSS 3D transforms. Here is a nice intro https://desandro.github.io/3dtransforms/
As some else mentioned, this is a example of use CSS 3D transforms. Here is a nice intro https://desandro.github.io/3dtransforms/
For the lazy, the source reveals these jQuery dependencies:
https://github.com/camoconnell/lazy-line-painter
http://ricostacruz.com/jquery.transit/
https://github.com/jquery/jquery-mousewheel
https://github.com/camoconnell/lazy-line-painter
http://ricostacruz.com/jquery.transit/
https://github.com/jquery/jquery-mousewheel
This is pretty well done. Scrolled fairly smoothly. My only qualms are the loading time and the image quality (SVG version of drawings not available?).
This effect may induce motion sickness in those who are sensitive to zooming and panning. Be careful to scroll slowly.
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 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.
Nice trick, aesthetically, but horrible for anything else.
Drawing stutters on both FF 39 and Chrome on an i5 system. Breaks the scroll wheel (I had to use page up/down or the scroll bar). Basically impossible to navigate accurately to anything.
A gimmick, of the same kind I hate flash for.
A gimmick, of the same kind I hate flash for.
> Basically impossible to navigate accurately to anything.
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!
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!
Stutters and goes berserk even on my i5 dev machine. Is there an alternative version of the website?
I like it great stuff!
Works well on my i7 MBP with 16gb of RAM. I really like the effect. It's clean and suits the purpose.
Why dont make it animated and click-navigable?
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.
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.
[deleted]
This... needs QA. Slow loading. A bit wasteful on iOS [1]. But interesting and original (to my knowledge) design.
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.
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.
Interesting to see such an CPU intensive site directed at the Japanese market since many people living in Japan are known for not having as up-to-date computers as the US and Europe. But that could be a stereotype from a few years ago. IE6 died really slowly over there at least.
I liked the idea, but not the execution. There's a huge amount of aliasing which is distracting and deteriorates the images. Also, I felt like there's too much information on the screen, it's hard to focus on one thing. I liked how they changed the background color.
This degrades very gracefully on mobile too.
Doesn't look like anything special on mobile.