使用css和滾動動畫創建一個僞對角線掩模

我正在努力創建一個效果，當滾動完成時，會出現一個對角線並顯示其中的內容，但給出內容正常流動的想法。。使用css和滾動動畫創建一個僞對角線掩模

在圖像下面我想你可以更好的瞭解：

CSS代碼：

#diagonal{ 
    background: url("/img/bg-dark.jpg") #000; 
    transform: skew(45deg); 
    -ms-transform: skew(45deg); 
    -webkit-transform: skew(45deg); 
    -webkit-backface-visibility: hidden; 
    outline: 1px solid transparent; 
    -o-transform: skew(45deg); 
    -moz-transform: skew(45deg); 
    position: fixed; 
    overflow: hidden; 
    z-index:0; 
    width: 300%; 
    height: 300%; 
    right: -600%; 
    top: 0%; 
} 
body{ 
    background: #fff url("/img/bg.jpg"); 
    font-family: "Lato",sans-serif; 
    font-size: 13px; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    position: relative; 
}

問題1：寫入「lorem ipsum ...」div的內容必須只出現在黑暗中，就好像在這個對角線和一個溢出：隱藏。

問題2：它對角線是一個具有固定位置的div，然後使它覆蓋整個屏幕我使用滾動來改變留給他的屬性。如果我把內容放到對角線上，我將不得不補償內容div中對角線的移動（以給人一種他總是在屏幕中心的印象）。

問題3：對角線是用屬性偏斜完成的;將內容放置在其中，必須補償偏斜，並且保持內容在中心的對角線需要左側的值根據其內容的「位置」而變化（因爲距離頂部大於下部）。

可能的解決辦法： 我做了很多測試一下吧，什麼我走近，是創建一個div廣場（直）到對角線，把裏面的內容。所以左邊的屬性不必因直線而變化。在這方面，我無法解決的問題是確切的計算方法，將內容保留在屏幕中央，而對角線則滑向一側（從右到左）。

任何人都見過這樣的事情，或知道如何幫助我？

謝謝

來源

2013-04-25 Bruno Serra

我更新的問題！ – 2013-04-25 15:18:31

你可以採取的position: relative;優勢，並利用z-index，使這些元素脫穎而出：

.cover { 
    z-index: 2; 
} 

.above { 
    position: relative; 
    z-index: 3; 
}

這裏有一個演示：http://jsfiddle.net/83Wyy/931/

來源

2013-04-25 04:23:57 Blender

嗨攪拌機，在這種情況下，我需要把一個背景圖像的對角線和對角線是在「白色區域」而不是相反。我用我的css代碼更新了我的問題！感謝您的回覆 ;） – 2013-04-25 15:16:27

使用css和滾動動畫創建一個僞對角線掩模

回答

相關問題