From c9022e69883ab522067e3bbb0e5ae56aab6d3e5d Mon Sep 17 00:00:00 2001 From: sadorowo <97941280+sadorowo@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:02:47 +0000 Subject: [PATCH] update: new slider system --- facts_script.js | 40 +++++++++++++++++++++++++++++++--------- index.html | 15 ++++++++++----- style.css | 16 +++++++++++----- 3 files changed, 52 insertions(+), 19 deletions(-) diff --git a/facts_script.js b/facts_script.js index 2223f96..7cc8db9 100644 --- a/facts_script.js +++ b/facts_script.js @@ -1,7 +1,7 @@ -const [leftArrow, rightArrow] = ['.arrow-button[data-left]', '.arrow-button[data-right]'].map(s => document.querySelector(s)); -const fact = document.getElementById('fact'); +const $facts = document.getElementById('facts'); +const $fact = document.getElementById('fact'); -const facts = [ +const factList = [ 'Czarownice były często oskarżane o praktykowanie magii i czarów, które miały rzekomo wpływać na ludzi, zwierzęta i rośliny.', 'W XV-XVII wieku w Europie miało miejsce około 40 000-60 000 egzekucji osób oskarżonych o czary, z których większość stanowiły kobiety.', 'Jednym z najbardziej znanych procesów czarownic w historii były procesy salemzkie w 1692 roku w kolonii Massachusetts, gdzie oskarżono i skazano na śmierć 20 osób.', @@ -14,21 +14,43 @@ const facts = [ 'Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.' ] +let [touchStartX, touchEndX] = [-1, -1]; let index = 0; function previous() { - if (index - 1 < 0) index = facts.length; + if (index - 1 < 0) index = factList.length; index--; - fact.textContent = facts[index]; + $fact.textContent = factList[index]; } function next() { - if (index + 1 > facts.length - 1) index = -1; + if (index + 1 > factList.length - 1) index = -1; index++; - fact.textContent = facts[index]; + $fact.textContent = factList[index]; } -leftArrow.addEventListener('click', previous); -rightArrow.addEventListener('click', next); \ No newline at end of file +function checkDirection() { + if (touchEndX < touchStartX) previous() + if (touchEndX > touchStartX) next() +} + +document.addEventListener('touchstart', e => { + touchStartX = e.changedTouches[0].screenX +}) + +document.addEventListener('touchend', e => { + touchEndX = e.changedTouches[0].screenX + checkDirection() +}) + +$facts.addEventListener('wheel', e => { + if (e.deltaY > 0) { + index++; + next() + } else { + index--; + previous() + } +}) \ No newline at end of file diff --git a/index.html b/index.html index 47012f4..84e4a61 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -8,20 +9,24 @@ Strona o wiedźmach +

Ładowanie...

Strona o wiedźmach

-

Wiedźmy to w dawnych wierzeniach istoty półdemoniczne - istoty pośrednie między demonami a ludźmi, pozostające w ścisłym związku z ludźmi lub ich duszami. Oprócz relacji z diabłami i potworami, które dawały wiedźmą magiczne zdolności - potrafiły one rzucać uroki, zaklęcia, przepowiadać przyszłość, a nawet rozmawiać ze zmarłymi. Potocznie mówimy tak na kobiety niemiłe i/lub brzydkie. Według dawnych wierzeń ludowych wiedźma to kobieta podlegająca wpływom diabła, mająca moc rzucania uroków.

+

Wiedźmy to w dawnych wierzeniach istoty półdemoniczne - istoty pośrednie między demonami a ludźmi, + pozostające w ścisłym związku z ludźmi lub ich duszami. Oprócz relacji z diabłami i potworami, które dawały + wiedźmą magiczne zdolności - potrafiły one rzucać uroki, zaklęcia, przepowiadać przyszłość, a nawet + rozmawiać ze zmarłymi. Potocznie mówimy tak na kobiety niemiłe i/lub brzydkie. Według dawnych wierzeń + ludowych wiedźma to kobieta podlegająca wpływom diabła, mająca moc rzucania uroków.

Dzień wiedźmy obchodzimy 16 listopada.

Ciekawostki o wiedźmach

-
-
⬅
-

Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!

-
➡
+
+

Użyj kółka od myszki bądź - na urządzeniu mobilnym - przesuń w lewo/prawo, aby zobaczyć kolejną/poprzednią ciekawostkę. KURSOR MUSI BYĆ NAKIEROWANY NA CIEKAWOSTKĘ! EVENT JEST ZDEFINIOWANY TYLKO TAM.

+ \ No newline at end of file diff --git a/style.css b/style.css index c87d609..8038525 100644 --- a/style.css +++ b/style.css @@ -66,26 +66,32 @@ body { #facts-block { display: flex; + position: relative; align-items: center; flex-direction: row; justify-content: center; - max-width: 50%; + width: 35%; +} + +#fact { + margin: 0 10px 0 10px; } .arrow-button { width: 50px; margin: 10px; cursor: pointer; + position: absolute; border-radius: 100%; color: var(--second-color); } .arrow-button[data-left] { - float: left; + left: 0; } .arrow-button[data-right] { - float: right; + right: 0; } #witch { @@ -128,7 +134,7 @@ body { @media screen and (max-width: 978px) { .info-block { - max-height: 50%; + height: 50%; } #container>* { @@ -136,6 +142,6 @@ body { } #facts-block { - max-width: unset; + width: auto; } } \ No newline at end of file