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 $facts = document.getElementById('facts');
const fact = document.getElementById('fact'); 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.', '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.', '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.', '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.' 'Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.'
] ]
let [touchStartX, touchEndX] = [-1, -1];
let index = 0; let index = 0;
function previous() { function previous() {
if (index - 1 < 0) index = facts.length; if (index - 1 < 0) index = factList.length;
index--; index--;
fact.textContent = facts[index]; $fact.textContent = factList[index];
} }
function next() { function next() {
if (index + 1 > facts.length - 1) index = -1; if (index + 1 > factList.length - 1) index = -1;
index++; index++;
fact.textContent = facts[index]; $fact.textContent = factList[index];
} }
leftArrow.addEventListener('click', previous); function checkDirection() {
rightArrow.addEventListener('click', next); 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> <!DOCTYPE html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,20 +9,24 @@
<script defer src="facts_script.js"></script> <script defer src="facts_script.js"></script>
<title>Strona o wiedźmach</title> <title>Strona o wiedźmach</title>
</head> </head>
<body> <body>
<div id="loading-container"> <div id="loading-container">
<h1>Ładowanie...</h1> <h1>Ładowanie...</h1>
</div> </div>
<div id="container"> <div id="container">
<h1>Strona o wiedźmach</h1> <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> <h3>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h3>
<h1>Ciekawostki o wiedźmach</h1> <h1>Ciekawostki o wiedźmach</h1>
<div id="facts-block"> <div id="facts">
<div class="arrow-button" data-left>⬅</div> <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>
<p id="fact">Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!</p>
<div class="arrow-button" data-right>➡</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

16
style.css
View File

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