Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-16 13:48:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(templates): ability to disable animation effect in loading page (#161)

Browse Source
This commit is contained in:
Anthony Fu 2022-09-19 17:48:39 +08:00 committed by GitHub
parent 25b950a717
commit 82cd59ef05
1 changed files with 68 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/ui-templates/templates/loading/index.html
View File

@ -33,6 +33,17 @@
filter: blur(100px);
opacity: 0.5;
}
#animation-toggle {
position: fixed;
padding: 10px;
top: 0;
right: 0;
transition: opacity 0.4s ease-in;
opacity: 0;
}
#animation-toggle:hover {
opacity: 0.8;
}
@keyframes gradient {
0% {
background-position: 0 0;
@ -53,6 +64,10 @@
}
}
@media (prefers-color-scheme: dark) {
html, body {
color: white;
color-scheme: dark;
}
#nuxtImageDigit3 {
fill: #00DC82 !important;
}
@ -82,8 +97,8 @@
fill="currentColor" />
</g>
</svg>
</a>
<button id="animation-toggle">Animation Enabled</button>
<div class="spotlight-wrapper">
<div class="fixed left-0 right-0 spotlight spotlight-top z-10"></div>
</div>
@ -92,23 +107,38 @@
</div>
<div class="nuxt-loader-bar"></div>
<script>
const nuxtImg = window
.document
.getElementById('nuxtImg')
let ANIMATION_KEY = 'nuxt-loading-enable-animation'
let isLowPerformance = checkIsLowPerformance()
let enableAnimation = localStorage.getItem(ANIMATION_KEY) === 'false'
? false
: localStorage.getItem(ANIMATION_KEY) === 'true'
? true
: !isLowPerformance
const nuxtImg = window.document.getElementById('nuxtImg')
const animationToggle = window.document.getElementById('animation-toggle')
const body = window.document.body
const mouseLightContainer = window
.document
.getElementById('mouseLight')
let bodyRect
function checkIsLowPerformance() {
return window.matchMedia('(prefers-reduced-motion: reduce)').matches
|| navigator.hardwareConcurrency < 2
|| navigator.deviceMemory < 1
}
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.x + (elem.width / 2)), 2) + Math.pow(mouseY - (elem.top + (elem.height / 2)), 2)));
}
const hide = () => {
function onFocusOut() {
if (!enableAnimation) {
return
}
mouseLight.style.opacity = 0
nuxtImg.style.opacity = 0
}
const mouseMove = (e) => {
function onMouseMove(e) {
if (!enableAnimation) {
return
}
const pointerRect = nuxtImg.getBoundingClientRect()
if (!bodyRect) {
bodyRect = body.getBoundingClientRect()
@ -130,15 +160,27 @@
nuxtImg.style.opacity = Math.min(Math.max(size / 4, 0.6), 1)
}
hide()
body.addEventListener('mousemove', mouseMove)
body.addEventListener('mouseleave', hide)
window.onunload = function () {
body.removeEventListener('mousemove', mouseMove);
body.removeEventListener('mouseleave', hide);
function toggleAnimation(value = !enableAnimation) {
enableAnimation = value
if (value) {
onFocusOut()
animationToggle.innerText = 'Animation Enabled'
}
else {
mouseLight.style.opacity = 0
nuxtImg.style.opacity = 1
nuxtImg.style['mask-image'] = ''
nuxtImg.style['-webkit-mask-image'] = ''
animationToggle.innerText = 'Animation Disabled'
}
localStorage.setItem(ANIMATION_KEY, enableAnimation ? 'true' : 'false')
}
animationToggle.addEventListener('click', () => toggleAnimation(), { passive: true})
body.addEventListener('mousemove', onMouseMove, { passive: true })
body.addEventListener('mouseleave', onFocusOut, { passive: true })
toggleAnimation(enableAnimation)
if (typeof window.fetch === 'undefined') {
setTimeout(() => window.location.reload(), 1000)