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

Compare commits

merge into: janishutz-website:master
Branches Tags
janishutz-website:master janishutz-website:v3
...
pull from: janishutz-website:v3
Branches Tags
janishutz-website:v3 janishutz-website:master

1 Commits
master ... v3

Author SHA1 Message Date
Janis Hutz
0fb74b5498 start rewrite 2024-08-26 15:29:40 +02:00
4 changed files with 175 additions and 0 deletions
Expand all files Collapse all files

73
v3/css/scroll.css Normal file
View File

@@ -0,0 +1,73 @@
/*
* ConductorCalc - scroll.css
*
* Created by Janis Hutz 01/17/2024, Licensed under a proprietary License
* https://janishutz.com, development@janishutz.com
*
*
*/
#scroll-indicator {
position: fixed;
right: 5%;
z-index: 7;
width: 90%;
bottom: 5%;
display: none;
}
.content {
scroll-snap-type: y mandatory;
}
.snap {
scroll-snap-align: top;
}
.scroll-wrapper {
color: rgb(221, 221, 221);
font-size: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
user-select: none;
}
.scroll-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
padding: 15px;
background-color: rgba( 0, 0, 0, 0.2 );
border-radius: 30px;
}
.scroll-symbol {
font-size: 180%;
animation: scroll-animation infinite 4s ease-in-out;
}
@keyframes scroll-animation {
0% {
opacity: 0;
transform: translateY(0);
}
10% {
opacity: 1;
}
65% {
opacity: 0.8;
}
75% {
opacity: 0;
transform: translateY(25px);
}
100% {
opacity: 0;
}
}

0
v3/css/style.css Normal file
View File

20
v3/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Websites - janishutz.com</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/scroll.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<div id="scroll-indicator"></div>
<script src="https://static.janishutz.com/libs/jquery/jquery.min.js"></script>
<script src="/js/scroll.js"></script>
<script>
scrollHint( 4 );
</script>
</body>
</html>

82
v3/js/scroll.js Normal file
View File

@@ -0,0 +1,82 @@
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 );
}
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 = () => {
scrollCorrection();
showHint();
}
let 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' } );
}
}
scrollCorrection();
} );
}