在元素后滚动时使图像饱和 [英] Desaturate image when scrolling behind an element

问题描述

我有一个在画布上有可能吗"的问题.假设我在页面上设置了固定的div元素，并为其设置了背景色并将其设置为不透明.现在，当另一个元素(图像)向后滚动时，可以通过顶部的固定div看到它.

现在，我想执行此操作，除了后面的全彩色图像将在顶部div覆盖它的地方降低饱和度(即变为不透明的灰度).我找不到使用CSS3可以完成此操作的任何方法，也似乎不可能直接使用JavaScript来操纵像素.

所以我想我想知道canvas元素是否可以检测标准的重叠DOM元素并将其重新绘制在表面上.还是有其他方法可以解决这个问题?我不想将整个页面作为画布(对于非html5浏览器)，并且不能选择使用Flash.

非常感谢您的想法.

解决方案

这对我很有趣，因此我实现了一个解决方案.

请参见: 去饱和(

CSS:

  html，正文{边距:0;填充:0}身体 {背景:#eee}.内容 {宽度:300像素；保证金:0自动}#固定的 {背景:url(http://i.stack.imgur.com/GKWv7.png);红色;字体:36px sans-serif;文字对齐:居中}.fixedDimensions {高度:200px；位置:固定；最高:0;左:0；正确:0；溢出:隐藏；z索引:100；} 

HTML:

 < div id ="fixed"class ="fixedDimensions"> Hello</div>< div id =容器">< div class =内容">< p>< div class =魔术"style ="width:200px; height:300px; background:url(http://i.stack.imgur.com/b3LRY.jpg)"</div></p>< p> Lorem ipsum dolor ...</p>< p>< div class =魔术"style ="width:225px; height:300px; background:url(http://i.stack.imgur.com/6D8gh.jpg)"</div></p>p Aenean et diam dui./p..</div></div> 

I have an 'Is this possible on a canvas' question. Say I have a fixed div element on the page with it's background color set and make it opaque. Now when another element (an image) scrolls behind, it can be seen through the fixed div on top.

Now, I'd like to do this, except the full color image behind will desaturate (i.e. become opaque, greyscale) where the top div is covering it. I can't find any way this can be done with CSS3, nor does it seem possible to manipulate pixels with straight up javascript.

So I guess I'm wondering if the canvas element can detect standard overlapping DOM elements and redraw them on the surface. Or are there any other ways to tackle this? I don't want to make the whole page a canvas (for non html5 browsers), and flash is not an option.

Your thoughts are much appreciated.

解决方案

This was interesting to me, so I implemented a solution.

See: http://jsfiddle.net/3eHmD/show/ (edit)

• It will work in "all browsers".

• It uses jQuery.

• It uses pre-rendered images:

• It doesn't have to use pre-rendered images. To avoid pre-rendering, I'd use Pixastic's desaturate (http://www.pixastic.com/lib/docs/actions/desaturate/).

JavaScript: (could be improved)

var $fixed = $('.fixed');
var $source = $('.content');

var $fixedCopy = $('<div class="fixedDimensions"></div>').appendTo('body').css('zIndex', 99);
var $contentCopy = $source.clone().appendTo($fixedCopy);


$contentCopy.find(':not(.magic)').css('visibility', 'hidden');
$contentCopy.find('.magic').each(function() {
    $(this).css('backgroundPosition', $(this).width() + 'px 0');
});

$(window).scroll(function(e) {
    $contentCopy.css('margin-top',-$(window).scrollTop());
}).scroll();

CSS:

html, body {
    margin: 0;
    padding: 0
}
body {
    background: #eee
}

.content {
    width: 300px;
    margin: 0 auto
}
#fixed {
    background: url(http://i.stack.imgur.com/GKWv7.png);
    color: red;
    font: 36px sans-serif;
    text-align: center
}
.fixedDimensions {
    height: 200px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 100;
}

HTML:

<div id="fixed" class="fixedDimensions">Hello</div>

<div id="container">
    <div class="content">
        <p><div class="magic" style="width:200px;height:300px;background:url(http://i.stack.imgur.com/b3LRY.jpg)"></div></p>
        <p>Lorem ipsum dolor...</p>
        <p><div class="magic" style="width:225px;height:300px;background:url(http://i.stack.imgur.com/6D8gh.jpg)"></div></p>
        <p>Aenean et diam dui..</p>
        ..
    </div>
</div>

这篇关于在元素后滚动时使图像饱和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！