<ol id="biblioteka"></ol>
<!--
Wersja CSS (bez JS):
https://codepen.io/Rafiozoo/pen/rWmpJb
-->
#biblioteka {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-end;
min-height: 100vh;
width: 94%;
margin: 0 auto;
}
#biblioteka > * {
display: inline-block;
margin-top: 20px;
margin-right: 1px;
writing-mode: tb-rl;
text-align: center;
font: 13px sans-serif;
color: #FFF;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #311;
}
var ilosc_ksiazek = 1000;
var licznik = 0;
setInterval(function() {
var biblioteka = document.getElementById('biblioteka');
if (licznik < ilosc_ksiazek) {
var ksiazka = document.createElement('li');
ksiazka.innerHTML = ++licznik;
biblioteka.appendChild(ksiazka);
var wsp_rozmiaru = Math.floor(Math.random()*10);
ksiazka.style.height = 70+wsp_rozmiaru*2+'px';
ksiazka.style.width = 15+wsp_rozmiaru+'px';
ksiazka.style.lineHeight = Math.round(12.5+wsp_rozmiaru*.7)/10;
ksiazka.style.background = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
if (!(licznik%10)) {
window.scrollBy(0,108);
}
}
}, 50);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.