From 0fb74b5498e1bfe8b7aa5f7c8af5358eadf3d88d Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Mon, 26 Aug 2024 15:29:40 +0200 Subject: [PATCH] start rewrite --- v3/css/scroll.css | 73 +++++++++++++++++++++++++++++++++++++++++ v3/css/style.css | 0 v3/index.html | 20 ++++++++++++ v3/js/scroll.js | 82 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 175 insertions(+) create mode 100644 v3/css/scroll.css create mode 100644 v3/css/style.css create mode 100644 v3/index.html create mode 100644 v3/js/scroll.js diff --git a/v3/css/scroll.css b/v3/css/scroll.css new file mode 100644 index 0000000..b6f99a6 --- /dev/null +++ b/v3/css/scroll.css @@ -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; + } +} \ No newline at end of file diff --git a/v3/css/style.css b/v3/css/style.css new file mode 100644 index 0000000..e69de29 diff --git a/v3/index.html b/v3/index.html new file mode 100644 index 0000000..28ea95d --- /dev/null +++ b/v3/index.html @@ -0,0 +1,20 @@ + + + + + + Custom Websites - janishutz.com + + + + + +
+ + + + + + \ No newline at end of file diff --git a/v3/js/scroll.js b/v3/js/scroll.js new file mode 100644 index 0000000..c391a2b --- /dev/null +++ b/v3/js/scroll.js @@ -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 = ` +
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
`; + + 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(); + } ); +} \ No newline at end of file