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

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库轻松编译

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");
        }
    });
});