Skip to content

Latest commit

 

History

History
58 lines (43 loc) · 1.92 KB

README.md

File metadata and controls

58 lines (43 loc) · 1.92 KB
Raw

Kickstarter Year in Review 2013

A handy all-in-one fullscreen slideshow, extracted from Kickstarter's 2013 year in review.

See it in action.

Features

  • Mobile friendly.
  • URL's allow deep linking to individual slides.
  • Background videos in slides are lazy and predictively loaded. On mobile they're not loaded at all, to conserve bandwidth.
  • Page background color can be controlled via a slide attribute, allowing subtle rainbow effects as you progress through the slideshow.
  • Slides can open full screen modal dialogs which can embed arbitrary pages via iframe.

Howto

Background color

If a slide has a data attribute called color then that attribute will be added to the body element when the slide is loaded. A CSS class with the same name as the slide id will also be added.

For example, this slide will have green30 dollars-pledged set as the CSS class on body:

<div id="dollars-pledged"
    class="slide white"
    data-color="green30">
    ...
</div>

Modal dialogs

A div with the class js-modal and a data src attribute can be turned into a full screen modal dialog. A button or link with the js-show-modal will show the modal dialog for the slide. An element with the class js-embed-wrap will have an iframe appended to it, with the frame source set to the src data attribute. An element with the class js-hide-modal inside the modal will close it when clicked.

For example:

<div class="slide-footer">
    <a class="js-show-modal">Play trailer</a>
</div>
<div id="veronica-mars-modal"
    data-src="//www.youtube.com/embed/wq1R93UMqlk?autoplay=1">
    <a class="js-hide-modal">X</a>
    <div class="js-embed-wrap">
        <!-- iframe inserted here -->
    </div>
</div>

License

MIT