
Really well-designed parallax(?) scrolling - rawnlq
http://www.madogatari.jp/
======
tmikaeld
They could at least have run it through PNGquant...

Original image is 1MB:
[http://www.madogatari.jp/teaser/images/s06_illust4.png](http://www.madogatari.jp/teaser/images/s06_illust4.png)

PNGquant version is 250kb:
[http://i.imgur.com/4R0hZkQ.png](http://i.imgur.com/4R0hZkQ.png)

~~~
masklinn
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.

~~~
tmikaeld
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/](https://pngquant.org/)

------
moron4hire
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](https://en.wikipedia.org/wiki/Zooming_user_interface)

[1]
[https://en.wikipedia.org/wiki/Parallax_scrolling](https://en.wikipedia.org/wiki/Parallax_scrolling)

~~~
lnanek2
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.

~~~
moron4hire
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](https://en.wikipedia.org/wiki/Parallax)

------
HugoDaniel
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

~~~
keerthiko
_> \- 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.

~~~
HugoDaniel
Yes, you are right, i was mislead by the final animation (it is indeed an
animation and not a scrollable part).

------
tenfingers
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.

~~~
IpxqwidxG
> 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!

------
moondowner
For the lazy, the source reveals these jQuery dependencies:

[https://github.com/camoconnell/lazy-line-
painter](https://github.com/camoconnell/lazy-line-painter)

[http://ricostacruz.com/jquery.transit/](http://ricostacruz.com/jquery.transit/)

[https://github.com/jquery/jquery-
mousewheel](https://github.com/jquery/jquery-mousewheel)

------
bbrazil
Shaft is a well known anime studio, famous for several series including
[https://en.wikipedia.org/wiki/Puella_Magi_Madoka_Magica](https://en.wikipedia.org/wiki/Puella_Magi_Madoka_Magica)
and
[https://en.wikipedia.org/wiki/Monogatari_(series)](https://en.wikipedia.org/wiki/Monogatari_\(series\))
shown here.

------
casion
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.

~~~
morganvachon
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.

------
dimi-31
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...

~~~
tudorw
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!

~~~
hrrsn
I completely didn't notice the loading time. Fibre is beautiful.

------
synthmeat
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](http://imgur.com/wuMIpR0) Kyubey being funky again.

------
ericmo
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.

------
crncosta
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/](https://desandro.github.io/3dtransforms/)

------
iamzam
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.

~~~
moron4hire
Let's try not to hijack the term "parallax scrolling" to refer to scroll
hijacking in general. This is "zooming user interface".

------
robinhouston
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?

------
thomasfoster96
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?).

------
runj__
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.

------
userbinator
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.

------
tambourine_man
Mobile experience is completely different, but the desktop version is really
impressive.

------
singold
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.

------
aidenn0
This degrades very gracefully on mobile too.

------
partisan
Works well on my i7 MBP with 16gb of RAM. I really like the effect. It's clean
and suits the purpose.

------
Paul_S
Stutters and goes berserk even on my i5 dev machine. Is there an alternative
version of the website?

------
matthuggins
Doesn't look like anything special on mobile.

------
ionwake
I like it great stuff!

------
pajtai
doesn't work at all on my ipad mini

