sadorowo/witch-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: new slider system

Browse Source
This commit is contained in:
sadorowo 2023-11-30 14:02:47 +00:00
parent 6e6a704bcd
commit c9022e6988
3 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
facts_script.js
View File

@ -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);
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()
}
})

15
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,20 +9,24 @@
<script defer src="facts_script.js"></script>
<title>Strona o wiedźmach</title>
</head>
<body>
<div id="loading-container">
<h1>Ładowanie...</h1>
</div>
<div id="container">
<h1>Strona o wiedźmach</h1>
<p>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.</p>
<p>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.</p>
<h3>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h3>
<h1>Ciekawostki o wiedźmach</h1>
<div id="facts-block">
<div class="arrow-button" data-left>⬅</div>
<p id="fact">Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!</p>
<div class="arrow-button" data-right>➡</div>
<div id="facts">
<p id="fact">Użyj kółka od myszki bądź - na urządzeniu mobilnym - przesuń w lewo/prawo, aby zobaczyć kolejną/poprzednią ciekawostkę. <b>KURSOR MUSI BYĆ NAKIEROWANY NA CIEKAWOSTKĘ! EVENT JEST ZDEFINIOWANY TYLKO TAM.</b></p>
</div>
</div>
</body>
</html>

16
style.css
View File

@ -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;
}
}