forked from Gitlink/forgeplus-react
234 lines
5.7 KiB
HTML
234 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
|
|
<!--[if gt IE 8]><!-->
|
||
|
|
<html class="no-js">
|
||
|
|
<!--<![endif]-->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<title>Scrollama demo</title>
|
||
|
|
<meta name="description" content="" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
min-height: 101vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#scroll {
|
||
|
|
background-color: #cdcdcd;
|
||
|
|
position: relative;
|
||
|
|
margin-top: 105vh;
|
||
|
|
margin-bottom: 200vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
#scroll2 {
|
||
|
|
background-color: #cdcdcd;
|
||
|
|
position: relative;
|
||
|
|
margin-top: 50vh;
|
||
|
|
margin-bottom: 200vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll__graphic {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: auto;
|
||
|
|
background-color: #ccc;
|
||
|
|
-moz-transition: background-color 250ms ease-in-out;
|
||
|
|
-webkit-transition: background-color 250ms ease-in-out;
|
||
|
|
transition: background-color 250ms ease-in-out;
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
-moz-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll__graphic.is-fixed {
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll__graphic.is-bottom {
|
||
|
|
bottom: 0;
|
||
|
|
top: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll__text {
|
||
|
|
padding: 1rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step {
|
||
|
|
max-width: 30rem;
|
||
|
|
margin: 3rem auto;
|
||
|
|
border: 2px solid #333;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step.is-active {
|
||
|
|
background-color: lightgoldenrodyellow;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step p {
|
||
|
|
text-align: center;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<section id="scroll">
|
||
|
|
<div class="scroll__text">
|
||
|
|
<div class="step" data-step="#ccc">
|
||
|
|
<p>Step 1</p>
|
||
|
|
</div>
|
||
|
|
<!-- <div class='step' data-step='#aaa'>
|
||
|
|
<p>Step 2</p>
|
||
|
|
</div> -->
|
||
|
|
<!-- <div class='step' data-step='#888'>
|
||
|
|
<p>Step 3</p>
|
||
|
|
</div>
|
||
|
|
<div class='step' data-step='#666'>
|
||
|
|
<p>Step 4</p>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="scroll2">
|
||
|
|
<div class="scroll__text">
|
||
|
|
<div class="step" data-step="#ccc">
|
||
|
|
<p>Step 1</p>
|
||
|
|
</div>
|
||
|
|
<!-- <div class='step' data-step='#aaa'>
|
||
|
|
<p>Step 2</p>
|
||
|
|
</div> -->
|
||
|
|
<!-- <div class='step' data-step='#888'>
|
||
|
|
<p>Step 3</p>
|
||
|
|
</div>
|
||
|
|
<div class='step' data-step='#666'>
|
||
|
|
<p>Step 4</p>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="debug"></div>
|
||
|
|
<script src="d3.v4.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/intersection-observer"></script>
|
||
|
|
<script src="scrollama.js"></script>
|
||
|
|
<script>
|
||
|
|
var container = d3.select("#scroll");
|
||
|
|
var text = container.select(".scroll__text");
|
||
|
|
var step = text.selectAll(".step");
|
||
|
|
|
||
|
|
var container2 = d3.select("#scroll2");
|
||
|
|
var text2 = container2.select(".scroll__text");
|
||
|
|
var step2 = text2.selectAll(".step");
|
||
|
|
|
||
|
|
var scroller = scrollama();
|
||
|
|
var scroller2 = scrollama();
|
||
|
|
|
||
|
|
function handleResize() {
|
||
|
|
// var h = Math.floor(window.innerHeight * 0.75) + 'px'
|
||
|
|
step.each(function() {
|
||
|
|
var ran = 0.1 + Math.random();
|
||
|
|
var h = Math.floor(window.innerHeight * ran) + "px";
|
||
|
|
d3.select(this).style("height", h);
|
||
|
|
});
|
||
|
|
|
||
|
|
scroller.resize();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleStepEnter(resp) {
|
||
|
|
console.log("enter", resp);
|
||
|
|
step.classed("is-active", function(d, i) {
|
||
|
|
return i === resp.index;
|
||
|
|
});
|
||
|
|
var val = d3.select(resp.element).attr("data-step");
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleStepExit(resp) {
|
||
|
|
console.log("exit", resp);
|
||
|
|
d3.select(resp.element).classed("is-active", false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleProgress(resp) {
|
||
|
|
console.log("progress", resp);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleResize2() {
|
||
|
|
// var h = Math.floor(window.innerHeight * 0.75) + 'px'
|
||
|
|
step2.each(function() {
|
||
|
|
var ran = 0.1 + Math.random();
|
||
|
|
var h = Math.floor(window.innerHeight * ran) + "px";
|
||
|
|
d3.select(this).style("height", h);
|
||
|
|
});
|
||
|
|
|
||
|
|
scroller2.resize();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleStepEnter2(resp) {
|
||
|
|
console.log("enter", resp);
|
||
|
|
step2.classed("is-active", function(d, i) {
|
||
|
|
return i === resp.index;
|
||
|
|
});
|
||
|
|
var val = d3.select(resp.element).attr("data-step");
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleStepExit2(resp) {
|
||
|
|
console.log("exit", resp);
|
||
|
|
d3.select(resp.element).classed("is-active", false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleProgress2(resp) {
|
||
|
|
console.log("progress", resp);
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
handleResize();
|
||
|
|
handleResize2();
|
||
|
|
|
||
|
|
scroller
|
||
|
|
.setup({
|
||
|
|
step: "#scroll .step",
|
||
|
|
offset: 0.33,
|
||
|
|
debug: true,
|
||
|
|
progress: true
|
||
|
|
})
|
||
|
|
.onStepEnter(handleStepEnter)
|
||
|
|
.onStepExit(handleStepExit)
|
||
|
|
.onStepProgress(handleProgress);
|
||
|
|
|
||
|
|
scroller2
|
||
|
|
.setup({
|
||
|
|
step: "#scroll2 .step",
|
||
|
|
offset: 0.67,
|
||
|
|
debug: true,
|
||
|
|
progress: true
|
||
|
|
})
|
||
|
|
.onStepEnter(handleStepEnter2)
|
||
|
|
.onStepExit(handleStepExit2)
|
||
|
|
.onStepProgress(handleProgress2);
|
||
|
|
|
||
|
|
console.log(scroller.getOffset());
|
||
|
|
console.log(scroller2.getOffset());
|
||
|
|
// window.addEventListener('resize', handleResize)
|
||
|
|
}
|
||
|
|
|
||
|
|
init();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|