4

私は javascript/jQuery にかなり慣れていませんが、自分が何をしているのかを理解するためにあらゆる努力をしています。私はディーゼルのサイトに触発されました。このサイトでは、ホームページのテキスト ブロックにデータ属性が使用されています。data-color. 私は自分のサイトでこの機能を実現したいと考えています。エントリごとに各ブロックの色を変更できるため、ユーザーがページを下にスクロールすると、別の方法でトリガーされます。

私が達成しようとしている機能に関連するチュートリアルを見たことがないので、助けを求めてここに来ました。これを行う方法を知っている人はいますか？これは、同じまたは類似の機能を実行したい人にとって役立つと思います。

getColorMod: function(color, val) {
    var hexToRgb = function(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false;
    }
    var array = hexToRgb(color),
    r = parseFloat(array[0] + val),
    g = parseFloat(array[1] + val),
    b = parseFloat(array[2] + val),
    rgb = array ? {
        r: r >= 250 ? 200 : r,
        g: g >= 250 ? 200 : g,
         b: b >= 250 ? 200 : b
    } : false;

    return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
},
4

2 に答える 2

0 
<div class="bg">
    <div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div>
</div>

選択したライブラリを使用する

これは、ディーゼルが色の遷移を実行している方法のようです.

var $bodyBg = $('<div />'),
$bg = $('<div />').addClass('bg').append($bodyBg),
$arrow = $('<span />').addClass('arrow');

this.$navs.append($bg).append($arrow);

this.$navs
.on('hide', function() {
    // hide navigation bar
    $(this).addClass('hide');
})
.on('show', function() {
    // show navigation bar
    $(this).removeClass('hide');
})
.on('changeColor', $.proxy(function(e, color) {

    var $elm = $(e.currentTarget),
        $bg = $elm.find('.bg div');

    if (Modernizr.csstransforms && Modernizr.csstransitions) {
        // css3 transition
        $bg.css({
            transition: 'background 500ms ease',
            backgroundColor: this.getColorMod(color, 12)
        });
    } else {
        // no css3 transition support
        $bg.css({
            backgroundColor: this.getColorMod(color, 12)
        });
    }

}, this))
.trigger('hide')
.appendTo(this.$el);
于 2013-05-23T13:25:16.963 に答える