Remove snow-fall
This commit is contained in:
parent
a76c84b40f
commit
be2bc267ad
SSH key fingerprint:
SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
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",
|
||||
"version": "0.0.1",
|
||||
"license": "CC0-1.0",
|
||||
"dependencies": {
|
||||
"@11ty/is-land": "^5.0.0",
|
||||
"@zachleat/snow-fall": "^1.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@stylistic/eslint-plugin": "^5.1.0",
|
||||
|
|
@ -24,16 +20,6 @@
|
|||
"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": {
|
||||
"version": "7.29.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
|
||||
|
|
@ -1032,12 +1018,6 @@
|
|||
"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": {
|
||||
"version": "8.17.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
|
||||
|
|
|
|||
|
|
@ -27,10 +27,6 @@
|
|||
"compress": "./scripts/compress.sh",
|
||||
"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": {
|
||||
"esbuild@0.27.7": 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-->
|
||||
@section('scripts')
|
||||
<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
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue