滚动的半色图标

Question

我有一个固定的透明标题，有一系列的图标。 默认情况下，图标为白色，但是当我向下滚动页面时，图标会改变颜色以便可以看到它们，例如在悬停白色背景时变黑等。

我通过将数据属性应用于页面的每个部分来实现此目的：

data-header-class="header--white"

然后使用jQuery：

$(window).scroll(function () {
    $('.sect').each(function () {
        var w = $(window).scrollTop();
        var t = $(this).offset().top - (40 + 32);
        if (w > t) {
            $('.header').removeClass (function (index, css) {
                return (css.match (/(^|\s)header--\S+/g) || []).join(' ');
            });
            $('.header').addClass( $(this).attr('data-header-class') );
        }
    });
});

我将CSS类应用于标头以交换颜色。 这是一个例子： http ： //dev.driz.co.uk/iconbleed/

我正在使用字体图标和自定义CSS的组合来创建标题图标。

但是，我想要做的是让图标在滚动时将它们所覆盖的部分的颜色一半渗出。 因此，例如，如果我进入白色区域的一半，一半的图标会将颜色变为黑色，而另一半仍然是白色的（请参见下面的屏幕截图）。 图标应根据其渗出量改变颜色。

我怎样才能做到这一点？

Answer 1

您可以通过在每个行中“溢出”父div时隐藏的不同图像来实现它吗？ 不是最优雅的方式，但解决了这个问题。

https://jsfiddle.net/vLLwhzqL/

HTML：

<div class="row1">
        <div class="IMG1">
            ICON
        </div>
    </div>
    <div class="row2">
        <div class="IMG2">
            ICON
        </div>
    </div>
    <div class="row1">
        <div class="IMG3">
            ICON
        </div>
    </div>
    <div class="row2">
        <div class="IMG4">
            ICON
        </div>
    </div>
    <div class="row1">
        <div class="IMG5">
            ICON
        </div>
    </div>
    <div class="row2">
        <div class="IMG6">
            ICON
        </div>
    </div>

CSS：

.row1{
    background-color:black;
    height:500px;
    width:100%;
    overflow:hidden;
    padding-left:20px;
    font-size:50px;
    color:white;
}

.row2{
    background-color:white;
    height:500px;
    width:100%;
    overflow:hidden;
    padding-left:20px;
    font-size:50px;
    color:black;
}

JS：

$(document).ready(function() {

    var Scroll = $(window).scrollTop();
    $('.IMG1').css({'margin-top':(Scroll+20)});
    $('.IMG2').css({'margin-top':(Scroll-480)});
    $('.IMG3').css({'margin-top':(Scroll-980)});
    $('.IMG4').css({'margin-top':(Scroll-1480)});
    $('.IMG5').css({'margin-top':(Scroll-1980)});
    $('.IMG6').css({'margin-top':(Scroll-2480)});

    $(window).scroll(function() {

        var Scroll = $(window).scrollTop();
        $('.IMG1').css({'margin-top':(Scroll+20)});
        $('.IMG2').css({'margin-top':(Scroll-480)});
        $('.IMG3').css({'margin-top':(Scroll-980)});
        $('.IMG4').css({'margin-top':(Scroll-1480)});
        $('.IMG5').css({'margin-top':(Scroll-1980)});
        $('.IMG6').css({'margin-top':(Scroll-2480)});

    });
});

Answer 2

建议你想要什么。 我将它应用于图标搜索，例如：

.icon-search:before {
    background: linear-gradient( to bottom, #ccc 0%, #ccc 50%, #555 50%, #555 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

结果如下：

Answer 3

你可以使用CSS渐变

http://www.colorzilla.com/gradient-editor/

示例 ：半黑，半灰：

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,c4c4c4+100 */
background: #000000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGM0YzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #000000 0%, #c4c4c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000000 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000000 0%,#c4c4c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000000 0%,#c4c4c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #000000 0%,#c4c4c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-8 */

另外还需要IE9：

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->