What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

How is SO doing this? I tried looking around the site, but can't figure it out.

share|improve this question

migrated from stackoverflow.com Apr 1 '11 at 14:44

This question came from our site for professional and enthusiast programmers.

    
What animation? Are you talking about the unicorn that shows today :-) –  Darin Dimitrov Apr 1 '11 at 11:59
2  
Have you downloaded their javascript library yet? –  S.Lott Apr 1 '11 at 11:59
4  
you want us to press the vote up button to see animation right? :) –  Niels P. Apr 1 '11 at 11:59
6  
@Polybos, you can also press the Vote Down button to see it :-) –  Darin Dimitrov Apr 1 '11 at 12:00
6  
Note to those who vote to close : I don't think this question belongs on meta, as it's asking how this is done technicaly –  Pascal MARTIN Apr 1 '11 at 12:01
1  
@Darin That would be too wicked –  Niels P. Apr 1 '11 at 12:02
1  
This is going to be one great question tomorrow when the unicorn goes home. –  gbjbaanb Apr 1 '11 at 12:03
    
@Darin Dimitrov... yes –  user279521 Apr 1 '11 at 12:54
    
S.Lott ..... yes I did –  user279521 Apr 1 '11 at 12:54
    
Why is this question off topic (according to 3 ppl who voted to close this) ? –  user279521 Apr 1 '11 at 12:55
1  
IMHO, this question fits better on SO proper! –  fretje Apr 1 '11 at 15:09

3 Answers 3

With jQuery.

$(a).find(".vote-up-off").unbind("click").click(function(){ax($(this))});

UPDATE: The click-handler then just adds an absolutely positioned div with image background:

<div style="width:120px; height: 120px; 
background-image:url(http://sstatic.net/img/uni/balloon.png); 
position: absolute; top: 153px; left: 283px;">/</div>

Now the interesting part is that it isn't an animated gif as I would expect, but one "long" png glued from the animation frames. I guess the animation is made by changing the background-position.

share|improve this answer

Probably deobfucate question.a.js

var evaluator = (function() {
    var t = false,
        n;
    (function() {
        var a = $("script[src*='/js/master.']:first");
        if (a.length == 0) {
            n = "/content/img/uni/"
        } else {
            n = a.attr("src").replace(/\/js\/master\..*$/, "/img/uni/")
        }
    })();

    function z(b) {
        var a = $.Deferred();
        var d = $("<img />").attr("src", n + b).css({
            position: "fixed",
            top: 0,
            left: 0,
            width: 1,
            height: 1
        }).appendTo("body");
        if (d[0].complete) {
            d.remove();
            a.resolve()
        } else {
            var e = false;
            d.bind("load readystatechange", function c(f) {
                if (!(this.complete || (this.readyState == "complete" && f.type == "readystatechange"))) {
                    return
                }
                if (e) {
                    return
                }
                e = true;
                d.unbind("load readystatechange", c);
                d.remove();
                a.resolve()
            })
        }
        return a.promise()
    }
    function y(b, f, g, e, a, c) {
        var d = $("<div />").css({
            width: e,
            height: a,
            backgroundImage: "url(" + n + b + ")",
            position: "absolute",
            top: g,
            left: f,
            display: "none"
        }).appendTo("body");
        if (!c) {
            d.fadeIn()
        }
        d.set = function(h) {
            this.css("background-position", "0px " + (-a * h) + "px")
        };
        d.finish = function(h) {
            this.fadeOut(function() {
                $(this).remove();
                if (h) {
                    h()
                }
            })
        };
        return d
    }
    function o(a) {
        var d = "kick.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left - 100, h.top - 40, 151, 100),
                f = 0,
                e = setInterval(function() {
                    g.set(f++);
                    if (f == 11) {
                        a.css({
                            position: "relative"
                        }).animate({
                            left: 400,
                            top: -100
                        }, 1000, "linear").animate({
                            left: 600,
                            top: 50
                        }, 500, "linear").animate({
                            left: 0,
                            top: 0
                        }, 1500, "linear", function() {
                            t = false
                        })
                    }
                    if (f == 20) {
                        clearInterval(e);
                        g.finish()
                    }
                }, 150)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function p(a) {
        var d = "kiss.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left - 100, h.top - 50, 172, 100),
                f = 0,
                e = setInterval(function() {
                    g.set(f++);
                    if (f == 20) {
                        clearInterval(e);
                        g.finish(function() {
                            t = false
                        })
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function s(a) {
        var d = "thumbsup.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left, h.top + 50, 80, 120),
                f = 0,
                e = setInterval(function() {
                    g.set(f++);
                    if (f == 20) {
                        clearInterval(e);
                        setTimeout(function() {
                            g.finish(function() {
                                t = false
                                })
                        }, 2000)
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function u(a) {
        var d = "balloon.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left - 60, h.top - 80, 120, 101),
                f = 0,
                e = setInterval(function() {
                    g.set(f++);
                    g.css("left", h.left - 60 - f);
                    if (f == 20) {
                        clearInterval(e);
                        setTimeout(function() {
                            g.finish(function() {
                                t = false
                            })
                        }, 2000)
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function r(a) {
        var d = "shakehead.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left - 50, h.top - 20, 125, 150),
                f = 0,
                e = setInterval(function() {
                    f++;
                    var i = f % 18;
                    if (i > 9) {
                        i = 17 - i
                    }
                    g.set(i);
                    if (f == 40) {
                        clearInterval(e);
                        g.finish(function() {
                            t = false
                        })
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function v(a) {
        var d = "cancan.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left - 130, h.top - 20, 120, 117),
                f = 0,
                e = setInterval(function() {
                    f++;
                    var i = f % 29;
                    if (i > 14) {
                        i = 29 - i
                    }
                    g.set(i);
                    if (f == 80) {
                        clearInterval(e);
                        g.finish(function() {
                            t = false
                        })
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function q(a) {
        var e = "saber.png",
            c = parseInt(a.css("font-size"));
        var b = function() {
            t = true;
            var i = a.offset(),
                h = y(e, i.left - 80, i.top - 40, 120, 108),
                g = 0,
                f = setInterval(function() {
                    g++;
                    var j = g - 3;
                    if (j > 19) {
                        j = 18 - (j - 20) % 8;
                        if (j < 15) {
                            j = 30 - j
                        }
                    }
                    if (g == 13) {
                        a.animate({
                            fontSize: 0
                        })
                    }
                    h.set(Math.max(0, j));
                    if (g == 40) {
                        clearInterval(f);
                        a.animate({
                            "font-size": c
                        }, 1000);
                        h.finish(function() {
                            t = false
                        })
                    }
                }, 150)
        };
        var d = z(e);
        d.run = b;
        return d
    }
    function w(a) {
        var d = "charging.png";
        var c = function() {
            t = true;
            a.css({
                position: "relative"
            });
            var h = a.offset(),
                i = $(window).width() - 140,
                g = y(d, i, h.top - 20, 140, 102),
                f = 0,
                e = setInterval(function() {
                    f++;
                    i -= 20;
                    if (i < h.left + 30) {
                        a.css("left", i - h.left - 30)
                    }
                    g.set(f % 15);
                    g.css("left", i);
                    if (i < -140) {
                        clearInterval(e);
                        setTimeout(function() {
                            a.hide().css("left", 0).fadeIn("slow")
                        }, 2000);
                        g.finish(function() {
                            t = false
                        })
                    }
                }, 50)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    function x(a) {
        var d = "dart.png";
        var c = function() {
            t = true;
            var h = a.offset(),
                g = y(d, h.left + 300, h.top - 130, 100, 114),
                f = 0,
                e = setInterval(function() {
                    g.set(f++);
                    if (f == 18) {
                        horn = y(d, h.left + 290, h.top - 40, 15, 12, true);
                        horn.set(159);
                        horn.show().animate({
                            left: h.left + 30,
                            top: h.top + 15
                        }, 700, "linear")
                    }
                    if (f == 20) {
                        clearInterval(e);
                        setTimeout(function() {
                            g.finish();
                            horn.finish(function() {
                                t = false
                            })
                        }, 2000)
                    }
                }, 100)
        };
        var b = z(d);
        b.run = c;
        return b
    }
    return function(d, c) {
        if (t) {
            return null
        }
            var e;
        var f = [u, v, s, p];
        var b = [q, w, x, r, o];
        var a = c ? f : b;
        e = a[Math.floor(Math.random() * a.length)](d);
        if (e && !e.cancel) {
            e.cancel = function() {}
        }
        return e
    }
})();
share|improve this answer
1  
looks like I forgot a var for horn :) –  balpha Apr 1 '11 at 14:51

The interesting part is the

WHY PINK? :D

share|improve this answer
1  
Because they're unicorns –  freiheit Apr 1 '11 at 16:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .