feats

src/App.vue

@@ -24,7 +24,7 @@ onMounted(() => {
 <template>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
-  <Image v-for="(res, inx) in resources" :key="res.image" :resource="res" :show-fog="inx === 0"></Image>
+  <Image v-for="(res, inx) in resources" :key="res.image" :resource="res"></Image>
 </template>
 
 <style scoped>

src/components/Fog.vue

@@ -47,7 +47,7 @@
       opacity: 0;
     }
     50% {
-      opacity: 0.8;
+      opacity: 1;
     }
     100%{
       transform: translate(60%, -40%);

src/components/Loader.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="loader-wrapper" :class="{ loaded: !loading }">
+  <div 
+    class="loader-wrapper"
+    :class="{ loaded: !loading }"
+    :style="visibleStyle"
+    @touchmove.prevent
+    @mousewheel.prevent
+  >
     <div class="loader">
       <p class="tip">{{tip}}</p>
       <p class="percent">{{percent}}%</p>
@@ -7,13 +13,15 @@
         <div :style="progressStyle"></div>
       </p>
     </div>
-    <div class="loader-section section-top"></div>
-    <div class="loader-section section-bottom"></div>    
+    <!-- <div class="loader-section section-top"></div>
+    <div class="loader-section section-bottom"></div>     -->
+    <MaskVue ref="maskRef" @end="onEnd"/>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
+import MaskVue from "./Mask.vue";
 
 const props = defineProps({
   tip: {
@@ -27,7 +35,24 @@ const props = defineProps({
   loading: Boolean
 })
 
-const progressStyle = computed(() => ({ width: `${props.percent}%` }))
+const elRef = ref();
+const maskRef = ref();
+const progressStyle = computed(() => ({ width: `${props.percent}%` }));
+const visibleStyle = ref({  })
+const onEnd = () => {
+  visibleStyle.value = { visibility: 'hidden' }
+}
+
+const onTouchMove = (e) => {
+  // 禁止滚动
+  e.preventDefault();
+}
+
+watch(() => props.loading, (newVal, oldVal) => {
+  if (oldVal && !newVal) {
+    maskRef.value.start();
+  }
+})
 
 </script>
 
@@ -44,8 +69,9 @@ const progressStyle = computed(() => ({ width: `${props.percent}%` }))
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 10;
+  z-index: 100;
   overflow: hidden;
+  background: @bg-color;
 
   .loader {
     display: block;
@@ -90,9 +116,9 @@ const progressStyle = computed(() => ({ width: `${props.percent}%` }))
   }
 
   &.loaded {
-    visibility: hidden;
-    transform: translateX(-100%);
-    transition: all 0.3s 1s ease-out;
+    // visibility: hidden;
+    // transform: translateX(-100%);
+    // transition: all 0.3s 1s ease-out;
 
     .loader {
       opacity: 0;

src/components/Mask.vue

@@ -0,0 +1,87 @@
+<template>
+  <canvas ref="cvsRef"></canvas>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import indexImage from '@/assets/images/1.jpg';
+  import maskImage from '@/assets/cloud-texture.png';
+
+  // const props = defineProps({
+  //   img: {
+  //     type: Object,
+  //     default: null,
+  //   }
+  // })
+
+  const emit = defineEmits(['end']);
+
+  const cvsRef = ref();
+  const ctxRef = ref();
+  const img = new Image();
+  img.src = indexImage;
+  img.onload = function() {
+    const canv = cvsRef.value;
+    canv.width = img.naturalWidth;
+    canv.height = img.naturalHeight;
+  }
+  const imgMask = new Image();
+  imgMask.src = maskImage;
+
+  let i = 0;
+  let animationId = 0;
+
+  const xStart = 60;
+  const yStart = 90;
+  const speed = 20;
+  const draw = () => {
+    i += speed;
+    const canv = cvsRef.value;
+    const maskX = (canv.width - (xStart + i)) / 2;
+    const maskY = (canv.height - (yStart + i)) / 2;
+    const maskWidth = xStart + i;
+    const maskHeight = yStart + i;
+    
+    const ctx = ctxRef.value;
+    ctx.clearRect(0, 0, canv.width, canv.height);
+    ctx.globalCompositeOperation = "source-over";
+    
+    ctx.drawImage(imgMask, maskX, maskY, maskWidth, maskHeight);
+    
+    ctx.globalCompositeOperation = "source-in";
+    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);    
+    animationId = window.requestAnimationFrame(draw);
+    
+    const { clientWidth, clientHeight } = document.body;
+    if ((maskWidth - clientWidth + maskX) > img.naturalWidth && (maskHeight - clientHeight + maskY) > img.naturalHeight) {
+      // 动画就结束
+      window.cancelAnimationFrame(animationId);
+      emit('end');
+    }
+  }
+
+  const start = () => {
+    i = 0;
+    draw();
+  }
+
+  onMounted(() => {
+    ctxRef.value = cvsRef.value.getContext("2d");
+  })
+
+  defineExpose({
+    start,
+  })
+
+</script>
+
+<style lang="less" scoped>
+canvas {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 20;
+}
+</style>

vite.config.js

@@ -4,6 +4,10 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
+  server:{
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
   resolve:{
     alias:{