Skip to content

Instantly share code, notes, and snippets.

@andyreagan

andyreagan/index.html

Created March 23, 2021 01:23
Show Gist options
  • Save andyreagan/863ddd697d3df82eddacdcc89b570063 to your computer and use it in GitHub Desktop.
Save andyreagan/863ddd697d3df82eddacdcc89b570063 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollytelling
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=900, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
font-size: 14pt;
}
.holder {
display: flex;
}
.steps {
width: 40%;
}
.step {
margin-top: 50px;
min-height: 600px;
}
/*margin: when four values are specified,
the margins apply to the top, right, bottom, and left in that order (clockwise)*/
#chart {
width: 50%;
margin: 5px;
position: sticky;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
}
#outro {
height: 640px;
}
</style>
</head>
<body>
<h1>Hola Scroller!</h1>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet dicta consequatur sequi doloribus fugit ea reiciendis quam quae optio maiores? Quibusdam eos doloremque mollitia minima esse illo architecto exercitationem? Ex.
Culpa repudiandae incidunt animi sunt labore cum ipsam, inventore harum libero maiores voluptate sequi sint consequatur, hic quasi dolor laudantium? Molestias repellat minima libero eum minus itaque, maiores quisquam tempore.
Sapiente quae sunt quos nam obcaecati molestiae expedita tempore rem quisquam? Ducimus illo impedit culpa soluta, hic minus corporis doloribus a quaerat praesentium id consequuntur! Iusto officia qui quaerat hic!
Asperiores modi veritatis porro molestias deleniti. Sint doloremque porro, quos, suscipit similique modi excepturi consectetur accusamus ratione accusantium fugiat id expedita quia distinctio, molestiae mollitia sequi possimus. Exercitationem, recusandae ipsa!
Quas error, provident harum inventore omnis cupiditate nihil beatae vero fugit quaerat, porro nemo, explicabo dolorum itaque amet maxime vel debitis pariatur doloremque mollitia ipsa necessitatibus laboriosam. Ullam, provident quod.
</div>
<hr />
<section>
<h2>Here comes my viz</h2>
<div class="holder">
<svg id="chart"></svg>
<div class="steps">
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
<div class="step">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex veritatis earum itaque culpa magni! Eaque voluptatem sapiente iure possimus ipsam ratione mollitia, sit illum voluptate error unde culpa eveniet officia.</div>
</div>
</div>
</section>
<section>
<h2>The end</h2>
<div>
Aliquam, debitis. Sed neque alias, facilis repellat sint voluptates iusto nemo natus tempora cupiditate velit culpa ipsam tempore, qui ex quasi quaerat distinctio eveniet modi molestiae? Assumenda blanditiis sunt dignissimos.
Commodi dicta tempora rerum blanditiis asperiores delectus cupiditate libero laudantium corrupti temporibus! Quibusdam quia molestiae ab repellat culpa iure ex exercitationem quidem voluptate enim! Temporibus, ut. Nisi inventore possimus iste!
Deleniti error fuga enim. Mollitia inventore animi vel eveniet laborum autem architecto quis necessitatibus corrupti adipisci quae expedita, blanditiis iste sit quasi provident. Tempore sed incidunt odio delectus aut dolore!
Neque modi vitae porro rerum eum repudiandae architecto deserunt. Qui perferendis soluta autem expedita omnis pariatur atque recusandae cupiditate illo. Voluptatum eos provident in ipsa laboriosam, ut vel unde quae.
Velit consequuntur repudiandae nobis. Cupiditate nobis cum obcaecati iure aut. Cumque cupiditate at officia. Eaque obcaecati impedit architecto dicta pariatur. Ea dolore consectetur dignissimos ut quibusdam repudiandae rem ducimus praesentium.
Commodi unde assumenda earum rem sapiente deserunt dolore explicabo maiores at, facere enim nobis! Nisi tempora pariatur minima at, officiis magni omnis optio corporis maiores nemo totam facere? Vero, mollitia!
Odio, iure. Eaque inventore aperiam consequuntur repellendus aspernatur dolore recusandae veniam maiores aut dicta corrupti repellat quidem et repudiandae quaerat nulla optio, impedit voluptates illo? Est eos ex ab iusto?
Dicta saepe, maxime vitae eum distinctio, architecto in sint iste minima nesciunt sapiente repellendus veniam hic vero asperiores esse accusantium rem. Laborum quibusdam iusto ipsam modi, veritatis ad. Reiciendis, sapiente.
Rerum sit amet non ipsa dolores ea sapiente, quibusdam ullam, ipsum tempore nobis nisi, repudiandae vero architecto placeat quas. Quod veritatis, explicabo impedit sit corrupti eum voluptatum nemo laborum id!
Ad fugit nihil laboriosam aperiam, reprehenderit quia blanditiis inventore eligendi debitis. Rem vero labore qui quas soluta saepe, porro molestias dolore ullam exercitationem? Beatae quisquam nobis quos cum maiores quas.
</div>
</section>
<section id="outro"></section>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://unpkg.com/intersection-observer"></script>
<script src="https://unpkg.com/scrollama"></script>
<script src="./main.js"></script>
</body>
</html>
Raw
main.js
/* global d3, scrollama */
const width = 400,
height = 400;
const data = d3.range(20)
.map(() => ({ x: Math.random() * width,
y: Math.random() * height }))
const circles = d3.select("svg")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 10)
.style("fill", "steelblue")
function moveLeft() {
circles
.transition()
.duration(750)
.attr("cx", 20)
}
function moveX() {
circles
.transition()
.duration(750)
.attr("cx", (d) => Math.random() * width) // .attr("cx", (d) => d.x)
}
function moveY() {
circles
.transition()
.duration(750)
.attr("cy", (d) => Math.random() * height) // .attr("cy", (d) => d.y)
}
//window.addEventListener("scroll", function (e) {
// console.log(window.scrollY)
//})
const callbacks = [
moveLeft,
moveX,
moveY,
moveLeft,
moveX,
moveY,
moveLeft,
moveX,
moveY,
moveLeft,
moveX
]
const steps = d3.selectAll(".step")
// instantiate the scrollama
const scroller = scrollama();
// setup the instance, pass callback functions
scroller
.setup({
step: ".step",
})
.onStepEnter((response) => {
// { element, index, direction }
callbacks[response.index]()
steps.style("opacity", 0.1)
d3.select(response.element).style("opacity", 1.0)
console.log("enter", response)
})
.onStepExit((response) => {
// { element, index, direction }
console.log("exit", response)
});
// setup resize event
window.addEventListener("resize", scroller.resize);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment