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 = `
+ `;
+
+ 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