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渐变式不透明度淡出内容

回答

相关问题