原神官网切换效果

这两天来研究一下原神游戏官网的效果，只是我个人理解。

地址：《原神》官方网站-全新4.3版本「蔷薇与铳枪」上线！ (mihoyo.com)

继续用我之前的模板项目：

等我把这一页写满，会上传原码。 

效果很多，我们先看第一个：

1.滚轮切换

先看效果图：

这看起来像什么呢？ 

是不是很像轮播图呀，就是把轮播图变成垂直，然后触发滚动方式变成滚轮触发。

好，我现来偷个懒，使用element的走马灯的组件。

<template>
    <div class="mainrouter" style="padding: 0px;overflow-y: auto;">
        <div class="box">
            <div style="height: 100%" @mousewheel="rollScroll($event)">
                <el-carousel ref="carousel" direction="vertical" :autoplay="false" trigger="click" :loop="false"
                    @mousewheel="rollScroll($event)">
                    <el-carousel-item v-for="(item, index) in 4" :key="index" class="item">
                        <div class="font">
                            <img :src="src[index]" alt="">
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <el-footer v-if="thiscarousel == 4">
                <div style="width: 100%;height:100px;text-align: center;background-color: aliceblue;">
                    fOOTER
                </div>
            </el-footer>
        </div>
    </div>
</template>  
  
<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';

const name = 'home';
const timeOut = ref(null);
const carousel = ref(null); // 添加对 carousel 的引用  
const thiscarousel = ref(1)//标识一下轮播图轮播到第几个了

// 绑定尾部
const footer = ref(false)
const rollScroll = (event) => {
    const scrollVal = event.wheelDelta || event.detail;
    if (!timeOut.value) {
        timeOut.value = setTimeout(() => {
            timeOut.value = null;
            if (scrollVal > 0) {
                carousel.value.prev()
                if (thiscarousel.value != 0) {
                    thiscarousel.value--
                }
            }
            else {
                carousel.value.next()
                if (thiscarousel.value != 4) {
                    thiscarousel.value++
                } else {
                    footer.value = true
                }
            }
        }, 300);
    }
};

// 
const src = ref([
    require("./img/1.png"),
    require("./img/2.png"),
    require("./img/3.png"),
    require("./img/4.png")
]
)

</script>
   
<style lang="scss">
.box {
    height: 100%;
    background-color: #ccc;
}

.el-carousel--vertical {
    height: 100%
}

.el-carousel--vertical {
    height: 100% !important;
}

.el-carousel-item {
    // width: 800px;
    // height: 600px;
    background-color: skyblue;
}

.el-carousel__container {
    height: 100% !important;
}

.el-carousel__indicators--right {
    display: none !important;
}

.font {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: cover; // 背景图片覆盖整个容器

    h3 {
        font-size: 24px;
    }
}
</style>
   

效果为：

 然后再幻灯片里面加东西就行，自己看着写。

然后像原神主页的哪些很好看的样式，我发现大部分都是video，可以自己看看：act-webstatic.mihoyo.com/puzzle/hk4e/pz_xcId9WFtTw/resource/puzzle/2023/12/15/c12417602915acf4628ed25943dd1da5_5379542803425482.mp4

其余的一些样式，看起来很好看，其实实现很简单，nb的是ui，前端只是放上去了 

2.元素加载动画效果

在点击进入首页后，有一个这样子的效果，这个效果我看他官网写法是使用canvas+js进行绘制，有点难。

咱换一个方法。

 使用css的滤镜调整颜色，滤镜在线转换地址：CSS3 filter滤镜表示色值的变化在线工具 » 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

使用两个图片进行交叠在一起，切换改变其中一个div的大小，做到加载动画效果。 

<template>
    <div class="mainrouter centerWindi" style="flex-direction: column;">
        <div style="width: 50%;position: relative;">
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.box {
    height: 120px;
    position: absolute;
    &:nth-child(1) {
        background: url('../img/loading.png') no-repeat;
        background-size: 805px auto;
        // mix-blend-mode: screen;
        // 使用滤镜可以完美的将png改变颜色，但是不知道要怎么变成加载效果
        // 想了半天,突然灵机一动
        @keyframes identifier {
            0%{
                width: 0px;
            }
            100%{
                width: 805px;
            }
        }
        filter: invert(99%) sepia(7%) saturate(242%) hue-rotate(311deg) brightness(119%) contrast(87%);
        z-index: 2;
        animation: identifier 3s;
    }
    &:nth-child(2) {
        width: 805px;
        background: url('../img/loading.png') no-repeat;
        background-size: 100% auto;
        z-index: 1;
    }
}
</style>

效果图：