Interactive WWI panorama

Share your Work
1

Hi to all,
Just to show you the animated panoramic view of a WWI american camp in France I made with Hype for a lecture.
This is quite simple trick using drag timeline function.
Click/drag horizontal on the photo or click/drag vertical on the map to navigate through the panoramic view. Needle shows view axis direction.
http://lgontier.free.fr/PanoChateau/PanoChateau.html

10 Likes
2

nice work! I like the map style

1 Like
3

Thanks !
Map is taken from the original camp plan drawn in 1918 :wink:

4

Really nice done! Effect is great.

You also put in a full screen option that works in all browsers I tested. What code did you use for this?

Olav

5

@Olav
Hey ! Thanks.
As for the full screen option, it’s all explained here :wink: Solved ! - Scale document to window size and fullscreen

6

Thanks! I’ll check that thread out.

Olav

7

Do you still have your source fill for the PanoChateau? and if so would you mind sharing it?

8

This is a pretty awesome way to show a panorama’s viewpoint – not sure how I missed it! Great work @kerguelen

2 Likes
9

He also has it where you can drag the pointer.

10

Hey Layne,
Of course, you can have it. Here is the source.
Its just alla bout two synchronized timelines animated when an horizontal scroll is performed on left frame and vertical on right frame.
Look also at the top down corner of the left frame, there a little button for full screen (this animation was made for public screening so the button had to be discreet).
Link to download is here : https://www.dropbox.com/s/3lb8rf0rwrm5mdm/PanoChateau.hype.zip?dl=0

11

Hello Daniel,
I’m glad you like it :slight_smile:

12

Thank you kerguelen. I do like the functionality of the full screen toggle in the bottom corner.

1 Like
13

Yes, this is something I’m using quite often :wink:

14

I would love too see the source type file but the dropbox link is no longer active. can you repost perhaps? thank you!!!

15

Here you are :wink:
The principle is simple :

  • a timeline where a panoramic image is animated left to right
  • two slides action on the image named Viewfinder to catch mouse click and drag action, horizontal and vertical that drive the timeline.
3 Likes
16

Thank you!!! Especially for the quick response:)

1 Like
17

You’re most welcome :slight_smile:

1 Like