JSFiddle

  • Blend two colors

    jQuery 2.1.0, HTML, CSS, JavaScript

    var firstColor = tinycolor("#E72D59");
    var secondColor = tinycolor("#FFCC66");
    var shades = 10;
    
    $(document).ready(function() {
       var getRange = function(startColor, targetColor, opts ...
  • Hype Text Effects

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="container">
        <h1>HYPE</h1>
    </div>
  • Title Shadow Effects

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Vidur Murali</h1>
  • Button shadow that moves on hover

    jQuery 2.1.0, HTML, CSS, JavaScript

    $('div.button').mousemove(function(e) {
        var mousePosition = {
            x: e.offsetX,
            y: e.offsetY
        };
        var elWidth = $(this).width();
        var elHeight = $(this ...
  • Button shadow that moves on hover

    jQuery 2.1.0, HTML, CSS, JavaScript

    $('div.button').mousemove(function(e) {
        var mousePosition = {
            x: e.offsetX,
            y: e.offsetY
        };
        var elWidth = $(this).width();
        var elHeight = $(this ...
  • StackOverflow Answer: Font Icon Picker Repeater Field is not working

    Question: http://stackoverflow.com/questions/27101474/font-icon-picker-repeater-field-is-not-working

    $(document).ready(function() {
        $(".icon-picker").iconPicker();
    });
  • Marka sandbox

    Play with various Marka[1] icon transformations. Assets are hotlinked. --- [1]: http://fian.my.id/marka/

    var m = new Marka('#icon');
    m.set('circle').color('#FF6600').size('50');
  • Sliding Table Columns

    Animatedly slide a table column open and closed

    var values = {
        left: ['0%', '50%'],
        right: ['100%', '50%']
    };
    var nextValue = function(side) {
        var value = values[side].shift();
        values[side].push ...
  • Random Colors generator

    jQuery 2.1.0, HTML, CSS, JavaScript

    var refreshColors = function(divs) {
        _.each( divs, function(div) {
            var color = tinycolor.random();
            $(div).animate({
                backgroundColor: color.toRgbString()
            }, 500, 'easeInOutQuint ...
  • Multiple Independent sliders

    vidur.io/for-sale

    $('.slider-control.prev').click(function() {
        var parent = $(this).parent();
        var currentSlide = parent.find('.slide.visible');
        var prevSlide = currentSlide.prev('.slide');
        var ...