CSS3 Javascript Cycle Gradient - PullRequest
Новая
       8

CSS3 Javascript Cycle Gradient

0 голосов
/ 04 ноября 2011

Я ищу что-то вроде начала / направления для реализации цикла градиента, подобного циклу антенны: http://www.theantenna.net

Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 04 ноября 2011

Это код, который выполняет цветовой цикл на упомянутом сайте: 

Module("GradientCycle", {
    bones: "<div></div>",
    noGradient: "Please use a modern browser (like Chrome, Firefox or Safari) to fully enjoy this site",
    saturation: 0.5,
    value: 1,
    angle: 120,
    loopSpeed: 50,
    webkitCSS: "-webkit-gradient(linear, left bottom, left top,color-stop(0, rgb(RGB1)),color-stop(.5, rgb(RGB2)),color-stop(1, rgb(RGB3)))",
    geckoCSS: "-moz-linear-gradient(center bottom,rgb(RGB1) 0%,rgb(RGB2) 50%,rgb(RGB3) 100%);",
    init: function() {
        this.css = this.testCSS();
        this.seed = this.hue || Math.floor(Math.random() * 360)
    },
    testCSS: function() {
        return $("html").hasClass("webkit") ? this.webkitCSS : $("html").hasClass("gecko") ? this.geckoCSS : null
    },
    setCol: function() {
        var e = (++this.seed) % 360,
            m = this.saturation,
            l = this.value,
            k = this.angle,
            j = (e + 180 + k) % 360,
            g = (e + 180 - k) % 360,
            d = hsvToRgb(e / 360, m, l),
            c = hsvToRgb(j / 360, m, l),
            b = hsvToRgb(g / 360, m, l),
            f = this.css.replace(/RGB1/, d.join(",")).replace(/RGB2/, c.join(",")).replace(/RGB3/, b.join(","));
        this.$.attr("style", "background:" + f);
        return this
    },
    start: function() {
        if (!this.css) {
            return this.$.html(this.noGradient)
        }
        this.stop();
        this.loop = setInterval($.proxy(this.setCol, this), this.loopSpeed);
        return this
    },
    stop: function() {
        clearInterval(this.loop);
        return this
    }
});

В основном все сводится к изменению цветовых значений градиентов CSS3.

...