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.
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.
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.
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.
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.
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].
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
> - 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.
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.
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.
> 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!
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.
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 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 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?
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?).
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 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.
Original image is 1MB: http://www.madogatari.jp/teaser/images/s06_illust4.png
PNGquant version is 250kb: http://i.imgur.com/4R0hZkQ.png