CSS/JS漸變式不透明度淡出內容

我想知道是否有淡入淡出（如漸變）iframe和其內容的不透明度的方法。這很難解釋，所以一個常見的例子將在山獅或iOs的通知中心底部。CSS/JS漸變式不透明度淡出內容

整個想法是，當用戶向下滾動（在iframe中）時，內容在底部「淡出」，並且不會用直線切斷。

不知道這是可能的CSS或Javascript。

任何幫助是極大的讚賞。謝謝

來源

2012-08-14 user1599318

如果我理解正確的話，你想是這樣的： https://dl.dropbox.com/u/73603348/fadeout.html

我過去所做的就是在滾動內容的底部創建一個覆蓋元件。很簡單。

的標記：

<div class="content"> 
    <div class="container"> 
     [ content here ] 
    </div> 
    <div class="fader"></div> 
</div>

風格：

.content { 
    width: 600px; 
    background: #fff; 
    margin: 50px auto 0; 
    overflow: auto; 
    position: relative; 
} 

.container { 
    height: 500px; 
    overflow: auto; 
    padding: 10px; 
    background: #ccc; 
} 

.fader { 
    position: absolute; 
    content: ''; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff); 
}

來源

2012-08-14 22:34:02 wavetree

對不起，但是在哪裏淡出？ – Chris 2012-08-14 22:38:27

完美！這正是我的意思。謝謝您的幫助 – user1599318 2012-08-15 00:19:39

您可以使用jQuery。例如，關於如何淡出的元素：jQuery API reference about fadeOut：關於如何使用fadeOut

$("#your_iframe_id").fadeOut();

的更多細節。

來源

2012-08-14 22:28:00 Chris

我實際上並不需要淡出內容作爲動畫，我需要基本模糊邊框 - 如果這有什麼意義？ – user1599318 2012-08-14 23:00:45

@ user1599318對不起，我很難明白你的意思。你有什麼應該發生的地方的例子嗎？ – Chris 2012-08-14 23:05:34

以防萬一你不希望加載整個jQuery庫，您可以編寫自己的函數來進行淡出。這是我自己嘗試寫這樣的功能：

var ifrm = document.getElementById("your_frame"); //find your frame 
function fadeOut(var duration) { //duration: how many millseconds you want the effect to take 
    var step = 10/duration; //step is how much the opacity will change each 10 milliseconds 
    var curOpacity = 1; //at first the iframe is fully opaque. 
    function animate() { 
     if(curOpacity < step) { 
      ifrm.style.opacity = 0; //we're done 
      return; 
     } 
     ifrm.style.opacity = curOpacity; 
     curOpacity -= step; 
     setTimeout(animate, 10); //wait 10 millseconds and move to next step of animation 
    } 
    animate(); 
}

因此，假設你想淡出1秒鐘，則初始淡出函數調用將是：fadeOut(1000);。

再次，我希望這對你有所幫助。

來源

2012-08-14 22:50:27 Chris

CSS/JS漸變式不透明度淡出內容

回答

相關問題