老师,为什么我滑动滚动条时,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <header class="header"> <div class="header__logo">H5实战页面</div> <div class="header__nav"> <a href="javascript:;" class="header__nav-item header__nav-item_status_active">实战课程</a> <a href="javascript:;" class="header__nav-item">商业案例</a> <a href="javascript:;" class="header__nav-item">课程体系</a> <a href="javascript:;" class="header__nav-item">集成环境</a> <a href="javascript:;" class="header__nav-item">云端学习</a> <a href="javascript:;" class="header__nav-item header__nav-item_custom_button" id="btn">即课学习</a> <div class="header__nav-tip"></div> </div> </header> <!--第一屏--> <div class="screen-1"> <div class="wrap"> <h2 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h2> <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习,还在等待什么?</h3> </div> </div> <!--第二屏--> <div class="screen-2"> <div class="wrap"> <h2 class="screen-2__heading">每门课都是真是商业案例</h2> <h3 class="screen-2__subheading">真实案例,真实场景,在实践中实践、操作、调试<br>大牛带你体验BAT真实开发流程,所有开发流程一一为你呈现</h3> <div class="screen-2-pic"></div> <div class="screen-2-pic-1"></div> </div> </div> <!--第三屏--> <div class="screen-3"> <div class="wrap"> <div class="screen-3-pic"></div> <h2 class="screen-3__heading">强大的语言课程体系支持</h2> <h3 class="screen-3__subheading ">学习环境与课程轻松对接,安装、调试、写入、部署、运行,一站式解决<br>,让你体验开发全流程</h3> <div class="screen-3-items"> <div class="screen-3-item screen-3-item-html5">HTML5</div> <div class="screen-3-item screen-3-item-PHP">PHP</div> <div class="screen-3-item screen-3-item-JAVA">JAVA</div> <div class="screen-3-item screen-3-item-Python">Python</div> <div class="screen-3-item screen-3-item-Node-js">Node.js</div> </div> </div> </div> <!--第四屏--> <div class="screen-4"> <div class="wrap"> <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2> <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3> <div class="screen-4__type"> <div class="screen-4__type__item screen-4__type__item_i_1"> <div class="screen-4__word">实战课程集成开发环境</div> </div> <div class="screen-4__type__item screen-4__type__item_i_2"> <div class="screen-4__word">内置终端命令</div> </div> <div class="screen-4__type__item screen-4__type__item_i_3"> <div class="screen-4__word">编译你的应用程序</div> </div> <div class="screen-4__type__item screen-4__type__item_i_4"> <div class="screen-4__word">通过云端服务输出效果</div> </div> </div> </div> </div> <!--第5屏--> <div class="screen-5"> <div class="wrap"> <h2 class="screen-5__heading">云端学习可以这样简单</h2> <h3 class="screen-5__subheading">看视频、敲代码,一气呵成,结合慕课网为你提供的云端学习工具,所见即所得,从此学习不一样</h3> <div class="screen-5-pic"></div> </div> </div> <!--第6屏--> <div class="screen-6"> <div class="wrap"> <div class="screen-6__button" id="screen-6__button">继续了解学习体验</div> </div> </div> <footer class="footer"> <div class="daohang"> 网站首页 人才招聘 联系我们 高校联盟 关于我们 讲师招募 意见反馈 友情链接</div> <div class="banquan"> Copyrught © 2015 imooc.com All Rights REserved | 京ICP备 13046642号-2</div> </footer> <!--大纲--> <div class="outline"> <a href="javascript:;" class="outline__item outline__item_status_active">实战课程</a> <a href="javascript:;" class="outline__item">商业案例</a> <a href="javascript:;" class="outline__item">课程体系</a> <a href="javascript:;" class="outline__item">集成环境</a> <a href="javascript:;" class="outline__item">云端学习</a> </div> <script src="js/index.js"></script> </body> </html>
*{ padding:0; margin:0; } a{ text-decoration: none; } .wrap{ width:1200px; margin:0 auto; height: auto; } /*头部区域*/ .header{ width: 100%; height: 60px; position: relative; float: left; animation: headerAnimate 1s ease-in-out .5s; } .header__logo{ width: 150px; height: 40px; line-height: 40px; background: url(../img/logo.png) no-repeat left center; background-size: 40px 40px ; text-indent: 50px; color:#fff; position: absolute; top:50%; margin-top:-20px; left:9px; } /*鼠标经过logo区的变化*/ .header__logo:hover{ cursor: pointer; } .header__nav{ position: absolute; right: 30px; height: 40px; position: absolute; top:50%; margin-top:-20px; } .header__nav-item{ display: block; color: #fff; float: left; font-size: 14px; height: 40px; width:60px; text-align: center; line-height: 40px; padding-left: 40px; position: relative; text-align: center; } .header__nav-item:hover{ color: red; } .header__nav-item_status_active{ color:red; } .header__nav-item_status_active::after{ /* content: " "; display: block; position: absolute; height: 2px; width: 100%; background: red; left:0; bottom: 0; */ } .header__nav-item_custom_button{ width: 96px; height: 40px; background: #f01400; color:#fff; border-radius: 5px; padding:0; margin-left: 40px; } /*滑动条*/ .header__nav-tip{ position: absolute; width: 60px; height: 2px; background-color: rgb(240, 0, 0); bottom: 0; left: 0; margin-left: 40px; transition: all .5s; } /*第一屏*/ .screen-1{ background: url(../img/sc1.jpg) no-repeat center; height: 640px; background-size: cover; padding-top:60px; } .screen-1__heading{ color:#fff; padding-top:240px; text-align: center; font-size: 40px; } .screen-1__subheading{ color: #fff; font-weight: normal; text-align: center; font-size: 14px; padding-top:27px; } /*第二屏*/ .screen-2{ height: 640px; background:url(../img/sc2.png) no-repeat bottom; position: relative; } .screen-2__heading{ font-size: 40px; padding-top:90px; text-align: center; } .screen-2__heading::after{ content: " "; display: block; width:50px; height: 2px; background: #f01400; position: absolute; top:167px; left: 50%; margin-left: -25px; } .screen-2__subheading{ font-size: 14px; height: 14px; text-align: center; padding-top: 64px; } .screen-2-pic{ background: url(../img/sc2-1.png) no-repeat; width: 275px; height: 380px; position: absolute; left:50%; margin-left: -137.5px; top:260px; z-index: 2; } .screen-2-pic-1{ width: 266px; height: 205px; background: url(../img/sc2-2.png) no-repeat; position: absolute; top:335px; left:50%; margin-left: -40px; z-index: 1; animation: plane 1s ease 3s ; } /*第三屏*/ .screen-3{ height: 640px; background: #2b333b; position: relative; } .screen-3-pic{ background: url(../img/sc3.png) no-repeat center center; background-size: 408px 440px; width:408px; height: 440px; position: absolute; top:50%; margin-top: -220px; margin-left: 20px; } .screen-3__heading{ color: #fff; font-size: 35px; text-align: right; padding-top:230px; padding-right: 125px; } .screen-3__heading::after{ content: " "; display: block; width:50px; height: 2px; background: #f01400; position: absolute; top:300px; left: 50%; margin-left: 90px; } .screen-3__subheading{ font-weight: normal; font-size: 16px; color:#fff; height: 16px; line-height: 24px; padding-top:60px; padding-left: 685px; } .screen-3-items{ width:583px; height: 67px; margin-top:170px; margin-left:600px; } .screen-3-item{ float: left; width: 67px; height: 67px; line-height: 67px; text-align: center; font-size: 12px; margin-left: 38px; border-radius: 50%; } .screen-3-item-html5{ border: 4px solid #1f5975; color: #02a4ce; } .screen-3-item-PHP{ border: 4px solid #424d76; color: #7872b4; } .screen-3-item-JAVA{ border: 4px solid #6b4146; color: #ff6060; } .screen-3-item-Python{ border: 4px solid #29535f; color: #22abc1; } .screen-3-item-Node-js{ border: 4px solid #3e4e40; color: #66b056; } /*第4屏*/ .screen-4{ height: 640px; background-color: #f3f5f7; position: relative; } .screen-4__heading{ color:#07111b; font-size: 40px; line-height: 40px; text-align: center; padding-top:90px; } .screen-4__subheading{ color: #07111b; font-size: 14px; text-align: center; padding-top:64px; } .screen-4__heading::after{ content: " "; display: block; width:50px; height: 2px; background: #f01400; position: absolute; top:167px; left: 50%; margin-left: -25px; } .screen-4__type{ width: 1200px; height: 120px; position: absolute; top:290px; margin-left: 20px; } .screen-4__type__item{ width: 160px; margin-right: 170px; height: 80px; float: left; position: relative; text-align: center; background-size: cover; } .screen-4__type__item_i_1{ background: url(../img/sc4-1.png) no-repeat center top; } .screen-4__type__item_i_2{ background: url(../img/sc4-2.png) no-repeat center top; } .screen-4__type__item_i_3{ background: url(../img/sc4-3.png) no-repeat center top; } .screen-4__type__item_i_4{ background: url(../img/sc4-4.png) no-repeat center top; margin-right: 0; } .screen-4__word{ width: 100%; height: 14px; color:#2c3238; font-size: 14px; line-height: 14px; position: absolute; bottom: -30px; text-align: center; } /*第5屏*/ .screen-5{ height: 640px; background: url(../img/sc5.jpg) no-repeat; background-size: cover; position: relative; } .screen-5-pic{ width:200px; height: 200px; background: url(../img/sc5-1.png) no-repeat center center; position: absolute; top:102px; left:50%; margin-left: -100px; } .screen-5__heading{ font-size: 35px; color: #fff; text-align: center; padding-top:365px; } .screen-5__heading::after{ content: " "; display: block; width:50px; height: 2px; background: #fff; position: absolute; top:435px; left: 50%; margin-left: -25px; } .screen-5__subheading{ color:#fff; padding-top:65px; font-size: 14px; font-weight: normal; text-align: center; } /*第6屏*/ .screen-6{ height: 200px; background: #fff; position: relative; } .screen-6__button{ width:240px; height: 60px; line-height: 60px; color:#14191e; text-align: center; border:2px solid #707070; border-radius: 2px; position: absolute; top:50%; margin-top:-30px; left:50%; margin-left:-120px; cursor: pointer; border-radius: 3px; } .screen-6__button:hover{ color:red; } /*脚步*/ .footer{ height:106px; background: #000; color:#c8cdd2; text-align: center; } .daohang{ padding-top: 34px; font-size: 14px; } .banquan{ font-size: 16px; color: #787d82; padding-top:15px; } /*固定导航栏样式*/ .header{ transition: all 1s; } .header_status_back{ position: fixed; background: rgba(255,255,255,.5); top:0; left: 0; z-index: 3; } .header_status_back .header__nav-item, .header_status_back .header__logo { color:#000; } .header_status_back .header__nav-item_custom_button{ color: #fff; } .header_status_back .header__nav-item_status_active { color:red; } .header_status_back .header__nav-item:hover{ color: red; } @keyframes headerAnimate{ 0%{ transform: translateY(-400px); opacity: 0; } 100%{ transform: translateY(0px); opacity: 1; } } @keyframes plane{ 0%{ transform: translateY(600px); opacity: 0; } 25%{ transform: translateY(-15px); } 50%{ transform: translateY(10px); opacity: 1; } 75%{ transform: translateY(-5px); } 100%{ transform: translateY(0px); } } /*大纲视图*/ .outline{ position: fixed; bottom: 120px; right: 0; background: #fff; z-index: 3; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); padding: 5px 15px; } .outline__item{ display: block; width: 50px; height: 40px; color: #aaa; font-size: 12px; text-align: center; line-height: 40px; border-bottom: 1px solid #eee; } .outline__item:last-child{ border-bottom: none; } .outline__item_status_active{ color: red; } .outline{ transition: all 1s; opacity: 0; transform: translate(100%,0); } .outline_status_in{ opacity: 1; transform: translate(0,0); } .outline_status_in .outline__item:hover{ color: red; }
/*第一屏动画*/ .screen-1__heading{ transition: all 1s; } .screen-1__heading_animate_init{ transform: translate(0,30%); opacity: 0; } .screen-1__heading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-1__subheading{ transition: all 1s .3s; } .screen-1__subheading_animate_init{ transform: translate(0,100%); opacity: 0; } .screen-1__subheading_animate_done{ transform: translate(0,0); opacity: 1; } /*第二屏动画*/ .screen-2__heading{ transition: all 1s; } .screen-2__heading_animate_init{ transform: translate(0,30%); opacity: 0; } .screen-2__heading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-2-pic{ transition: all 1.5s .2s; } .screen-2__subheading{ transition: all 1s .2s; } .screen-2__subheading_animate_init{ transform: translate(0,100%); opacity: 0; } .screen-2__subheading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-2-pic_animate_init{ opacity: 0; } .screen-2-pic_animate_done{ opacity: 1; } /*第3屏动画*/ .screen-3-pic{ transition: all 1s; } .screen-3-pic_animate_init{ transform: scale(0); opacity: 0; } .screen-3-pic_animate_done{ transform: scale(1); opacity: 1; } .screen-3__heading{ transition: all 1s; } .screen-3__heading_animate_init{ transform: translate(0,30%); opacity: 0; } .screen-3__heading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-3__subheading{ transition: all 1s .2s; } .screen-3__subheading_animate_init{ transform: translate(0,100%); opacity: 0; } .screen-3__subheading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-3-items{ transition: all .5s 1.2s; } .screen-3-items_animate_init{ transform: translate(0,200%); } .screen-3-items_animate_done{ transform: translate(0,0); } .screen-3-item{ animation: pulse 1s ; } @keyframes pulse{ 0%{ transform: scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); } } /*第4屏*/ .screen-4__heading{ transition: all 1s; } .screen-4__heading_animate_init{ transform: translate(0,10%); opacity: 0; } .screen-4__heading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-4__subheading{ transition: all 1s .2s; } .screen-4__subheading_animate_init{ transform: translate(0,50%); opacity: 0; } .screen-4__subheading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-4__type__item_i_1, .screen-4__type__item_i_2, .screen-4__type__item_i_3, .screen-4__type__item_i_4 { transition: all .7s; } .screen-4__type__item_i_1_animate_init, .screen-4__type__item_i_2_animate_init, .screen-4__type__item_i_3_animate_init, .screen-4__type__item_i_4_animate_init { transform: scale(0); } .screen-4__type__item_i_1_animate_done, .screen-4__type__item_i_2_animate_done, .screen-4__type__item_i_3_animate_done, .screen-4__type__item_i_4_animate_done { transform: scale(1); } /*第5屏*/ .screen-5__heading{ transition: all 1s; } .screen-5__heading_animate_init{ transform: translate(0,5%); opacity: 0; } .screen-5__heading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-5__subheading{ transition: all 1s .2s; } .screen-5__subheading_animate_init{ transform: translate(0,50%); opacity: 0; } .screen-5__subheading_animate_done{ transform: translate(0,0); opacity: 1; } .screen-5-pic{ transition: all .5s; } .screen-5-pic_animate_init{ transform: scale(0.3); } .screen-5-pic_animate_done{ transform: scale(1); }
//获取元素 var getElem=function(selector){ return document.querySelector(selector); } var getAllElem=function(selector){ return document.querySelectorAll(selector); } //获取元素样式 var getCls=function(element){ return element.getAttribute("class"); } //设置元素样式 var setCls=function(element,cls){ return element.setAttribute("class",cls); } //为元素添加样式 var addCls=function(element,cls){ var baseCls=getCls(element); if(baseCls.indexOf(cls)===-1){ setCls(element,baseCls+" "+cls); } } //为元素删除样式 var delCls=function(element,cls){ var baseCls=getCls(element); setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," ")); } //第一步 初始化样式 var screenAnimateElements={ ".screen-1":[ ".screen-1__heading", ".screen-1__subheading", ], ".screen-2":[ ".screen-2__heading", ".screen-2__subheading", ".screen-2-pic", ], ".screen-3":[ ".screen-3-pic", ".screen-3__heading", ".screen-3__subheading", ".screen-3-items", ], ".screen-4":[ ".screen-4__heading", ".screen-4__subheading", ".screen-4__type__item_i_1", ".screen-4__type__item_i_1", ".screen-4__type__item_i_2", ".screen-4__type__item_i_3", ".screen-4__type__item_i_4", ], ".screen-5":[ ".screen-5__heading", ".screen-5__subheading", ".screen-5-pic", ] } function setScreenAnimateInit(screenCls){ var screen=document.querySelector(screenCls);//获取类名为当前屏的元素 var animateElements=screenAnimateElements[screenCls]; for(var i=0;i<animateElements.length;i++){ var element=document.querySelector(animateElements[i]);//获取到数组中的元素 var basCls=element.getAttribute('class');//得到元素的类名 element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_init");//重新设置类名 } } //播放屏内的元素动画 function playScreenAnimateDone(screenCls){ var screen=document.querySelector(screenCls);//获取类名为当前屏的元素 var animateElements=screenAnimateElements[screenCls]; for(var i=0;i<animateElements.length;i++){ var element=document.querySelector(animateElements[i]); var basCls=element.getAttribute("class"); element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_done");//重新设置类名 } } window.onload=function(){ for(k in screenAnimateElements){ if(k===".screen-1"){ continue; } setScreenAnimateInit(k); } } //第2步,滚动到哪里,就播放动画 window.onscroll=function(){ var top=document.documentElement.scrollTop || document.body.scrollTop; if(top>60){ addCls(getElem(".header"),'header_status_back'); addCls(getElem(".outline"),"outline_status_in"); }else{ delCls(getElem(".header"),'header_status_back'); delCls(getElem(".outline"),"outline_status_in"); switchNavItemsActive(0); } if(top>1){ playScreenAnimateDone(".screen-1"); switchNavItemsActive(0); } if(top>640*1-100){ playScreenAnimateDone(".screen-2"); switchNavItemsActive(1); } if(top>640*2-100){ playScreenAnimateDone(".screen-3"); switchNavItemsActive(2); } if(top>640*3-100){ playScreenAnimateDone(".screen-4"); switchNavItemsActive(3); } if(top>640*4-100){ playScreenAnimateDone(".screen-5"); switchNavItemsActive(4); } } //第3步:点击跳转导航栏 var index=0; var navitems=getAllElem(".header__nav-item"); for(var i=0;i<navitems.length;i++){ navitems[i].setAttribute("data-id",i); navitems[i].onclick=function(){ index=this.getAttribute("data-id"); document.documentElement.scrollTop=index*640; } } //点击跳转,大纲 var outlineitems=getAllElem(".outline__item"); for(var i=0;i<outlineitems.length;i++){ outlineitems[i].setAttribute("data-id",i); outlineitems[i].onclick=function(){ index=this.getAttribute("data-id"); document.documentElement.scrollTop=index*640; } } //鼠标放在按钮上,按钮的变化 var btn=document.getElementById("btn"); btn.onmousemove=function(){ btn.style.backgroundColor="#c02c1f"; btn.style.color="#fff"; } btn.addEventListener("mouseout",function(){ btn.style.backgroundColor="#f01400"; }) //导航大纲联动 var switchNavItemsActive=function(idx){ for(var i=0;i<navitems.length;i++){ delCls(navitems[i],"header__nav-item_status_active"); } addCls(navitems[idx],"header__nav-item_status_active"); for(var m=0;m<outlineitems.length;m++){ delCls(outlineitems[m],"outline__item_status_active"); } addCls(outlineitems[idx],"outline__item_status_active"); } //点击立即学习后跳到第一屏 var btn1=document.getElementById("screen-6__button"); btn1.onclick=function(){ document.documentElement.scrollTop=0; } //第一屏动画延迟播放 setTimeout(function(){ playScreenAnimateDone(".screen-1"); },200); //滑动条 var activeIdx=0; //第4步:滑动门特效 var navTip=getElem(".header__nav-tip"); for(var i=0;i<navitems.length;i++){ navitems[i].setAttribute("data-id",i); navitems[i].onmouseover=function(){ var index=this.getAttribute("data-id"); navTip.style.left=(index*100)+"px"; } navitems[i].onmouseout=function(){ var index=this.getAttribute("data-id"); for(var n=0;n<navitems.length;n++){ if(getCls(navitems[n]).indexOf("header__nav-item_status_active")>-1){ activeIdx=n; break; } } navTip.style.left=(activeIdx*100)+"px"; } }
老师,为什么我滑动滚动条时,导航下面的条不跟着动,还有当我刷新页面但不滑动页面的时候header部分总是1s后才出现。。该怎么改呀
2
收起
正在回答
2回答
同学你好,
如果想要只在滚动条开始滚动的时候,执行headerAnimate这个动画, 可以参考如下思路
(1)用一个单独的类设置动画样式
(2)上一条设置的header一开始不显示的样式可以删除了
(3)在滚动条开始滚动的时候, 给头部添加header_active这个类,执行动画效果
第一屏的字会先从上面飞出来, 主要浏览器对transition属性的解析有差异造成的。如果同学想调整这种情况。
建议: 将screen-1__heading设置的过度属性修改为给screen-1__heading_animate_done这个类下添加过渡属性。
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~~
好帮手慕慕子
2019-08-14 17:11:30
同学你好, 因为在滚动过程中, 没有设置导航下划线的left值跟随移动, 建议修改:
关于header这里, 同学的意思是,header一开始现实的, 1s后才消失然后在显示出来吗?如果是这样的话, 那么是因为一开始header是正常现实的, 延迟0.5s之后执行动画headerAnimate,让头部先应隐藏在显示
建议: 可以给header添加初始样式, 不让其显示
然后设置动画保持在结束状态, 让头部显示在页面中
如果不是指这里的话, 建议: 同学可以详细的描述一下,指的是哪里, 再次提问, 我们会继续为你解答的
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星