Skip to content

Instantly share code, notes, and snippets.

@AttilaVM

AttilaVM/Main.elm

Created January 17, 2018 18:07
Show Gist options
  • Save AttilaVM/d9a071aa576c0831f03a569d450bd04d to your computer and use it in GitHub Desktop.
Save AttilaVM/d9a071aa576c0831f03a569d450bd04d to your computer and use it in GitHub Desktop.
Download ZIP
Basic scrolling with Elm
Raw
index.html
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body id="scroll-target">
<script>
var app = Elm.Main.fullscreen()
// you can use ports and stuff here
</script>
</body>
</html>
Raw
Main.elm
-- https://ellie-app.com/kbX7gy6LSa1/4
module Main exposing (main)
import Dom.Scroll as S
import Html exposing (Html, div, text)
import Html.Attributes exposing (style)
import Html.Events exposing (..)
import Task
import Json.Decode as Json
main =
Html.program
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
type alias Model =
{ scrollY : Float }
type Msg
= Scroll Float
| ScrollError
init =
( Model 0
, Cmd.none
)
update msg model =
case msg of
Scroll scrollY->
( { model | scrollY = scrollY }
, Task.attempt (\_ -> ScrollError)
(S.toY "scroll-target" <| scrollY)
)
ScrollError ->
( model, Cmd.none )
subscriptions model =
Sub.none
view : Model -> Html Msg
view model =
let
box =
\color scrollY ->
div
[ style
[ ( "width", "100%" )
, ( "height", "400px" )
, ( "background-color", color )
, ( "text-align", "center")
, ( "padding-top", "200px")
, ( "font-size", "30px")
]
, onClick <| Scroll scrollY
]
[(text "click me!")]
in
div []
[ box "cyan" 600
, box "orange" 1200
, box "red" 0
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment