woem.men/forkey
4
2
Fork 3
Code Issues 34 Pull requests 16 Projects Releases Packages Wiki Activity Actions

only run parallax effect when scrolling user profile

Browse source 
running animation handler every frame is slow
This commit is contained in:
sugar 2025-02-02 16:35:43 +01:00
parent f4bda8582f
commit 8165088886
1 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/frontend/src/pages/user/home.vue
View file

@ -225,7 +225,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
import MkOmit from '@/components/MkOmit.vue'; import MkOmit from '@/components/MkOmit.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { getScrollPosition } from '@/scripts/scroll.js'; import { getScrollContainer } from '@/scripts/scroll.js';
import { getUserMenu } from '@/scripts/get-user-menu.js'; import { getUserMenu } from '@/scripts/get-user-menu.js';
import number from '@/filters/number.js'; import number from '@/filters/number.js';
import { userPage } from '@/filters/user.js'; import { userPage } from '@/filters/user.js';
@ -282,6 +282,7 @@ const isEditingMemo = ref(false);
const moderationNote = ref(props.user.moderationNote); const moderationNote = ref(props.user.moderationNote);
const editModerationNote = ref(false); const editModerationNote = ref(false);
const movedFromLog = ref<null | {movedFromId:string;}[]>(null); const movedFromLog = ref<null | {movedFromId:string;}[]>(null);
let scrollEl: null | HTMLElement = null;
watch(moderationNote, async () => { watch(moderationNote, async () => {
await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value }); await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
@ -313,15 +314,19 @@ async function fetchMovedFromLog() {
} }
function parallaxLoop() { function parallaxLoop() {
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop); requestNextParallaxFrame();
parallax(); parallax();
} }
function requestNextParallaxFrame() {
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
}
function parallax() { function parallax() {
const banner = bannerEl.value as any; const banner = bannerEl.value as any;
if (banner == null) return; if (banner == null) return;
const top = getScrollPosition(rootEl.value); const top = scrollEl?.scrollTop ?? scrollY;
if (top < 0) return; if (top < 0) return;
@ -330,6 +335,23 @@ function parallax() {
banner.style.backgroundPosition = `center calc(50% - ${pos}px)`; banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
} }
function startParallax() {
(scrollEl ?? window).removeEventListener('scroll', startParallax);
requestNextParallaxFrame();
}
function addScrollEvent() {
(scrollEl ?? window).addEventListener('scroll', startParallax);
}
function cancelParallax() {
if (parallaxAnimationId.value) {
window.cancelAnimationFrame(parallaxAnimationId.value);
parallaxAnimationId.value = null;
addScrollEvent();
}
}
function showMemoTextarea() { function showMemoTextarea() {
isEditingMemo.value = true; isEditingMemo.value = true;
nextTick(() => { nextTick(() => {
@ -394,7 +416,10 @@ watch([props.user], () => {
}); });
onMounted(() => { onMounted(() => {
window.requestAnimationFrame(parallaxLoop); scrollEl = getScrollContainer(rootEl.value);
addScrollEvent();
(scrollEl ?? window).addEventListener('scrollend', cancelParallax);
parallax();
narrow.value = rootEl.value!.clientWidth < 1000; narrow.value = rootEl.value!.clientWidth < 1000;
if (props.user.birthday) { if (props.user.birthday) {
@ -417,11 +442,7 @@ onMounted(() => {
}); });
}); });
onUnmounted(() => { onUnmounted(cancelParallax);
if (parallaxAnimationId.value) {
window.cancelAnimationFrame(parallaxAnimationId.value);
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>