IIIF demo image

[daliborjanak]

Demo with mona lisa on demo.klokanstorage.com

[klokan]

Paralax and zooming is still rought and slightly strange... please fix it.

[klokan]

My original idea was similar to slow fly + pen automatically - while speeding it on scrolling:
https://www.mapbox.com/mapbox-gl-js/example/flyto-options/

You can try just a simple panning - slow a la:
https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/
can be easily done with code from:
http://openlayers.org/en/v3.11.2/examples/animation.html?q=animation

[daliborjanak]

My first implementation was using ol3 animation. But there were a problem with tiles loading. Tiles started loaded after animation has finished. This revision https://github.com/klokantech/www.iiifhosting.com/tree/1a11ebc182473319c9f668fad7857f1460a741d4

[klokan]

Paralax should move also the text + button - as in the sample the text "Fancy taking pictures":
http://sandropaganotti.com/2010/09/09/a-mouse-driven-css3-rotate3d-parallax-gallery-for-safari/

The image to be used on the frontpage:
http://www.nga.gov/content/ngaweb/Collection/art-object-page.52187.html

Zooming jumps. If you are not able to make the zooming smooth, then disable it.

[klokan]

Demo available online at: http://demo.iiifhosting.com/iiif/demo/info.json
and on the Google Drive and in FTP.

Please ask @o1da to add higher quality demo.jp2 from drive to the online hosting.
I am also not very comfortable to having the frontpage image under the demo account (which can be easily edited) so we may update the location of the image at later point (ticket for that?)

[klokan]

The best would be probably keep the image steady and just move with the shadow behind the text and button. A light version of http://codepen.io/briangonzalez/pen/Btmpe...

[daliborjanak]

@klokan still not best but it is better than parallax of image. http://www.iiifhosting.com/

[klokan]

For record - a nice movement here: http://postfity.com/

[klokan]

https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index3.html
https://tympanus.net/Tutorials/FullscreenSlitSlider/index.html
https://www.htmllion.com/pure-css-based-fullscreen-slider.html
https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html

[klokan]

Don't know where we have the list of possible sample images - but we could have different, it it pushes the quality of the website further:
https://www.rijksmuseum.nl/nl/collectie/RP-T-1918-358
or the one which was in https://github.com/klokantech/embedr

[o1da]

Is it this one? http://omeka.klokantech.com/items/show/7

[klokan]

Yes. Thanks @o1da.

A website similar to iiifhosting.com - which has something in it:
http://opendataday.org/

Maybe we can inspire for our redesign? @daliborjanak
Let's look before weekend on what is done by designer - and push it futher until Tuesday next week - so Tomas has a bit of time over weekend to make one more version...

[daliborjanak]

Nice page. Lot of colours. Thomas is working on pages every day this week. Now he send me Webhook page preview. It is in dropbox

[klokan]

https://www.google.com/culturalinstitute/beta/partner/rijksmuseum
https://www.google.com/culturalinstitute/beta/asset/the-milkmaid/9AHrwZ3Av6Zhjg

https://www.nga.gov/content/ngaweb/Collection/art-object-page.52187.html

[klokan]

Additional beautiful images (and set of fitting Google fonts) which can be highlighted on the frontpage in future:
https://www.reliablepsd.com/ultimate-google-font-pairings/

[klokan]

Another way of lovely moving the main image slightly:
http://worldfrom.space/en/home/