Galeria de Imagens HTML CSS
<style>
:root {
--angle: 1;
--X: 90deg;
--Y: 0deg;
--Z: -100px;
--max:40
--sceneZ: 50em;
--activeY: 0deg;
--img: url("");
}
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
body {
background: #0009;
min-height: 100vh;
overflow: hidden;
transition:scroll 2s;
}
.imageWrap{
width:100%;
height:50vh;
}
img{
// transform:scale(0.5);
width:100%;
height:50vh;
}
#numb{
width:5rem;
}
h1 {
position: relative;
font-family: "Anton", sans-serif;
color: white;
text-align: center;
text-justify: center;
}
label {
color: yellow;
padding: 3px;
text-align: center;
}
.app {
position: absolute;
background: #0005;
z-index:100;
left: 0.5em;
top: 0.5em;
bottom: 0.5em;
right: 0.5em;
box-shadow: inset 0 0 25px 0 #0005;
perspective: 800px;
display: grid;
place-content: center;
transition:4s;
}
.scene {
transition:3s;
display:grid;
padding:0 2px 2px;
gap:1rem;
grid-auto-flow:column;
grid-auto-columns:30%;
transform-origin: center;
transform-style: preserve-3d;
border-top:0.5rem ridge #ccc;
border-bottom:0.5rem ridge #ccc;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior:contain;
}
.innerscene {
display:grid;
grid-template-rows:min-content;
gap:0.5rem;
padding:0.5rem;
background:#0005;
border-radius:5px;
box-shadow:1px 1px 15px 0 #000;
transition:5s;
transform-style: preserve-3d;
transform-origin: 0% 0%;
}
.innerscene > img{
inline-size:100%;
aspect-ratio:4/6;
object-fit:cover;
}
.snaps-inline{
scroll-snap-type:both mandatory
}
.snaps-inline > *{
scroll-snap-align:start;
}
.scene::-webkit-scrollbar {
width: 1em;
height:5px;
}
.scene::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.scene::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
padding:0;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
img{
width:100%;
}
.scene{
gap:0.5rem;
width:100%;
height:50vh;
grid-auto-columns:100%;
}
.innerscene{
grid-template-rows:max-content;
grid-auto-flow:row;
grid-auto-rows:100%;
}
#left{
display:none;}
#right{
display:none;
}
}
#left{
left:0;
top:50%;}
#right{
right:0;
top:50%;
}
.arrow:hover:active{
color:#5f0;
cursor: grab;
}
.arrow:hover{
color:#fff;
}
.arrow{
position:absolute;
background:transparent;
border:0;
cursor:pointer;
color:#0005;
font-size:3rem;
transform:translate(0,-50%);
}
</style>
<div class="app">
<input id="numb" type="number" min="1" max="30" placeholder="default 10" value="5">
<div id="scene" class="scene snaps-inline">
</div>
<button class="arrow" id="left" onclick=lmove()>
ᐊ</button>
<button class="arrow" id="right" onclick=rmove()>
ᐅ</button>
</div>
<script>
var counts = 0;
const scl = document.getElementById("scene"),
numb = document.getElementById("numb"),
rmove = () => {
scl.scrollLeft += 350;
},
lmove = () => {
scl.scrollLeft -= 350;
};
const images = [];
const innerScene = (count) => {
count = numb.value || count;
if (scl.children.length > count) {
scl.innerHTML = "";
}
for (let c = 0; c < count; c++) {
let dv = document.createElement("div");
dv.classList.add("imagWrap");
let img = document.createElement("img");
dv.append(img);
img.id = `img${images.length}`;
img.src = `https://picsum.photos/seed/${counts * 10 + 400}/800/600`;
if (images.length > numb.value) {
images.splice(0, 1);
}
images.push(dv);
counts++;
scl.appendChild(dv);
}
};
numb.addEventListener("change", innerScene);
innerScene();
</script>
Ugliest Unicorn
