4

I am fairly new to javascript/jQuery, however I am making all efforts to understand what I am doing. I was inspired by diesel's site. On this site, data attributes are used for the text blocks on the home page. data-color. I want to achieve this function on my site. Being able to change the color of each block per entry, as the user scrolls down the page, it triggers differently.

I have come on here for help as I haven't seen any tutorial in relation to the functionality I am trying to achieve. Does anyone know how this can be done? I believe this would be helpful for those that want to execute the same or a similar functionality.

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 + ')';
},
3
  • I don't see any canvas on page. All effects done via css3 transitions. Use web-debugger (for example webinspector built in Chrome) to view how exactly.
    – Tommi
    May 23, 2013 at 11:46
  • @Tommi i think you have misunderstood my question. I have edited it slightly. May 23, 2013 at 13:23
  • data- attributes is just a way to store information. Browser don't use it automatically, but you can use it from your own js code.
    – Tommi
    May 23, 2013 at 13:32

2 Answers 2

6

The HTML5 data attribute is there simply for the purpose of storing additional information within html elements. I've used it when printing various sets of data programmatic-ly to include information like user account numbers. bits of data that you may want to access with javascript or jquery

You can see a great documentation/tutorial here on the HTML5 data attribute by webtutsplus

The data-attribute is interesting because you can define one as anything you like:

     data-[NAME]="[VALUE]"
     data-color="blue"
     data-price="$19.96"

The more recent versions of jQuery also have a built in easy to use function to deal specifically with getting and setting HTML5 data-attributes - documentation here

Imagine some hypothetical html:

     <span id="fluxCapacitor" data-gigawats="1.21"></span>

Calling the .data handler on our flux capacitor jquery element would return "1.21"

     $('#fluxCapacitor').data('gigawats'); // "1.21"

And you could use two parameter functionality for setting your flux capacitor to over 9000 gigawats.

     $('#fluxCapacitor').data('gigawats', "over 9000");

Resulting in:

     <span id="fluxCapacitor" data-gigawats="over 9000"></span>

edit: adjusted my power levels for historical accuracy.

1
  • -1 for not knowing flux capacitors only require 1.21 gigawatts, and Over 9000 only applies to alien power levels. j/k, I modded this up, it's a great answer otherwise. May 24, 2013 at 3:00
0
<div class="bg">
    <div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div>
</div>

using library of your choice

This seems to be the way Diesel is performing the color transitions.

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);
1
  • you've misunderstood my question May 23, 2013 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.