janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

design, libreevent page partially done

Browse Source
This commit is contained in:
Janis Hutz
2024-09-03 08:48:31 +02:00
parent 242ec159a2
commit 28276a984f
5 changed files with 158 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/scroll/scroll.css
View File

@@ -12,8 +12,53 @@
right: 5%;
z-index: 7;
width: 90%;
bottom: -200px;
}
#scroll-indicator.show-scroll {
animation: pop-in 0.5s;
bottom: 5%;
display: none;
}
#scroll-indicator.hide-scroll {
animation: pop-out 0.5s;
bottom: -200px;
}
@keyframes pop-in {
0% {
bottom: -200px;
}
70% {
bottom: 6.5%;
}
80% {
bottom: 6%;
}
100% {
bottom: 5%;
}
}
@keyframes pop-out {
0% {
bottom: 5%;
}
25% {
bottom: 6.5%
}
35% {
bottom: 6%;
}
100% {
bottom: -200px;
}
}
.content {

146
components/scroll/scroll.js
View File

@@ -1,82 +1,84 @@
window.scrollHint = ( maxScroll ) => {
$( () => {
let isShowing = false;
const el = document.getElementById( 'scroll-indicator' );
if ( !el ) {
throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
}
el.innerHTML = `
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div>
</div>`;
el.onclick = () => {
if ( window.scrollY === 0 ) {
window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
} else if ( window.scrollY % window.innerHeight === 0 ) {
window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
} else {
window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
}
$( '#scroll-indicator' ).fadeOut( 300 );
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
isShowing = false;
timeout = setTimeout( () => { showHint() }, 2500 );
let isShowing = false;
const el = document.getElementById( 'scroll-indicator' );
if ( !el ) {
throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
}
el.innerHTML = `
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div>
</div>`;
el.onclick = () => {
if ( window.scrollY === 0 ) {
window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
} else if ( window.scrollY % window.innerHeight === 0 ) {
window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
} else {
window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
}
el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
isShowing = false;
timeout = setTimeout( () => { showHint() }, 2500 );
}
document.onscrollend = () => {
scrollCorrectionTimeout = setTimeout( () => {
scrollCorrection();
}, 1000 );
timeout = setTimeout( () => {
showHint();
}, 2500 );
}
document.onscroll = () => {
try {
clearTimeout( timeout );
} catch ( _e ) {}
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
if ( isShowing ) {
isShowing = false;
$( '#scroll-indicator' ).fadeOut( 300 );
}
};
window.onresize = () => {
document.onscrollend = () => {
scrollCorrectionTimeout = setTimeout( () => {
scrollCorrection();
showHint();
}
let timeout = setTimeout( () => {
}, 1000 );
timeout = setTimeout( () => {
showHint();
}, 2500 );
let scrollCorrectionTimeout = 0;
const showHint = () => {
if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
$( '#scroll-indicator' ).fadeIn( 300 );
isShowing = true;
} else {
$( '#scroll-indicator' ).fadeOut( 300 );
isShowing = false;
}
}
const scrollCorrection = () => {
if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
}
}
document.onscroll = () => {
try {
clearTimeout( timeout );
} catch ( _e ) {}
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
if ( isShowing ) {
isShowing = false;
el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
}
};
window.onresize = () => {
scrollCorrection();
} );
showHint();
}
let timeout = setTimeout( () => {
showHint();
}, 2500 );
let scrollCorrectionTimeout = 0;
const showHint = () => {
if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
el.classList.remove( 'hide-scroll' );
el.classList.add( 'show-scroll' );
isShowing = true;
} else {
el.classList.remove( 'show-scroll' );
el.classList.add( 'hide-scroll' );
isShowing = false;
}
}
const scrollCorrection = () => {
if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
}
}
scrollCorrection();
}