133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="hero-swiper">
|
||
<div class="centent">
|
||
<div class="centent-left">
|
||
<HeroSwiper></HeroSwiper>
|
||
<div
|
||
class="hero-title"
|
||
id="heroTest"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
HERO
|
||
</div>
|
||
<div class="hero-bg">
|
||
<img src="../assets/img/home/weapon-bg.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="centent-right"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import HeroSwiper from "../components/HeroSwiper.vue";
|
||
import { ref, onMounted } from "vue";
|
||
|
||
const Y1 = ref(0);
|
||
const ratio = ref(0.2); //视差偏移率
|
||
const positionY1 = ref(0); //背景Y轴偏移量
|
||
onMounted(() => {
|
||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||
let heroTest = document.getElementById("heroTest");
|
||
Y1.value = heroTest.offsetTop * ratio.value;
|
||
});
|
||
|
||
function handleScroll() {
|
||
const scrollTop =
|
||
window.pageYOffset ||
|
||
document.documentElement.scrollTop ||
|
||
document.body.scrollTop;
|
||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||
// console.log(mTab.value, "mTab");
|
||
console.log(positionY1.value + "-------------------3");
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.hero-swiper {
|
||
// background: #c1ebff;
|
||
position: relative;
|
||
.centent {
|
||
width: 1440px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.centent-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.centent-top-right,
|
||
.centent-top-left {
|
||
width: 646px;
|
||
height: 16px;
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
.centent-top-start {
|
||
width: 27px;
|
||
height: 27px;
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
.centent-top-hero {
|
||
font-size: 28px;
|
||
font-family: "JCuYuan";
|
||
|
||
color: #141414;
|
||
line-height: 32px;
|
||
}
|
||
// .centent-top-right {
|
||
// }
|
||
}
|
||
.centent-left {
|
||
.hero-title {
|
||
position: absolute;
|
||
left: -250px;
|
||
top: -250px;
|
||
font-size: 360px;
|
||
font-family: "BigJohn";
|
||
|
||
color: #579ec9;
|
||
line-height: 30px;
|
||
opacity: 0.26;
|
||
}
|
||
.hero-bg {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
color: transparent;
|
||
img {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
.hero-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.content-right {
|
||
}
|
||
}
|
||
}
|
||
</style>
|