javascript - 当元素滚动到视口(viewport)时激活 CSS 3d 变换

Question

当每个元素滚动到 View 中时，我试图激活这个涉及 CSS 3d 变换的小型 CSS 动画。笔记本电脑需要在滚动到位时打开和关闭。有什么方法可以只使用 CSS 来完成此操作吗？如果不是 Jquery 答案也会有帮助! 代码如下。

/* Css Code */
    .macbook {
      width: 300px;
      margin: 50px auto;
      -webkit-perspective: 750;
      -webkit-perspective-origin: 50% bottom;
      -webkit-transform-style: preserve-3d;
      -moz-perspective: 750px;
      -moz-perspective-origin: 50% bottom;
      -moz-transform-style: preserve-3d;
      perspective: 750;
      perspective-origin: 50% bottom;
      transform-style: preserve-3d;
    }
    .macbook-lid {
      width: 80%;
      margin: 0 auto;
      -webkit-transform-origin: 50% bottom;
      -webkit-transform-style: preserve-3d;
      -moz-transform-origin: 50% bottom;
      -moz-transform-style: preserve-3d;
      transform-origin: 50% bottom;
      transform-style: preserve-3d;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      transition: all 1s;
    }
    .macbook-lid:before {
      display: block;
      content: '';
      width: 92%;
      margin: 0 auto;
      padding: 2% 3% 0 3%;
      background-color: #D3D1D2;
      border-radius: 10px 10px 0 0;
      -webkit-transform-origin: 50% bottom;
      -webkit-transform: rotate3d(1, 0, 0, 90deg);
      -moz-transform-origin: 50% bottom;
      -moz-transform: rotate3d(1, 0, 0, 90deg);
      transform-origin: 50% bottom;
      transform: rotate3d(1, 0, 0, 90deg);
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      transition: all 1s;
    }
    .macbook-screen {
      position: relative;
      background-color: #353535;
      margin: 0 auto;
      padding: 3%;
      border-radius: 5px 5px 0 0;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      transition: all 1s;
    }
    .macbook-screen:before {
      display: block;
      content: '';
      position: absolute;
      top: 2%;
      left: 49%;
      width: 1%;
      padding-top: 1%;
      background-color: #000;
    }
    .macbook-content {
      position: relative;
      overflow: hidden;
      box-shadow: inset 0px 0px 6px #222;
    }
    
    .macbook-content1 {
      background-image: url("../img/cs.png");
    }
    .macbook-content2 {
      background-image: url("../img/xyz.png");
    }
    .macbook-content3 {
      background-image: url("../img/abc.png");
    }
    .macbook-content4 {
      background-image: url("../img/def.png");
    }
    .macbook-content5 {
      background-image: url("../img/ghi.png");
    }
    
    .macbook-content6 {
      background-image: url("../img/jkl.png");
    }
    
    
    .macbook-content:before {
      display: block;
      content: '';
      width: 1px;
      padding-top: 60%;
      float: left;
    }
    .macbook-content:after {
      display: block;
      content: '';
      clear: both;
    }
    
    .macbook:not(:hover) .macbook-lid {
      -webkit-transform: rotate3d(-1, 0, 0, 91deg);
      -moz-transform: rotate3d(-1, 0, 0, 91deg);
      transform: rotate3d(-1, 0, 0, 91deg);
    }
    .macbook:not(:hover) .macbook-lid:before {
      width: 94%;
    }

 <div class="row">
        <div class="col-md-3">
              <div class="macbook">
                <div class="macbook-lid">
                  <div class="macbook-screen">
                    <div class="macbook-content macbook-content1">
                  
                    </div>
                  </div>
                </div>
                <div class="macbook-base"></div>
              </div>
        </div>
        <div class="col-md-9">
          <div class="website-description text-content-yellow">
            <h1>EYE- Name</h1>
            <p>Description</p>
            </div>

        </div>
      </div>

Answer 1

仅通过 CSS 无法做到这一点。

但是您可以通过 Waypoints library 轻松完成此操作

var waypoint = new Waypoint({
  element: document.getElementById('yourElement'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!');
  }
})

或者使用 jQuery

var waypoints = $('.col-md-3').waypoint({
  handler: function(direction) {
    $('.col-md-3').addClass('inview');
  }
})

---

编辑

但是，为了教育目的，这里是一个从头开始构建的解决方案，与库无关，并且易于使用。

var getPoints = function($el, wt){
  return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}

var cm = function checkMilestones() {
  var wt = $(window).scrollTop();


  if(getPoints($('.col-md-3'), wt)){
    //check if your element is in view
    $('.col-md-3').addClass('inview');
  } else if (getPoints($('.col-md-9'), wt)){
    //if your another element is in view
    $('.col-md-9').addClass('inview');
  }
};

$(document).on('ready', cm);
$(window).on('scroll', cm);

实现

就您的情况而言，您应该这样做:

使用类代替 :not(:hover)

.macbook.closed .macbook-lid {
  -webkit-transform: rotate3d(-1, 0, 0, 91deg);
  -moz-transform: rotate3d(-1, 0, 0, 91deg);
  transform: rotate3d(-1, 0, 0, 91deg);
}

将此类放入您的 div 中

<div class="macbook closed">

并像这样使用你的js:

var getPoints = function($el, wt){
  return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}

var cm = function checkMilestones() {
  var wt = $(window).scrollTop();


  if(getPoints($('.macbook'), wt)){
    //check if your element is in view
    $('.macbook').removeClass('closed');
  } else if (getPoints($('.anotherElement'), wt)){
    //if your another element is in view
    $('.anotherElement').removeClass('removeClass');
  }
};

$(document).on('ready', cm);
$(window).on('scroll', cm);