Skip to content

Instantly share code, notes, and snippets.

@emma-k-alexandra

emma-k-alexandra/scrollama-web-components.html

Created March 17, 2021 02:49
Show Gist options
  • Save emma-k-alexandra/729f4f0677d79819554dc9e77fd162f3 to your computer and use it in GitHub Desktop.
Save emma-k-alexandra/729f4f0677d79819554dc9e77fd162f3 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollama + Web Components
Raw
scrollama-web-components.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollama + Web Components</title>
</head>
<body>
<!-- The web component -->
<scrolly-element />
<!-- Vue + Web Component -->
<script src="https://cdn.skypack.dev/vue" type="module"></script>
<script src="https://cdn.skypack.dev/@vue/web-component-wrapper" type="module"></script>
<!-- Scrollama -->
<script src="https://unpkg.com/intersection-observer"></script>
<script src="https://unpkg.com/scrollama"></script>
<script type="module">
import Vue from "https://cdn.skypack.dev/vue"
import wrap from "https://cdn.skypack.dev/@vue/web-component-wrapper"
const template = `<div id="scrolly">
<!-- The scollama steps -->
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</div>
</div>`
const Scrolly = {
mounted() {
// set contents of shadow dom
this.$root.$options.shadowRoot.innerHTML = template
// attempt to set up scrollama
// scrollama error: no step elements
scrollama().setup({ step: '.step' })
}
}
// Inject web component onto page
const ScrollyElement = wrap(Vue, Scrolly)
window.customElements.define(
'scrolly-element',
ScrollyElement
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment