Skip to content

Commit 7b4d3b2

Browse files
smashedrsmashedr
authored
Scrolling (#10)
* Test Scrolling * Add On Scroll * Cleanup
1 parent 5a3e11b commit 7b4d3b2

File tree

5 files changed

+81
-73
lines changed

5 files changed

+81
-73
lines changed

‎src/_layouts/default.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
3535
<link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
3636

37+
{% if page.title == 'Home' %}
38+
<link rel="stylesheet" href="{{ "/css/index.css" | relative_url }}">
39+
{% endif %}
3740
{% if page.title == 'Feedback' %}
3841
<link rel="stylesheet" href="{{ "/css/feedback.css" | relative_url }}">
3942
{% endif %}

‎src/css/index.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
#scroll-down {
2+
position: fixed;
3+
bottom: 10px;
4+
5+
/*left: 50%;*/
6+
left: 0;
7+
right: 0;
8+
margin: 0 auto;
9+
width: fit-content;
10+
11+
pointer-events: none;
12+
user-select: none;
13+
}
14+
15+
[data-bs-theme='dark'] #scroll-down {
16+
text-shadow:
17+
0 0 3px #000,
18+
0 0 6px #000,
19+
0 0 9px #000,
20+
0 0 12px #000;
21+
}
22+
23+
[data-bs-theme='light'] #scroll-down {
24+
text-shadow:
25+
0 0 3px #f8f9fa,
26+
0 0 6px #f8f9fa,
27+
0 0 9px #f8f9fa,
28+
0 0 12px #f8f9fa;
29+
}
30+
31+
.bounce {
32+
animation: bounce 3s infinite;
33+
}
34+
35+
@keyframes bounce {
36+
0% {
37+
bottom: 0;
38+
}
39+
50% {
40+
bottom: 30px;
41+
}
42+
100% {
43+
bottom: 0;
44+
}
45+
}

‎src/css/main.css

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,6 @@ body {
1212
z-index: 3;
1313
}
1414

15-
/*#scroll-down {*/
16-
/* position: fixed;*/
17-
/* bottom: 10px;*/
18-
19-
/* !*left: 50%;*!*/
20-
/* left: 0;*/
21-
/* right: 0;*/
22-
/* margin: 0 auto;*/
23-
/* width: fit-content;*/
24-
25-
/* pointer-events: none;*/
26-
/* user-select: none;*/
27-
28-
/* !*text-shadow:*!*/
29-
/* !* 0 0 3px #000,*!*/
30-
/* !* 0 0 6px #000,*!*/
31-
/* !* 0 0 9px #000,*!*/
32-
/* !* 0 0 12px #000;*!*/
33-
/*}*/
34-
3515
.toast-container {
3616
max-width: 260px;
3717
width: 100%;
@@ -65,13 +45,11 @@ body {
6545
transition-duration: 0.3s;
6646
transition-property: transform;
6747
}
48+
6849
.hvr-grow:hover {
6950
transform: scale(1.1);
7051
}
52+
7153
.hvr-grow-lg:hover {
7254
transform: scale(1.2);
7355
}
74-
75-
/*.card-footer a:hover {*/
76-
/* text-decoration: underline !important;*/
77-
/*}*/

‎src/html/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,11 @@ <h4 class="card-title">
7373
<i class="fa-solid fa-terminal" title="Shell Script"></i>
7474
</div> <!-- d-none clone -->
7575

76-
{% comment %}<div class="text-center text-success" id="scroll-down">{% endcomment %}
77-
{% comment %}Scroll Down for More<br>{% endcomment %}
78-
{% comment %}<i class="fa-solid fa-angles-down fa-xl"></i>{% endcomment %}
79-
{% comment %}</div> <!-- scroll-down -->{% endcomment %}
76+
<div class="text-center bounce d-none" id="scroll-down">
77+
Scroll Down for More
78+
<br>
79+
<i class="fa-solid fa-angles-down fa-xl"></i>
80+
</div> <!-- scroll-down -->
8081

8182
{% comment %}<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>{% endcomment %}
8283
{% comment %}<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>{% endcomment %}

‎src/js/index.js

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,29 @@ const faIcons = {
1515
}
1616

1717
// // Scroll Handlers
18-
// const scrollDdown = document.getElementById('scroll-down')
19-
// const scrollOffset = 100
20-
// let scrollEnd = false
21-
// let timeoutId
22-
//
23-
// window.addEventListener('scroll', onScroll)
24-
//
25-
// function onScroll() {
26-
// console.log('SCROLL')
27-
// // If user scrolls to end, remove instantly
28-
// if (
29-
// window.innerHeight + window.scrollY + scrollOffset >=
30-
// document.documentElement.scrollHeight
31-
// ) {
32-
// if (!scrollEnd) {
33-
// scrollEnd = true
34-
// console.log('END OF DOCUMENT')
35-
// scrollDdown.classList.add('d-none')
36-
// }
37-
// }
38-
// // } else {
39-
// // scrollEnd = false
40-
// // }
41-
// // Otherwise remove after 1 second
42-
// if (!timeoutId) {
43-
// console.log('SET TIMEOUT')
44-
// timeoutId = setTimeout(() => {
45-
// console.log('1000 MS TIMEOUT')
46-
// scrollDdown.classList.add('d-none')
47-
// }, 1000)
48-
// }
49-
// }
50-
//
51-
// window.addEventListener('resize', checkScroll)
52-
//
53-
// function checkScroll() {
54-
// if (
55-
// document.documentElement.clientHeight + scrollOffset >
56-
// document.documentElement.scrollHeight
57-
// ) {
58-
// console.log('NO SCROLL BAR')
59-
// scrollDdown.classList.add('d-none')
60-
// }
61-
// }
18+
window.addEventListener('scroll', onScroll, { once: true })
19+
const scrollDdown = document.getElementById('scroll-down')
20+
21+
function onScroll() {
22+
if (!localStorage.getItem('scrollShown')) {
23+
console.debug('Scroll Event Detected, Disabling Scroll Notification.')
24+
localStorage.setItem('scrollShown', 'yes')
25+
setTimeout(() => scrollDdown.classList.add('d-none'), 500)
26+
}
27+
}
28+
29+
function checkScroll() {
30+
if (
31+
document.documentElement.clientHeight <
32+
document.documentElement.scrollHeight
33+
) {
34+
console.debug('Scrolling Detected, Showing Scroll Notification.')
35+
scrollDdown.classList.remove('d-none')
36+
} else {
37+
console.debug('No Scrolling, Disabling Scroll Notification.')
38+
localStorage.setItem('scrollShown', 'yes')
39+
}
40+
}
6241

6342
/**
6443
* DOMContentLoaded Callback
@@ -91,7 +70,9 @@ async function domContentLoaded() {
9170
addCard(data, otherContainer)
9271
}
9372

94-
// checkScroll()
73+
if (!localStorage.getItem('scrollShown')) {
74+
checkScroll()
75+
}
9576

9677
AOS.init({ disable: 'mobile' })
9778
// AOS.init()

0 commit comments

Comments
 (0)