项目一总结 滚动监听

Posted 2020-11-26 zqy6666

重点css3的动画效果 (时间及偏移位置)设置 和滚动监听位置的选择

html

 <!-- section1 -->
   <div class="section1">
    <ul class="">
     <li class="tt t1"><span class="cent1">骁龙855旗舰处理器</span><span class="cent2">年度超旗舰处理器</span></li>
     <li class="tt t2 "><span class="cent1">索尼 4800 万像素三摄</span><span class="cent2">DxOMark拍照评分领先</span></li>
     <li class="tt t3 "><span class="cent1">支持超广角、微距拍摄</span><span class="cent2">开启手机摄影非凡视野</span></li>
     <li class="tt t4"><span class="cent1">小米首款20W无线闪充</span><span class="cent2">速度堪比有线快充</span></li>
     <li class="tt t5"><span class="cent1">全息幻彩玻璃机身</span><span class="cent2">手心中的梦幻彩虹光</span></li>
     <li class="tt t6"><span class="cent1">全曲面轻薄设计</span><span class="cent2">怦然心动的好手感</span></li>
     <li class="tt t7"><span class="cent1">第五代极速屏下指纹</span><span class="cent2">快25%解锁超灵敏</span></li>
     <li class="tt t8"><span class="cent1">标配27W 有线快充</span><span class="cent2">90.7%超高屏占比</span></li>
     <li class="tt t9"><span class="cent1">三星 AMOLED 屏幕</span><span class="cent2">充满只需60 分钟</span></li>
     <li class="tt t10"><span class="cent1">蓝宝石玻璃镜片</span><span class="cent2">超硬耐磨，长久保护</span></li>
    </ul>
   </div>
   <!-- section1 完-->
   <!-- section2 -->
   <div class="section2">
    <div class="text2">
     <h2 class="hh2">更强 骁龙855<br />
      <span>更快 20W 无线闪充</span>
      <br />
      <span>两大科技全球首批量产</span>
     </h2>
    </div>
   </div>
   <!-- section2 完-->
   <!-- section3 -->
   <div class="section3">
    <div class="text3">
     <h2 class="hh3">快！骁龙855 处理器<br />
      <span>游戏快 20%，运算快 45%，3 倍 AI 性能</span>
      <br />
      <span>高通骁龙 800 系史上最大升级</span>
      <p class="p11"><span>盘点智能手机历代经典机型，哪一代没有骁龙 800 系的强大引擎 骁龙855不仅在性能上全面飞跃，</span><br><span>
        更有再次突破的 7nm - 领先芯片工艺加持。这一切已被我们首次应用于小米9,让你快人一步领略科技魅力。</span></p>
     </h2>
    </div>
    <div class="img1">
     <img src="../img/xiaomi9/section3-1.jpg">
    </div>
   </div>
   <!-- section3 完-->
   <!-- section4 -->
   <div class="scention4">
    <div class="text4">
     <h2 class="hh3">快的不止骁龙855<br />
      <span>还有两项 Turbo 技术带来的双重大提速</span>
      <p class="p11"><span>系统级优化是对性能的锦上添花，开发 MI Turbo 系统底层优化技术，连续使用 18 个月依然快速</span><br><span>
        流畅*。以及 Game Turbo 游戏加速，调动深层性能带来超凡游戏表现。</span></p>
     </h2>
    </div>
    <div class="text5">
     <div class="kuang1">
      <h2 class="hh4">模拟使用 18 个月<br />
       <span>降低卡顿 35%</span>
       <p class="p12">
        MI Turbo 防系统老化</p>
      </h2>
     </div>
     <div class="kuang1">
      <h2 class="hh4">游戏显示增强<br />
       <span>游戏触控模式</span>
       <p class="p12">
        Game Turbo 游戏加速</p>
      </h2>
     </div>
     <br>
     <div class="p22">
      <p class="">* 通过小米实验室模拟18个月老化使用，实验证明 MI Turbo 可有效降低卡顿35%。以上数据均为我司实验室数据，
       实际情况会因测试软件版本、 具体测试环境、具体版本不同而略有差异。最终以实际使用时长为准。
      </p>
     </div>
    </div>
    <div class="img2">
     <img src="../img/xiaomi9/section3-2.jpg">
    </div>
   </div>
   <!-- section4 完-->

jq:

  /*outerHeight() 模块外高度   .offset().top模块低端到top的距离*/
  //轮播图上文字显现变量aa
  var aa = $(".text111").offset().top - $(".text111").outerHeight();
  //文字效果变量bb
  var bb = $(".section1").offset().top - $(".section1").outerHeight();
  //section2图片上文字
  var cc = $(".section2").offset().top - $(".section2").outerHeight();
  var dd = $(".section3").offset().top;
  //alert(bb);
  $(window).scroll(function() {
   var hui = $(document).scrollTop();
   //alert(hui);
   //轮播图上文字显现
   if (hui >= 0) {
    $(".text111").addClass("text1111");
   }
   //轮播图上文字显现完成
   //文字效果
   if (hui >= 300) {
    $(".tt").each(function() {
     $(this).addClass("ttr");
    })
   }
   //文字效果完成
   //section2图片上文字
   if (hui >= 700) {
    $(".hh2").addClass("hh21");
   }

   //section2图片上文字完成
   //section3
   if (hui >= 900) {
    $(".text3").addClass("hh31");
    $(".p11").addClass("hh31");
    $(".img1").addClass("hh31");
   }
   //section3完成
   //section4
   if (hui >= 1400) {
    $(".text4").addClass("hh31");
    $(".text5").addClass("hh31");
    $(".img2").addClass("hh31");
   }
   //section4完成

 

css

/* 模块一 */
.section1 {
 background: #fff;
 padding: 20px 10px;
 height: 195px;
 text-align: center;
 position: relative;
 overflow: hidden;
 margin: 0 auto;
 margin-top: 30px;
 width: 1226px;
}

.section1 li {
 float: left;
 width: 200px;
 height: 70px;
 text-align: left;
 margin-left: 40px;
}

.cent1 {
 color: #333;
 line-height: 34px;
 display: block;
 font-size: 17px;
 text-align: left;
 font-weight: 600;
}

.cent2 {
 font-size: 16px;
 letter-spacing: 1px;
 line-height: 28px;
 color: #848484;
 text-align: left;
 /* margin-left:-50px; */
}

.tt {

 opacity: 0;
 transform: translate3d(0, 30px, 0);
}

.ttr {
 opacity: 1;
 transition: opacity .8s, transform .8s;
 transform: translateZ(0);
}

.t1 {
 transition-delay: .1s;
}

.t2 {
 transition-delay: .3s;
}

.t3 {
 transition-delay: .6s;
}

.t4 {

 transition-delay: .9s;
}

.t5 {

 transition-delay: 1.1s;
}

.t6 {
 transition-delay: 1.4s;
}

.t7 {
 transition-delay: 1.7s;
}

.t8 {
 transition-delay: 1.9s;
}

.t9 {
 transition-delay: 2.2s;
}

.t10 {
 transition-delay: 2.4s;
}

/* section2 */
.section2 {
 width: 100%;
 height: 345px;
 background-image: url(../img/xiaomi9/section2.jpg);
 overflow: hidden;
 text-align: center;
}

.text2 {
 margin: 0 auto;
 width: 500px;
 padding-top: 120px;
 font-size: 60px;
 line-height: 100px;
 color: #fff;
 position: relative;
}

.hh2 {
 opacity: 0;
 text-align: left;
 transform: translate3d(0, 30px, 0);
 position: absolute;
 z-index: 4;
}

.hh2 span {
 margin-top: 20px;
}

.hh21 {
 opacity: 1;
 transition: opacity .8s, transform .8s;
 transform: translateZ(0);
}

/* section3 */
.section3 {
 width: 1226px;
 height: 550px;
 margin: 0 auto;
 overflow: hidden;
 text-align: center;
 padding-top: 20px;
}

.text3 {
 opacity: 0;
 transform: translate3d(0, 30px, 0);
 margin: 0 auto;
 width: 450px;
 height: 145px;
 padding-top: 40px 0px 0px 0px;
 color: #333;
 position: relative;
}

.hh3 {
 text-align: left;
 font-size: 20px;
 position: absolute;
 z-index: 4;
 line-height: 30px;
 font-weight: 800;
 width: 600px;
}

.hh3>span {
 margin-top: 20px;
}

.p11 {
 opacity: 0;
 font-size: 12px;
 z-index: 4;
 line-height: 20px;
 position: relative;
 font-family: F254dd;
 width: 620px;
 padding-top: 10px;
 transform: translate3d(0, 30px, 0);
 transition-delay: .8s;
 color: rgba(123, 123, 123, .8);
}

/* .hh33{
 opacity: 1;
 transition: opacity .8s,transform .8s;
 transform: translateZ(0);
}
.hh32{
 opacity: 1;
 transition: opacity .8s,transform .8s;
 transform: translateZ(0);
} */
.img1 {
 width: 690px;
 height: 345px;
 margin: 20px auto;
 overflow: hidden;
 padding-left: 100px;
 opacity: 0;
 transform: translate3d(0, 30px, 0);
 transition-delay: 1s;
}

.img1 img {
 width: 100%;
 height: 100%;
}

/* .hh31{
 opacity: 1;
 transition: opacity .8s,transform .8s;
 transform: translateZ(0);
} */
/* section4 */
.section4 {
 width: 1226px;
 height: 630px;
 margin: 0 auto;
 overflow: hidden;
 text-align: center;
}

.text4 {
 opacity: 0;
 transform: translate3d(0, 30px, 0);
 margin: 0 auto;
 width: 450px;
 height: 125px;
 padding-top: 40px 0px 0px 0px;
 color: #333;
 position: relative;
}

.hh3 {
 text-align: left;
 font-size: 20px;
 position: absolute;
 z-index: 4;
 line-height: 30px;
 font-weight: 800;
 width: 600px;
}

.hh3>span {
 margin-top: 20px;
}

.text5 {
 width: 650px;
 height: 170px;
 margin: 0 auto;
 overflow: hidden;
 text-align: center;
 padding-left: 100px;
 opacity: 0;
 transform: translate3d(0, 30px, 0);
 transition-delay: 1.5s;
}

.kuang1 {
 width: 195px;
 height: 100px;
 float: left;
 border: 1px solid grey;
 text-align: center;
 margin-right: 15px;
}

.hh4 {
 text-align: center;
 font-size: 20px;
 /* position: absolute;
 z-index: 4; */
 line-height: 30px;
 font-weight: 600;
}

.p12 {
 font-size: 12px;
 z-index: 4;
 line-height: 20px;
 position: relative;
 font-family: F254dd;
 padding-top: 10px;
 color: rgba(123, 123, 123, .8);
}

.p22 {
 margin-top: 15px;
 width: 650px;
 float: left;
 line-height: 20px;
 font-size: 12px;
 color: hsla(0, 0%, 55.3%, .7);
 text-align: left;
}

.img2 {
 width: 690px;
 height: 345px;
 margin: 20px auto;
 overflow: hidden;
 padding-left: 66px;
 opacity: 0;
 transform: translate3d(0, 30px, 0);
 transition-delay: 1.2s;
}

.img2 img {
 width: 100%;
 height: 100%;
}

注：源代码在项目一 小米九中