Computer Graphics & Visualization @ufrj.br
Public
Edited
Dec 27, 2022
3 forks
Importers
7 stars
carousel = function (images, options = {}) {
const {
animDuration = 60,
translateY = 0,
translateZ = 300,
height = 400,
size = 200,
perspective = 900,
imgCornerRadius = 5,
imgBorderColor = "rgba(0,0,0,1)",
imgBorderSize = 5,
imgBorderOpacity = 0.1,
background = "rgba(0,0,0,0.1)"
} = options;
let css = `
#carousel_main{
display: flex;
background : ${background};
height: ${height}px;
align-items: center;
align-content: center;
justify-content: center;
}
#carousel figure {
display: flex;
position: absolute;
align-items: center;
align-content: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right:0;
margin: auto;
}
#carousel figure img {
border: ${imgBorderSize}px solid ${d3
.color(imgBorderColor)
.copy({ opacity: imgBorderOpacity })
.formatRgb()};
border-radius: ${imgCornerRadius}px;
}
.carousel_container {
position: relative;
padding:0px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
width: ${size}px;
height: ${size}px;
-webkit-perspective: ${perspective}px;
perspective: ${perspective}px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#carousel.running{
animation: spinY ${animDuration}s infinite normal linear forwards;
}
@keyframes spinY {
0% {transform:rotateY(360deg);}
100% {transform:rotateY(0deg);}
}
`;
let body = html`<div id="carousel_main" >
<div class="carousel_container">
<div id="carousel" class='running'>
</div>
</div>
</div>`;
let figures = body.querySelector("#carousel");
const n = images.length;
for (let i = 0; i < n; i++) {
css += `#carousel figure:nth-child(${i + 1}) { -webkit-transform: rotateY(${
(360 / n) * i
}deg) translateY(${translateY}px) translateZ(${translateZ}px);\n}\n`;
figures.append(html`<figure>${images[i]}</figure>`);
}
return html`<style>${css}</style>${body}`;
}
async function randomImage(sizeOrWidth = null, height = sizeOrWidth) {
const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : "";
return (
await fetch(`https://source.unsplash.com/random${size}`, {
method: "head",
cache: "no-store"
})
).url;
}
randomImage()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
