05 juni 2018

Navigeren door een plaatje?

Hè, een plaatje waar je doorheen kunt navigeren?
Ja, je ziet het goed, probeer maar uit!


Wat je ziet is gewoon Google Slides, maar dan zonder navigatiebalk.
De truc zit hem in wat code die je om het iframe heen zet, waardoor je de navigatiebalk verbergt.

Hieronder de code die ik gebruikt heb:
<div style="height: 330px; overflow: hidden; width: 597px;">
<iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/e/2PACX-1vT7f0HYplrS9H9SwD-su8c78MAvvgquJJTD9y7NiYmvnSPl23w-yJi3hD_xGnXsyToAShGfnHX6SZzp/embed?start=false&amp;loop=false&amp;delayms=3000" style="left: -1px; position: relative; top: -1px;" webkitallowfullscreen="true" width="600"></iframe></div>

Het iframe wordt dus omsloten door een div die iets minder breed en een stuk minder hoog is!

Het gebruikte plaatje slaat nergens op, maar ik wilde snel iets hebben om dit te demonstreren. Dit biedt volgens mij allerlei mogelijkheden om dingen op een leuke manier aan te bieden, zoals spelletjes, ontdekkingsverhalen, puzzels, een quiz en wat al niet meer...

Het aardige is dat het ook nog redelijk werkt op een tablet of smartphone.
Voor het navigeren maak je gebruik van de mogelijkheid om te linken naar andere dia's in je presentatie.

Zou deze truc ook werken met PowerPoint Online?

En ja hoor, kijk maar!

En ook hiervoor zal ik de gebruikte code delen:
<div style="height: 342px; overflow: hidden; width: 607px;">
<iframe frameborder="0" height="367px" src="https://onedrive.live.com/embed?cid=C6C74A4F4E08862A&amp;resid=C6C74A4F4E08862A%2111562&amp;authkey=AOUiqI4m2D322dc&amp;em=2&amp;wdAr=1.7777777777777777" style="left: -1px; position: relative; top: -1px;" width="610px"></iframe></div>
Het is alleen jammer dat PowerPoint zich een beetje verraadt door bij het laden even in beeld te komen...

1 opmerking: