修改

Question

我正在尝试激活这个涉及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);

Answer 2

这似乎有效。我已经为显示的7个独立元素添加了单独的类

$(window).scroll(function () {
    $('.macbook').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-1");
        } else {
            $(this).addClass("macbook-1");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-2");
        } else {
            $(this).addClass("macbook-2");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-3");
        } else {
            $(this).addClass("macbook-3");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-4");
        } else {
            $(this).addClass("macbook-4");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-5");
        } else {
            $(this).addClass("macbook-5");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-6");
        } else {
            $(this).addClass("macbook-6");
        }
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).removeClass("macbook-7");
        } else {
            $(this).addClass("macbook-7");
        }
    });
});

当元素滚动到视口时激活CSS 3d变换

2 个答案:

修改

实施