原神官网切换效果

这两天来研究一下原神游戏官网的效果，地址：《原神》官方网站-全新4.3版本「蔷薇与铳枪」上线！ (mihoyo.com)

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

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

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

1.滚轮切换

先看效果图：

这看起来像什么呢？?

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

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

<template>
    <div class="mainrouter" style="padding: 0px;">
        <div class="box">
            <div style="height: 100%" @mousewheel="rollScroll($event)">

                <el-carousel direction="vertical" :autoplay="false" trigger="click" ref="carousel" :loop = "false"
                    @mousewheel="rollScroll($event)">
                    <el-carousel-item class="item" v-for="(item, index) in 4" :key="index">
                        <div class="font">
                            <h3>{{ item }}</h3>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>
   
<script>
export default {
    name: "home",

    data() {
        return {
            timeOut: null,
        };
    },
    methods: {
        rollScroll(event) {
            let _that = this;
            // chrome、ie使用的wheelDelta，火狐使用detail
            let scrollVal = event.wheelDelta || event.detail;
            // 节流
            if (!_that.timeOut) {
                _that.timeOut = setTimeout(() => {
                    _that.timeOut = null;
                    scrollVal > 0
                        ? _that.$refs.carousel.prev()
                        : _that.$refs.carousel.next();
                }, 300);
            } else {
            }
        },
    },
};
</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;
    h3 {
        font-size: 24px;
    }
}
</style>
   

?

?