adding scroll animation
This commit is contained in:
parent
d3ab129e65
commit
15515569ca
GPG Key ID:
A55BA3536A5E0ED7
@ -1,6 +1,6 @@
|
|||||||
# Js Playground
|
# Frontend Playground
|
||||||
|
|
||||||
Test bed for testing Javascript stuff.
|
Test bed for testing Javascript + CSS stuff.
|
||||||
|
|
||||||
* Typescript stuff
|
* Typescript stuff
|
||||||
* Vue
|
* Vue
|
||||||
24
scroll-animation/.gitignore
vendored
Normal file
24
scroll-animation/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# 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?
|
||||||
13
scroll-animation/index.html
Normal file
13
scroll-animation/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!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
Normal file
2893
scroll-animation/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
scroll-animation/package.json
Normal file
21
scroll-animation/package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
scroll-animation/src/App.vue
Normal file
13
scroll-animation/src/App.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<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>
|
||||||
88
scroll-animation/src/components/Article.vue
Normal file
88
scroll-animation/src/components/Article.vue
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
38
scroll-animation/src/components/ReactiveImage.vue
Normal file
38
scroll-animation/src/components/ReactiveImage.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<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>
|
||||||
38
scroll-animation/src/components/ScrollWatcher.vue
Normal file
38
scroll-animation/src/components/ScrollWatcher.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<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>
|
||||||
5
scroll-animation/src/main.ts
Normal file
5
scroll-animation/src/main.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
79
scroll-animation/src/style.css
Normal file
79
scroll-animation/src/style.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
: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 {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
/* padding: 2rem; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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
Normal file
1
scroll-animation/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
24
scroll-animation/tsconfig.app.json
Normal file
24
scroll-animation/tsconfig.app.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"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
scroll-animation/tsconfig.app.tsbuildinfo
Normal file
1
scroll-animation/tsconfig.app.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/app.vue","./src/components/article.vue","./src/components/reactiveimage.vue"],"version":"5.6.3"}
|
||||||
7
scroll-animation/tsconfig.json
Normal file
7
scroll-animation/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
22
scroll-animation/tsconfig.node.json
Normal file
22
scroll-animation/tsconfig.node.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"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
scroll-animation/tsconfig.node.tsbuildinfo
Normal file
1
scroll-animation/tsconfig.node.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"root":["./vite.config.ts"],"version":"5.6.3"}
|
||||||
8
scroll-animation/vite.config.ts
Normal file
8
scroll-animation/vite.config.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
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()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user