This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
Build visual presentations like Prezi's
version 1.0.1
license Apache License, Version 2.0
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2016-12-12 22:38:17 UTC
evancz/elm-graphics 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/window 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/mouse 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/keyboard 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1
elm-lang/animation-frame 1.0.1 <= v < 2.0.0 1.0.1
elm-community/list-extra 4.0.0 <= v < 5.0.0 4.0.0
elm-community/easing-functions 1.0.2 <= v < 2.0.0 1.0.2

README

Dive

Dive is a framework written in Elm for programming visual presentations like Prezi's.

Demo

This presentation dives you through the fundamentals of Dive written with Dive itself!

The source code can be found here.

Installation

You need to install Elm before.

Then run:

elm package install myrho/dive

Example

Create a file named Main.elm and copy/paste the following piece of code into it:

import Html 
import Dive exposing (..)
import Dive.ElmLogo exposing (logo)

world =
  [ logo (0,0) (1,1)
  , text (0,0) "Hello Dive!"
    |> transformObject (0.001,0.001) (0,0) 
  ]

frames =
  [ frame (1,1) (0,0)
  , frame (0.01, 0.01) (0,0) 
    |> duration 2000
  ]

init size =
  ( Dive.init size
    |> Dive.world world
    |> Dive.frames frames
  , Cmd.none
  )

main =
  Html.programWithFlags
    { init = init
    , update = Dive.update
    , view = Dive.view
    , subscriptions = 
        Dive.subscriptions
    }

Build it:

elm make --output elm.js

Create a file named index.html and copy/paste the following piece of code into it:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="elm.js"></script>
  </head>
  <body style="margin:0; padding:0; overflow:hidden;">
    <script type="text/javascript">
      var size =
        { width : window.innerWidth
        , height : window.innerHeight
        };
      Elm.Main.fullscreen(size);
    </script>
  </body>
</html>

Navigate your browser (Firefox or Chrome) to the location of the index.html and dive!

License

BSD-3