垂直滑過整個頁面

我正在一個項目中，我需要一個半透明的div在特定點上移動整個頁面。我目前有一個版本，但並不像我希望的那樣流暢。垂直滑過整個頁面

jQuery的從上面的例子：

var windowWidth = $(window).innerWidth(); 
var windowHeight = $(window).innerHeight(); 

function blackOut() { 
    $('#fail-screen').css({ 
     "width": windowWidth + "px", 
      "height": windowHeight + "px" 
    }); 

    $('#fail-screen').delay(1000).animate({ 
     top: '0px' 
    }, 1000, 'linear'); 
} 



$(document).ready(function() { 
    blackOut(windowWidth, windowHeight); 
});

，你可以看到，我發現了innerWidth和高度設置「故障屏幕」分區，因爲它設置爲100％WASN行不通。我使用jQuery來設置「失敗屏幕」div的頂部位置。

再次，我只是想重構這段代碼，並提高整體表現和性能。我願意使用動畫/物理圖書館，如果有人知道任何在這裏使用會很好。

感謝您的任何建議。

來源

2014-12-01 unfollow

如果你在其中使用了一些CSS3轉換，比如'transition：all .25s ease;'等，你可能會發現更好的性能。讓瀏覽器處理CSS3轉換的硬件渲染將使您的表現比使用$完成的數學更平滑。動畫。 – Jason 2014-12-01 18:02:37

正如@Jason所提到的，我強烈建議使用CSS轉換而不是擺弄偏移。這不僅是CSS轉換卸載到GPU（由需要時由瀏覽器智能確定，但你也可以強制它），但它允許子像素渲染。 Paul Irish published a rather good write-up回到2012年。

此外，您的代碼有點問題，它無法處理視口大小調整事件。事實上，一個更直接的解決方案就是簡單地使用position: fixed，然後利用CSS轉換來拖延一段時間後才能看到元素。

見更新小提琴這裏：http://jsfiddle.net/teddyrised/27e310e8/2/

對於JS，我們只需使用.css()方法。延遲，動畫持續時間，甚至定時功能都可以通過CSS輕鬆完成。

新的JS比較簡單：我們設置#fail-screen的變換，以便我們將其移回原始的垂直位置。 jQuery的自動地前綴的transform屬性;）

$(document).ready(function() { 
    $('#fail-screen').css({ 
     'transform': 'translateY(0)' 
    }); 
});

對於CSS，我們最初設定爲-100％的垂直平移（translateY），這意味着我們通過其自身的高度向上推元件。使用固定位置並將所有四個偏移量聲明爲0，我們可以強制元素填充視口，而無需通過JS監聽窗口大小調整事件的任何高級攻擊。請記住，您將不得不向transform屬性添加供應商前綴以最大化跨瀏覽器兼容性。

CSS還可以處理轉換延遲，持續時間甚至定時功能，即transition: [property] [duration] [timing-function] [delay];由於在jQuery代碼中，您已將duration和delay設置爲500ms，因此它應該是transition: all 0.5s linear 0.5s。但是，線性定時功能看起來不太好 - 也許使用ease-in-out會更好，甚至可能是自定義cubic-bezier curve？

此外，我建議將不透明度移動到background-color的值，只是因爲如果您在元素本身設置了不透明度，則所有子節點也將呈現爲0.6不透明度，也可能是您不需要的東西想要實現。

#fail-screen{ 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background-color: rgba(0,0,0,.6); /* Moved opacity to background-color */ 
    position: fixed;     /* Use fixed positioning */ 
    z-index: 303; 

    /* Use CSS transform to move the element up by its own height */ 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    -o-transform: translateY(-100%); 
    transform: translateY(-100%); 

    /* CSS transition */ 
    transition: all .5s ease-in-out .5s; 
}

來源

2014-12-01 18:06:52 Terry

垂直滑過整個頁面

回答

相關問題