import {revealOnScroll} from './action.js'

const options =

{

show: 50,

threshold: 100,

style: 'opacity: 1; transform: translate3d(0, -10px, 0)'

}

</script>

<div id="app">

<h1 class="centered">Scroll me</h1>

<div class="box" use:revealOnScroll={options}>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>

</div>

</div>

<style>

:global(body) {

background: #000;

color: #fff;

overflow-x: hidden;

}

.centered {

margin: 0 auto;

display: table;

font-size: 60px;

margin-top: 100px;

}

.box {

border: 1px solid rgba(255, 255, 255, 0.5);

padding: 8px 20px;

line-height: 1.3em;

opacity: 0;