Compare commits
1 Commits
master
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
46083add46 |
@ -1,6 +1,6 @@
|
|||||||
# Frontend Playground
|
# Js Playground
|
||||||
|
|
||||||
Test bed for testing Javascript + CSS stuff.
|
Test bed for testing Javascript stuff.
|
||||||
|
|
||||||
* Typescript stuff
|
* Typescript stuff
|
||||||
* Vue
|
* Vue
|
||||||
24
scroll-animation/.gitignore
vendored
24
scroll-animation/.gitignore
vendored
@ -1,24 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Scroll Animation</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
2893
scroll-animation/package-lock.json
generated
2893
scroll-animation/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vite-project",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vue-tsc -b && vite build",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"vue": "^3.5.10"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vitejs/plugin-vue": "^5.1.4",
|
|
||||||
"typescript": "^5.5.3",
|
|
||||||
"vite": "^5.4.8",
|
|
||||||
"vite-plugin-vue-devtools": "^7.4.6",
|
|
||||||
"vue-tsc": "^2.1.6"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import Article from './components/Article.vue'
|
|
||||||
import ScrollWatcher from './components/ScrollWatcher.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ScrollWatcher/>
|
|
||||||
<Article msg="Scroll Animation" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import ReactiveImage from './ReactiveImage.vue'
|
|
||||||
|
|
||||||
defineProps<{ msg: string }>()
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="con">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
|
|
||||||
|
|
||||||
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
|
|
||||||
|
|
||||||
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
|
|
||||||
|
|
||||||
<ReactiveImage/>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<ReactiveImage/>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
|
|
||||||
|
|
||||||
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
|
|
||||||
|
|
||||||
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
|
|
||||||
|
|
||||||
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
|
|
||||||
|
|
||||||
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<ReactiveImage/>
|
|
||||||
|
|
||||||
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
|
|
||||||
|
|
||||||
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
|
|
||||||
|
|
||||||
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
|
|
||||||
|
|
||||||
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
|
|
||||||
|
|
||||||
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
|
|
||||||
|
|
||||||
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
|
|
||||||
|
|
||||||
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.con {
|
|
||||||
padding: 2rem;
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<img src="https://placehold.co/600x400?text=Hello+World" class="swell"/>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
@supports (animation-timeline: view()) {
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
|
||||||
|
|
||||||
.swell {
|
|
||||||
animation-name: swell;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-timeline: view();
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes swell {
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1) rotate(-10deg) skewY(-10deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale(1.2) rotate(10deg) skewY(10deg);
|
|
||||||
filter: drop-shadow(0 0 2em);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="scroll-watcher"/>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
@supports (animation-timeline: view()) {
|
|
||||||
@media screen and (prefers-reduced-motion: no-preference) {
|
|
||||||
|
|
||||||
.scroll-watcher {
|
|
||||||
height: 10px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
background-color: lime;
|
|
||||||
width: 100%;
|
|
||||||
scale: 0 1;
|
|
||||||
transform-origin: left;
|
|
||||||
animation: scroll-watcher linear;
|
|
||||||
animation-timeline: scroll();
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scroll-watcher {
|
|
||||||
to {
|
|
||||||
scale: 1 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import './style.css'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
/* padding: 2rem; */
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
scroll-animation/src/vite-env.d.ts
vendored
1
scroll-animation/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/app.vue","./src/components/article.vue","./src/components/reactiveimage.vue"],"version":"5.6.3"}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{"root":["./vite.config.ts"],"version":"5.6.3"}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
|
||||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [vue(), vueDevTools()],
|
|
||||||
})
|
|
||||||
12
vue/package-lock.json
generated
12
vue/package-lock.json
generated
@ -1396,9 +1396,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/loader-utils": {
|
"node_modules/loader-utils": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
|
||||||
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
|
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"big.js": "^5.2.2",
|
"big.js": "^5.2.2",
|
||||||
@ -3190,9 +3190,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"loader-utils": {
|
"loader-utils": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
|
||||||
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
|
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"big.js": "^5.2.2",
|
"big.js": "^5.2.2",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user