企业官网建设流程全解析

电话销售做网站的术语,长沙建站模板大全,选图片的网站,网站转入备案一、说明这个我是为了放在博客的标题部分作为背景图#xff0c;上下滚动的时候比较好看。原理就是通过几张透明的png进行叠加#xff0c;然后在上下滚动时#xff0c;外层png移动的快#xff0c;内层png移动得慢来实现视差效果。先放一张示意图#xff1a;这里实际的距离X…一、说明这个我是为了放在博客的标题部分作为背景图上下滚动的时候比较好看。原理就是通过几张透明的png进行叠加然后在上下滚动时外层png移动的快内层png移动得慢来实现视差效果。先放一张示意图这里实际的距离X和Y在观察者看来是一样的原因是距离观察者的距离Z不一样导致的。视差示意图.png再放一张视差标题背景的3d示意图实际示意图二、Vue代码这里为了代码高亮分三部分展示html部分templatesectionimg :srcp0Src idp0 :style{ transform: translateY(${p0Top}px), zIndex: 100 } altp0img :srcp1Src idp1 :style{ transform: translateY(${p1Top}px), zIndex: 200 } altp1img :srcp2Src idp2 :style{ transform: translateY(${p2Top}px), zIndex: 300 } altp2img :srcp3Src idp3 :style{ transform: translateY(${p3Top}px), zIndex: 400 } altp3img :srcp4Src idp4 :style{ transform: translateY(${p4Top}px), zIndex: 500 } altp4img :srcp6Src idp6 :style{ transform: translateY(${p6Top}px), zIndex: 600 } altp6div idbanner_titleclasscontainer:style{ marginRight: 0px, marginTop: ${bannerTitleMarginTop}px, width: 75%}h1{{blogTitle}}/h1p classdescription{{blogDescription}}/p/div/section/templatejs部分scriptconst imgUrl https://xxxxxxxxxxxx/;export default {name: Banner,data() {return {p0Src: imgUrl banner/ppp0.png,p1Src: imgUrl banner/pp1.png,p2Src: imgUrl banner/pp2.png,p3Src: imgUrl banner/pp3.png,p4Src: imgUrl banner/pp4.png,p6Src: imgUrl banner/pp6.png,p0Top: 0,p1Top: 0,p2Top: 0,p3Top: 0,p4Top: 0,p6Top: 0,bannerTitleMarginTop: -100,requestId: undefined, // 用于跟踪 requestAnimationFrame 的标识};},props:{blogTitle:{type: String,require: true},blogDescription:{type: String,require: true},},mounted() {this.addScrollListener();},beforeDestroy() {this.removeScrollListener();},methods: {addScrollListener() {// 使用 passive 参数优化滚动性能window.addEventListener(scroll, this.handleScroll, {passive: true});},removeScrollListener() {window.removeEventListener(scroll, this.handleScroll);},handleScroll() {const value window.scrollY;this.p0Top value * 0.6;this.p1Top value * 0.36;this.p2Top value * 0.24;this.p3Top value * 0.16;this.p4Top value * 0.12;this.p6Top 0;this.bannerTitleMarginTop value * 1.1 - 100;// 使用 requestAnimationFrame 更新样式if (this.requestId undefined) {this.requestId requestAnimationFrame(this.updateStyles);}},updateStyles() {// 清除请求动画帧标识this.requestId undefined;}}}/scriptstyle部分style scoped langscsssection {position: relative;width: 100%;height: 100vh;padding: 0px;display: flex;justify-content: center;align-items: center;overflow: hidden;img {position: absolute;top: 0;left: 0;width: 100%;//height: 100%;object-fit: cover;pointer-events: none;will-change: transform; // 提前告知浏览器哪些属性可能会发生变化}#p4,#p3,#p2,#p1,#p0 {width: 100%;height: 100%;}#p6 {width: 100%;height: 150%;}section::before {content: ;position: absolute;bottom: 0;width: 100%;//height: 100px;background: linear-gradient(to top, #1c0522, transparent);//z-index: 1000;}}-webkit-keyframes bounce {0%,10%,25%,40%,50% {-webkit-transform: translateY(0) rotate(0deg);transform: translateY(0) rotate(0deg)}20% {-webkit-transform: translateY(-10px) rotate(0deg);transform: translateY(-10px) rotate(0deg)}30% {-webkit-transform: translateY(-5px) rotate(0deg);transform: translateY(-5px) rotate(0deg)}}keyframes bounce {0%,10%,25%,40%,50% {-webkit-transform: translateY(0) rotate(0deg);transform: translateY(0) rotate(0deg)}20% {-webkit-transform: translateY(-10px) rotate(0deg);transform: translateY(-10px) rotate(0deg)}30% {-webkit-transform: translateY(-5px) rotate(0deg);transform: translateY(-5px) rotate(0deg)}}/style