Skip to content
Web Components for Prezi Like Presentations
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.bowerrc
.gitignore
README.md
bower.json
demo.html
index.html
kino-pres-controls.html
kino-pres.html
kino-slide.html
kino-transition-3d-spiral.html
kino-transition-box.html
kino-transition-default.html
kino-transition-file-cabinet.html
kino-transition-left-to-right-emphasis.html
kino-transition-left-to-right.html
kino-transition-top-to-bottom-emphasis.html
kino-transition-top-to-bottom.html
kinoscribe.html
metadata.html
style.js

README.md

KinoScribe - 3D Presentations

Introduction

KinoScribe is a 3D Presentation framework built using Polymer.js (Google's Web Component's Library). Using KinoScribe you can create 3D Presentations in which you can layout your side in 3D using

  • Custom Layout - You define all 3D Coordinates, Rotations etc
  • Preset Layouts - Where you use one of the Preset Layouts like "Left to Right", "Top to Bottom", "Box", "Spiral", "Album"

Video Demo

IMAGE ALT TEXT HERE

Home Page

Visit - http://www.kinoscribe.com for live demo

Code Examples

Visit - http://www.kinoscribe.com for live demo

Browser Compatibility

  • Chrome
  • Firefox

Yet to be tested on Safari and IE 10+

Usage

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>kino-slides Demo</title>

    <script src="../platform/platform.js"></script>
    <link rel="import" href="kinoscribe.html">
    <style>
        kino-slide .slide{
            display: block;
            width: 800px;
            height: 600px;
            padding: 40px 60px;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, .3);
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
            color: rgb(102, 102, 102);
            text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
            font-family: 'Open Sans', Arial, sans-serif;
            font-size: 30px;
            line-height: 36px;
            letter-spacing: -1px;
        }
    </style>
</head>
<body unresolved>


<kino-pres>
    <kino-slide x="1000" type="transition" >
        <section class="slide">
            Slide 1
        </section>
    </kino-slide>

    <kino-slide x="2500" z="-1000">
        <section class="slide">
            Slide 2
        </section>
    </kino-slide>

    <kino-slide x="4000" z="-2000" scale="3">
        <section class="slide">
            Slide 3
        </section>
    </kino-slide>

    <kino-slide x="5500" z="-3000" rotateZ="45">
        <section class="slide">
            Slide 4
        </section>
    </kino-slide>

    <kino-slide x="7000"  rotateX="90" rotateY="90">
        <section class="slide">
            Slide 5
        </section>

    </kino-slide>
    <kino-slide x="8500" z="-1000" >
        <section class="slide">
            Slide 6
        </section>
    </kino-slide>



</body>
</html>

Authors

  • Rohit Ghatol - @rohitghatol
  • Nikhil Walvekar - @walvekarnikhil

Project Setup

If you are a Developer and want to play with the code. Here is how you setup this Project.

Running the Demo

In my case I use WebStorm, I right click on kinoscribe/demo.html and click on "Open in Brower" I see the following url opens up in chrome

References

This Project is inspired from Impress.js created by Bartek Szopka

You can’t perform that action at this time.