Built with blockbuilder.org
forked from GitNoise's block: Bubbles gallery #1
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
* {
border-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
}
.container > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.outside {
min-width: 200px;
margin: 0 10px;
}
.outside > div {
border: 1px solid #5b5b5b;
text-align: center;
background: #7f7f7f;
padding: 3px 5px;
color: white;
font-size: 24px;
font-family: verdana;
text-transform: uppercase;
cursor: pointer;
}
.middle {
text-align: center;
width: 100%;
justify-content: center;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center;
padding: 10px;
min-height: 200px;
}
.middle > div {
margin: 2px;
border-radius: 100px;
border: 1px solid rgba(0,0,0,0.2);
overflow: hidden;
}
.bubble {
background-size: cover;
background-position: center center;
}
#index {
margin: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="outside">
<div id="previous">previous</div>
</div>
<div id="middle" class="middle">
</div>
<div class="outside" id="next">
<div>next</div>
</div>
</div>
<pre id="index"></pre>
<script>
const fullData = [
{id:1, value: "https://placekitten.com/200/300?image=1"},
{id:2, value: "https://placekitten.com/200/300?image=2"},
{id:3, value: "https://placekitten.com/200/300?image=3"},
{id:4, value: "https://placekitten.com/200/300?image=4"},
{id:5, value: "https://placekitten.com/200/300?image=5"},
{id:6, value: "https://placekitten.com/200/300?image=6"},
]
function update(data) {
const bubbles = d3.select("#middle").selectAll(".bubble")
.data(data);
const myTransition = d3.transition()
.duration(500)
.on("end", function() {
bubbles
.style("background-image", d => `url(${d.value})`)
.transition()
.duration(1000)
.style("opacity", 1);
})
console.log(bubbles);
bubbles
.transition(myTransition)
.style("opacity", 0.2)
bubbles
.enter()
.append("xhtml:div")
.append("xhtml:div")
.classed("bubble", true)
.style("background-image", d => `url(${d.value})`)
.style("height", "0px")
.style("width", "0px")
.transition(myTransition)
.style("height", (d,i) => i%2 === 0 ? "100px" : "175px")
.style("width", (d,i) => i%2 === 0 ? "100px" : "175px");
}
let index = 0;
update(fullData.slice(index, index + 3))
d3.select("#next")
.on("click", function() {
index++;
if (index >= fullData.length) {
index = 0;
}
let newData = fullData.slice(index, index + 3);
if (newData.length < 3) {
newData = newData.concat(fullData.slice(0, 3 - newData.length));
}
update(newData);
});
d3.select("#previous")
.on("click", function() {
index--;
if (index < 0) {
index = fullData.length - 1;
}
let newData = fullData.slice(index, index + 3);
if (newData.length < 3) {
newData = newData.concat(fullData.slice(0, 3 - newData.length));
}
update(newData);
});
</script>
</body>
https://d3js.org/d3.v4.min.js