some component preparations
This commit is contained in:
@@ -0,0 +1 @@
|
||||
ndoe_modules
|
||||
@@ -0,0 +1,3 @@
|
||||
# Components
|
||||
|
||||
This folder contains all kinds of templates for my websites. These are all (almost) ready to go components I can simply grab, slightly adapt and use directly without having to re-implement everything from scratch. You are allowed to use these components on your own website, but you are not allowed to claim them to be your own work, if you haven't adapted them, but simply added your own images or similar to them.
|
||||
@@ -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>
|
||||
@@ -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,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();
|
||||
} );
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Slider</title>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/slider.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sliders</h1>
|
||||
<!-- Style the slider class with width, height and borders, don't touch the other classes, except for colours -->
|
||||
<div class="slider" style="width: 100vw; height: 80vh;">
|
||||
<div class="slider-container">
|
||||
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/math-summaries-desktop.jpg' );"></div>
|
||||
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/libreevent-desktop.jpg' );"></div>
|
||||
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/donate-desktop.jpg' );"></div>
|
||||
</div>
|
||||
<div class="slider-controls slider-control-left">⮜</div>
|
||||
<div class="slider-controls slider-control-right">⮞</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/slider.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+25
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "slider",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.5.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
|
||||
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.slider {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
position: absolute;
|
||||
font-size: 3rem;
|
||||
top: calc( 50% - 1.5rem );
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.slider-control-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.slider-control-right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.slider-element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./js",
|
||||
"allowJs": true,
|
||||
"target": "ES6",
|
||||
"skipLibCheck": true,
|
||||
},
|
||||
"include": [ "./ts/**/*" ],
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>janishutz.com - Solving your software needs with passion</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user