Mini sandbox ... do testowania Codepen
<img src="https://source.unsplash.com/300x202">
<div class="lorem-container"></div>
img {
position: fixed;
top: 0;
left: 50vw;
transform: translateX(-50%);
opacity: 1;
transition: all 1.2s;
border-radius: 1em;
}
p {
font: 1.2em arial;
text-indent: 1em;
text-align: justify;
}
p:first-letter {
font-size: 1.5em;
text-transform: uppercase;
}
const min_range = 10;
const max_range = 30;
let is_scroll = false;
const lorem_arr = ['<mark>lorem</mark> ipsum dolor sit amet',
'consectetur adipiscing elit',
'duis eget elit in turpis vestibulum',
'aenean bibendum malesuada lacus',
'faucibus tincidunt metus',
'suspendisse consectetur pulvinar est sed consequat',
'duis sagittis nec ipsum et facilisis',
'morbi sodales sollicitudin mauris'];
const lorem_arr_length = lorem_arr.length - 1;
window.onload = () => {
const img = document.querySelector('img');
const lorem = document.querySelector('.lorem-container');
let lorem_phrase = '';
let lorem_html = '';
const range = random(min_range, max_range);
for (let i = 0; i <= range; ++i) {
let sentences = random(0, max_range);
for (let j = 0; j <= sentences; ++j) {
lorem_phrase += lorem_arr[random(0, lorem_arr_length)] + ' ';
}
lorem_html += `<p>${lorem_phrase.trim()}.</p>`;
lorem_phrase = '';
}
lorem.innerHTML = lorem_html;
setInterval(() => {
console.clear();
if (is_scroll) {
is_scroll = false;
console.log('scrolling ...');
img.setAttribute('style', 'opacity: 0.09');
} else {
img.setAttribute('style', 'opacity: 1');
}
}, 250);
}
window.onscroll = () => is_scroll = true;
let random = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; }