Remove snow-fall
This commit is contained in:
parent
a76c84b40f
commit
be2bc267ad
11 changed files with 0 additions and 160 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -8,10 +8,6 @@
|
||||||
"name": "jbuk-frontend",
|
"name": "jbuk-frontend",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"license": "CC0-1.0",
|
"license": "CC0-1.0",
|
||||||
"dependencies": {
|
|
||||||
"@11ty/is-land": "^5.0.0",
|
|
||||||
"@zachleat/snow-fall": "^1.0.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
"@stylistic/eslint-plugin": "^5.1.0",
|
"@stylistic/eslint-plugin": "^5.1.0",
|
||||||
|
|
@ -24,16 +20,6 @@
|
||||||
"stylelint-config-standard": "^40.0.0"
|
"stylelint-config-standard": "^40.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@11ty/is-land": {
|
|
||||||
"version": "5.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-5.0.1.tgz",
|
|
||||||
"integrity": "sha512-Rh/sLhE4vrc2JaSjeY385v2UxnDY9BhnQtitETb3SKyr0A48Q5Vn06q2AvDBHObtk9+dcFWsoZX4jhT+O9g+xQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/11ty"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/code-frame": {
|
"node_modules/@babel/code-frame": {
|
||||||
"version": "7.29.7",
|
"version": "7.29.7",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
|
||||||
|
|
@ -1032,12 +1018,6 @@
|
||||||
"url": "https://opencollective.com/typescript-eslint"
|
"url": "https://opencollective.com/typescript-eslint"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@zachleat/snow-fall": {
|
|
||||||
"version": "1.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@zachleat/snow-fall/-/snow-fall-1.0.3.tgz",
|
|
||||||
"integrity": "sha512-Y9srRbmO+k31vSm+eINYRV9DRoeWGV5/hlAn9o34bLpoWo+T5945v6XGBrFzQYjhyEGB4j/4zXuTW1zTxp2Reg==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.17.0",
|
"version": "8.17.0",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -27,10 +27,6 @@
|
||||||
"compress": "./scripts/compress.sh",
|
"compress": "./scripts/compress.sh",
|
||||||
"build": "npm run lint && npm run build-css && npm run build-js && npm run compress"
|
"build": "npm run lint && npm run build-css && npm run build-js && npm run compress"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
|
||||||
"@11ty/is-land": "^5.0.0",
|
|
||||||
"@zachleat/snow-fall": "^1.0.3"
|
|
||||||
},
|
|
||||||
"allowScripts": {
|
"allowScripts": {
|
||||||
"esbuild@0.27.7": true,
|
"esbuild@0.27.7": true,
|
||||||
"lightningcss-cli@1.32.0": true
|
"lightningcss-cli@1.32.0": true
|
||||||
|
|
|
||||||
2
public/assets/js/is-land.min.js
vendored
2
public/assets/js/is-land.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,125 +0,0 @@
|
||||||
class Snow extends HTMLElement {
|
|
||||||
static random(min, max) {
|
|
||||||
return min + Math.floor(Math.random() * (max - min) + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
static attrs = {
|
|
||||||
count: "count", // default: 100
|
|
||||||
mode: "mode",
|
|
||||||
text: "text", // text in snow flake (emoji, too)
|
|
||||||
}
|
|
||||||
|
|
||||||
generateCss(mode, count) {
|
|
||||||
let css = [];
|
|
||||||
css.push(`
|
|
||||||
:host([mode="element"]) {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
:host([mode="page"]) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
:host([mode="page"]),
|
|
||||||
:host([mode="element"]) > * {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
:host([mode="element"]) ::slotted(*) {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
* {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
:host([text]) * {
|
|
||||||
font-size: var(--snow-fall-size, 1em);
|
|
||||||
}
|
|
||||||
:host(:not([text])) * {
|
|
||||||
width: var(--snow-fall-size, 10px);
|
|
||||||
height: var(--snow-fall-size, 10px);
|
|
||||||
background: var(--snow-fall-color, rgba(255,255,255,.5));
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
// using vw units (max 100)
|
|
||||||
let dimensions = { width: 100, height: 100 };
|
|
||||||
let units = { x: "vw", y: "vh"};
|
|
||||||
|
|
||||||
if(mode === "element") {
|
|
||||||
dimensions = {
|
|
||||||
width: this.firstElementChild.clientWidth,
|
|
||||||
height: this.firstElementChild.clientHeight,
|
|
||||||
};
|
|
||||||
units = { x: "px", y: "px"};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Thank you @alphardex: https://codepen.io/alphardex/pen/dyPorwJ
|
|
||||||
for(let j = 1; j<= count; j++ ) {
|
|
||||||
let x = Snow.random(1, 100) * dimensions.width/100; // vw
|
|
||||||
let offset = Snow.random(-10, 10) * dimensions.width/100; // vw
|
|
||||||
|
|
||||||
let yoyo = Math.round(Snow.random(30, 100)); // % time
|
|
||||||
let yStart = yoyo * dimensions.height/100; // vh
|
|
||||||
let yEnd = dimensions.height; // vh
|
|
||||||
|
|
||||||
let scale = Snow.random(1, 10000) * .0001;
|
|
||||||
let duration = Snow.random(10, 30);
|
|
||||||
let delay = Snow.random(0, 30) * -1;
|
|
||||||
|
|
||||||
css.push(`
|
|
||||||
:nth-child(${j}) {
|
|
||||||
opacity: ${Snow.random(0, 1000) * 0.001};
|
|
||||||
transform: translate(${x}${units.x}, -10px) scale(${scale});
|
|
||||||
animation: fall-${j} ${duration}s ${delay}s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fall-${j} {
|
|
||||||
${yoyo}% {
|
|
||||||
transform: translate(${x + offset}${units.x}, ${yStart}${units.y}) scale(${scale});
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate(${x + offset / 2}${units.x}, ${yEnd}${units.y}) scale(${scale});
|
|
||||||
}
|
|
||||||
}`)
|
|
||||||
}
|
|
||||||
return css.join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
// https://caniuse.com/mdn-api_cssstylesheet_replacesync
|
|
||||||
if(this.shadowRoot || !("replaceSync" in CSSStyleSheet.prototype)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let count = parseInt(this.getAttribute(Snow.attrs.count)) || 100;
|
|
||||||
|
|
||||||
let mode;
|
|
||||||
if(this.hasAttribute(Snow.attrs.mode)) {
|
|
||||||
mode = this.getAttribute(Snow.attrs.mode);
|
|
||||||
} else {
|
|
||||||
mode = this.firstElementChild ? "element" : "page";
|
|
||||||
this.setAttribute(Snow.attrs.mode, mode);
|
|
||||||
}
|
|
||||||
|
|
||||||
let sheet = new CSSStyleSheet();
|
|
||||||
sheet.replaceSync(this.generateCss(mode, count));
|
|
||||||
|
|
||||||
let shadowroot = this.attachShadow({ mode: "open" });
|
|
||||||
shadowroot.adoptedStyleSheets = [sheet];
|
|
||||||
|
|
||||||
let d = document.createElement("div");
|
|
||||||
let text = this.getAttribute(Snow.attrs.text);
|
|
||||||
d.innerText = text || "";
|
|
||||||
for(let j = 0, k = count; j<k; j++) {
|
|
||||||
shadowroot.appendChild(d.cloneNode(true));
|
|
||||||
}
|
|
||||||
|
|
||||||
shadowroot.appendChild(document.createElement("slot"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("snow-fall", Snow);
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -101,15 +101,6 @@
|
||||||
<!--scripts go here when needed-->
|
<!--scripts go here when needed-->
|
||||||
@section('scripts')
|
@section('scripts')
|
||||||
<script type="module" src="/assets/js/app.js"></script>
|
<script type="module" src="/assets/js/app.js"></script>
|
||||||
|
|
||||||
<script type="module" src="/assets/js/is-land.min.js"></script>
|
|
||||||
<script type="module" src="/assets/js/winter.js"></script>
|
|
||||||
<is-land on:media="(prefers-reduced-motion: no-preference)">
|
|
||||||
<snow-fall
|
|
||||||
count="150"
|
|
||||||
style="--snow-fall-color: var(--clr-snow-fall)"
|
|
||||||
></snow-fall>
|
|
||||||
</is-land>
|
|
||||||
@show
|
@show
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue