websites designed as pages on larger virtual canvas?

20 May 2010 - 6:46am
4 years ago
8 replies
858 reads
Navid
2010

Hi
I am wondering if people can share examples of websites where the concept is a larger virtual canvas and the browser is currently showing just a portion of the canvas.  For example, imagine a canvas with a 3 pages in a row horizontally.  Starting on the middle page #2, if you do some interaction you can slide to the left revealing page #1  Page #2 is partially revealed on the far right of the screen.   Then you can slide to the middle, now onto page #2 again, and page#1 on the left (virtually) has an outline hinting that it is mostly out of view and ditto for the page #3 off screen to the right.   This is not an infinite canvas (with a growing scrollbar), but a virtual canvas (with no scrollbars).
Phew, hard to explain, if anyone has examples could you let me know?   I am playing with this idea and with the concept of full drag of the webpage to pan the virtual canvas, but looking for examples especially ajax ones!


thanks,Navid
 

Comments

20 May 2010 - 8:26am
aaron.grando
2010

My site uses something similar to what you're talking about to scroll a div that has been "masked" and scrolls based on input on the navigation links at the bottom.

http://aarongrando.com

It could be pretty easily adapted to handle a hoverintent mouseover on the left or right (or top or bottom), and AJAX loading.

 

20 May 2010 - 12:12pm
yg15
2008

This website might be what your looking for.......

http://www.schematic.com

20 May 2010 - 1:05pm
Paul J. Sherman
2010

The Schematic design firm's site is an example of what I think you're referring to. Check http://www.schematic.com/ .

  • Paul Sherman

On May 20, 2010, at 10:36 AM, Navid wrote:

Hi

I am wondering if people can share examples of websites where the concept is a larger virtual canvas and the browser is currently showing just a portion of the canvas. For example, imagine a canvas with a 3 pages in a row horizontally. Starting on the middle page #2, if you do some interaction you can slide to the left revealing page #1 Page #2 is partially revealed on the far right of the screen. Then you can slide to the middle, now onto page #2 again, and page#1 on the left (virtually) has an outline hinting that it is mostly out of view and ditto for the page #3 off screen to the right. This is not an infinite canvas (with a growing scrollbar), but a virtual canvas (with no scrollbars). Phew, hard to explain, if anyone has examples could you let me know? I am playing with this idea and with the concept of full drag of the webpage to pan the virtual canvas, but looking for examples especially ajax ones! thanks, Navid

20 May 2010 - 1:06pm
Eric Basford
2007

What you're discussing is similar to a ZUI (zooming user interface)... I highly recommend taking a look at Prezi online presentation software for an extreme example of a ZUI.  

I am also considering the canvas metaphor for an iPad application... I think that the iPad affords this dragging/swiping action that you describe much more than a regular, mouse-based interaction.  Instead of dragging, I would imagine a web page would have arrows, or allow the user to see the edges of the other content to click on.

Best of luck and I'm certainly interested in seeing other examples!

20 May 2010 - 3:07pm
annabellyeo
2010

Exploratory + navigation:

http://archive.group94.com/redbullcreativitycontest/

 

Simply exploratory/wandering:

http://www.findoutnow.ca/

 

 

20 May 2010 - 7:27pm
nixkuroi
2010

I'm going to fight with myself for months not to steal this concept :D

21 May 2010 - 1:07am
Anonymous

We did a couple of those some time back:

http://littlelambfilms.com
http://johnnysokoandtheflyingrobots.com (Pink Elephant Section)

Vikram
http://mayastudios.in/


On Fri, May 21, 2010 at 2:41 AM, Navid <navid.sadikali@gmail.com> wrote:

Hi

I am wondering if people can share examples of websites where the concept is a larger virtual canvas and the browser is currently showing just a portion of the canvas.  For example, imagine a canvas with a 3 pages in a row horizontally.  Starting on the middle page #2, if you do some interaction you can slide to the left revealing page #1  Page #2 is partially revealed on the far right of the screen.   Then you can slide to the middle, now onto page #2 again, and page#1 on the left (virtually) has an outline hinting that it is mostly out of view and ditto for the page #3 off screen to the right.   This is not an infinite canvas (with a growing scrollbar), but a virtual canvas (with no scrollbars). Phew, hard to explain, if anyone has examples could you let me know?   I am playing with this idea and with the concept of full drag of the webpage to pan the virtual canvas, but looking for examples especially ajax ones! thanks, Navid  
(((Plea
21 May 2010 - 4:05am
Kumud
2009

Another one : http://designspasm.net/

On Fri, May 21, 2010 at 1:32 PM, <Vikram&#039> wrote:

We did a couple of those some time back:http://littlelambfilms.com [1]http://johnnysokoandtheflyingrobots.com [2] (Pink Elephant Section)
Vikramhttp://mayastudios.in/ [3]

On Fri, May 21, 2010 at 2:41 AM, Navid <navid.sadikali@gmail.com [4]> wrote:
Hi
I am wondering if people can share examples of websites where the concept is a larger virtual canvas and the browser is currently showing just a portion of the canvas.  For example, imagine a canvas with a 3 pages in a row horizontally.  Starting on the middle page #2, if you do some interaction you can slide to the left revealing page #1  Page #2 is partially revealed on the far right of the screen.   Then you can slide to the middle, now onto page #2 again, and page#1 on the left (virtually) has an outline hinting that it is mostly out of view and ditto for the page #3 off screen to the right.   This is not an infinite canvas (with a growing scrollbar), but a virtual canvas (with no scrollbars). Phew, hard to explain, if anyone has examples could you let me know?   I am playing with this idea and with the concept of full drag of the webpage to pan the virtual canvas, but looking for examples especially ajax ones! thanks, Navid  

(((Plea

(((Pleas
Syndicate content Get the feed