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

当每个元素滚动到视图中时，我试图激活这个涉及CSS 3d变换的小CSS动画。当滚动到位时，笔记本电脑需要打开和关闭。有没有办法只用CSS就可以做到这一点？如果不是，Jquery的答案也会很有帮助！ 代码如下

/*Css代码*/
.macbook{
宽度：300px；
保证金：50px自动；
-webkit透视图：750；
-webkit透视图来源：50%底部；
-webkit变换样式：保留-3d；
-moz透视图：750px；
-moz透视原点：50%底部；
-moz变换样式：preserve-3d；
前景：750；
透视原点：50%底部；
变换样式：保留-3d；
}
.macbook盒盖{
宽度：80%；
保证金：0自动；
-webkit变换原点：50%底部；
-webkit变换样式：保留-3d；
-moz变换原点：50%底部；
-moz变换样式：preserve-3d；
变换原点：50%底部；
变换样式：保留-3d；
-webkit转换：所有1；
-moz转换：所有1；
过渡：所有1；
}
.macbook lid:以前{
显示：块；
内容：''；
宽度：92%；
保证金：0自动；
填充：2%3%03%；
背景色：#D3D1D2；
边界半径：10px 10px 0；
-webkit变换原点：50%底部；
-webkit变换：旋转3D（1,0,0,90度）；
-moz变换原点：50%底部；
-莫兹变换：旋转3d（1,0,0,90度）；
变换原点：50%底部；
变换：旋转3d（1,0,0,90度）；
-webkit转换：所有1；
-moz转换：所有1；
过渡：所有1；
}
.macbook屏幕{
位置：相对位置；
背景色：#3535；
保证金：0自动；
填充：3%；
边界半径：5px5px0；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
-webkit转换：所有1；
-moz转换：所有1；
过渡：所有1；
}
.macbook屏幕：之前{
显示：块；
内容：''；
位置：绝对位置；
最高：2%；
左：49%；
宽度：1%；
垫面：1%；
背景色：#000；
}
.macbook内容{
位置：相对位置；
溢出：隐藏；
盒影：插图0px 0px 6px#222；
}
.macbook-content1{
背景图片：url（“../img/cs.png”）；
}
.macbook-content2{
背景图像：url（“../img/xyz.png”）；
}
.macbook-content3{
背景图片：url（“../img/abc.png”）；
}
.macbook-content4{
背景图像：url（“../img/def.png”）；
}
.macbook-content5{
背景图片：url（“../img/ghi.png”）；
}
.macbook-content6{
背景图片：url（“../img/jkl.png”）；
}
.macbook内容：以前{
显示：块；
内容：''；
宽度：1px；
垫面：60%；
浮动：左；
}
.macbook内容：之后{
显示：块；
内容：''；
明确：两者皆有；
}
.macbook:不（：悬停）。macbook盖{
-webkit变换：旋转3D（-1,0,0,91度）；
-莫兹变换：旋转3d（-1,0,0,91度）；
变换：旋转3d（-1,0,0,91度）；
}
.macbook:不（：悬停）。macbook盖：之前{
宽度：94%；
}

眼名
描述

仅通过CSS无法做到这一点

但是你可以通过

或者使用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);

把这门课放在你的课上

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

var getPoints=函数（$el，wt）{
返回（wt>（$el.offset（）.top-（$（window.height（）/2））和&wt<（$el.offset（）.top）+$el.height（））；
}
var cm=功能检查里程碑（）{
var wt=$（window.scrollTop（）；
如果（获取点（$（'.macbook'），wt））{
//检查元素是否在视图中
$（'.macbook'）.removeClass（'closed'）；
}else if（获取点（$（'.anotherElement'），wt））{
//如果您的另一个元素在视图中
$（'.anotherElement'）.removeClass（'removeClass'）；
}
};
$（文件）。在（'ready'，cm）上；
$（窗口）。打开（'滚动'，厘米）；

这似乎有效。我为显示的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");
        }
    });
});

$（窗口）。滚动（函数（）{
$（'.macbook'）。每个（函数（）{
var imagePos=$（this）.offset（）.top；
var imageHeight=$（this.height（）；
var topOfWindow=$（window.scrollTop（）；
if（imagePostopOfWindow）{
$（此）.removeClass（“macbook-1”）；
}否则{
$（此）.addClass（“macbook-1”）；
}
if（imagePostopOfWindow）{
$（此）.removeClass（“macbook-2”）；
}否则{
$（此）.addClass（“macbook-2”）；
}
if（imagePostopOfWindow）{
$（此）.removeClass（“macbook-3”）；
}否则{
$（此）.addClass（“macbook-3”）；
}
if（imagePostopOfWindow）{
$（此）.removeClass（“macbook-4”）；
}否则{
$（此）.addClass（“macbook-4”）；
}
if（imagePostopOfWindow）{
$（此）.removeClass（“macbook-5”）；
}否则{
$（此）.addClass（“macbook-5”）；
}
如果（imagePosvar 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);

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