元素滾動到視口時激活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");
        }
    });
});