Add components
This commit is contained in:
32
scroll/index.html
Normal file
32
scroll/index.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Scroll</title>
|
||||
<link rel="stylesheet" href="/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" />
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="scroll-indicator"></div>
|
||||
|
||||
<div style="height: 100vh;">
|
||||
<h1>Scroll</h1>
|
||||
</div>
|
||||
<div style="height: 100vh;" class="snap">
|
||||
<h2>Hello World</h2>
|
||||
</div>
|
||||
|
||||
<script src="https://static.janishutz.com/libs/jquery/jquery.min.js"></script>
|
||||
<script src="/scroll.js"></script>
|
||||
<script>
|
||||
scrollHint( 4 );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
118
scroll/scroll.css
Normal file
118
scroll/scroll.css
Normal file
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* 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: -200px;
|
||||
}
|
||||
|
||||
#scroll-indicator.show-scroll {
|
||||
animation: pop-in 0.5s;
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
#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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
97
scroll/scroll.js
Normal file
97
scroll/scroll.js
Normal file
@@ -0,0 +1,97 @@
|
||||
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' } );
|
||||
}
|
||||
el.classList.remove( 'show-scroll' );
|
||||
el.classList.add( 'hide-scroll' );
|
||||
try {
|
||||
clearTimeout( scrollCorrectionTimeout );
|
||||
} catch ( _err ) {};
|
||||
isShowing = false;
|
||||
timeout = setTimeout( () => { showHint() }, 2500 );
|
||||
}
|
||||
|
||||
let lastScrollTimeStamp = new Date().getTime();
|
||||
let scrollInterval = 0;
|
||||
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' );
|
||||
}
|
||||
|
||||
if ( scrollInterval === 0 ) {
|
||||
scrollInterval = setInterval( () => {
|
||||
if ( lastScrollTimeStamp < new Date().getTime() + 500 ) {
|
||||
scrollCorrectionTimeout = setTimeout( () => {
|
||||
scrollCorrection();
|
||||
}, 1000 );
|
||||
timeout = setTimeout( () => {
|
||||
showHint();
|
||||
}, 2500 );
|
||||
try {
|
||||
clearInterval( scrollInterval );
|
||||
scrollInterval = 0;
|
||||
} catch ( e ) { /* empty */ }
|
||||
}
|
||||
}, 250 );
|
||||
}
|
||||
|
||||
lastScrollTimeStamp = new Date().getTime();
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
Reference in New Issue
Block a user