Romney Tax Plan code breakdown

readme.md

came back across this recently and the site is defunkt. Looks like the internet archive captured it all at: https://web.archive.org/web/20121101005518/http://www.romneytaxplan.com/

From an old description on mashable

President Obama has reproached Mitt Romney for not providing details on his alleged "$5 trillion tax cut plan" and how he'd pay for it. Now the Democratic National Committee has launched an interactive website that builds on the Obama campaign's claims that Romney's evading the details. At romneytaxplan.com, under Romney's campaign logo and slogan, you'll read this: "For a detailed explanation of how the Romney-Ryan tax plan is able to cut taxes by $5 trillion without raising taxes on the middle class or exploding the deficit, simply click the button below." A big, red button that reads "get the details" is in the middle of the page. If you try to click it though, or if you even try to just get close to it with your mouse, the button dodges your pointer and moves around the page. At the same time, a change appears beneath the slogan "Believe in America," correcting it to "Believe in -- half of -- America." A clear jab at Romney's "47%" comment. A banner appears at the bottom of the page: "Mitt Romney has ducked and side-stepped every attempt to get the details of his plan, which sticks the middle class with the bill for $5 trillion in tax cuts favoring millionaires and billionaires. Get the facts on his plan." If you click on the last sentence, you're taken to a page on barackobama.com that criticizes Romney's proposed plan. The website was paid for by the DNC but is not endorsed by any candidate, including Obama, a dislaimer says. Obama has repeatedly mentioned this "$5 trillion tax plan," including during the first presidential debate. And Romney has continued to deny that he even has a plan to cut $5 trillion in taxes. Fact-checking website PolitiFact calls Obama's claim "half true."

sneakyRomneyBreakdown.js

/* 
  reverse-engineering the way www.romneytaxplan.com works

  I really liked the way the button at romneytaxplan.com's button worked
  so I expanded it's core.min.js and commented the functions.

  The effect is achieved by translating the <button> (using the ternary at line 65)
  and warping it using CSS (apply CSS .hovered.skew(direction) at line 77)

  Feel free to contribute!
  -Spencer

  http://jsfiddle.net/YyZy6/
*/


// Determines where pointer comes from
function getDirection(e, t) {
	var n = e.width(),
		r = e.height(),
		i = (t.x - e.offset().left - n / 2) * (n > r ? r / n : 1),
		s = (t.y - e.offset().top - r / 2) * (r > n ? n / r : 1),
		o = Math.round((Math.atan2(s, i) * (180 / Math.PI) + 180) / 90 + 3) % 4;
	switch (o) {
		case 0:
			return "top";
		case 1:
			return "right";
		case 2:
			return "bottom";
		default:
			return "left"
	}
}

// find edge proximity based on getDirection()'s return switch
function reverse(e) {
	switch (e) {
		case "top":
			return ["top", 1];
		case "bottom":
			return ["top", - 1];
		case "left":
			return ["left", 1];
		default:
			return ["left", - 1]
	}
}

// DODGE, DIP, DUCK, DIVE, DODGE!
function sneak(e, t, n, r) {

	// Here's the mystery
	/* LEARNED:
	   ~~    Math.floor()
	   n     result of reverse()
	   n[0]  "top" or "left"   -   css direction to offset from
	   n[1]  "1"   or "-1"     -   towards or away
	*/

	// strip 'px' from values, 
	var i = ~~e.css(n[0]).replace("px", ""),
		s = n[1] * distance * (n[0] === "top" ? 1 : 2),
		o = s > 0 ? n[0] === "top" ? 90 : 240 : n[0] === "top" ? -90 : -240;

	// Translate the button using e.css(axis, desination)
	i + ~~ (s * (n[0] === "top" ? 1 : xFactor)) + o > (n[0] === "top" ? wHeight() : wWidth()) ? e.css(n[0], n[0] === "top" ? "40px" : "100px") : i + ~~ (s * (n[0] === "top" ? 1 : xFactor)) - (n[0] === "top" ? 20 : 100) < 0 ? e.css(n[0], (n[0] === "top" ? wHeight() : wWidth()) + o - 40 + "px") : e.css(n[0], i + ~~ (s * (n[0] === "top" ? 1 : xFactor)) + "px");

	/* Decomposing the ternary
	i + ~~(n[0]? 1 || xFactor) + o > (n[0]? win.height || win.width) ?		// if it's going to move offscreen (offset + object_axis > window) then move to 40 or 100px
		e.css(n[0], n[0]? "40px" : "100px")
		--OR--
		i + ~~(s * n[0]? 1 || xFactor) - (n[0]? 20 || 100) < 0 ?		// but if not, then move into place
			e.css(n[0], (n[0]? win.height || win.width) + o - 40 + "px"
			--OR--
			e.css(n[0], i + ~~(s * (n[0]? 1 || xFactor)) + "px"
	*/

	e.addClass("hovered skew" + t + (n[0] === "top" ? r : ""));			// Handle skew with css using .hovered.skew(direction)
	$body.addClass("laugh");
	count++;
	(count === 6 || count === 3 && wWidth > 480) && $body.addClass("final");

	$.wait(300).then(function () {
		e.removeClass("hovered skew" + t + (n[0] === "top" ? r : ""))
	});
	$.wait(500).then(function () {
		$body.removeClass("laugh")
	})
}

// Determine where to go 
function getDodgeSide(e, t) {
	var n = e.width();
	return t.x - e.offset().left > n / 2 ? "right" : "left"
}

// Create a jQuery function to wait before executing an action
$.wait = function (e) {
	return $.Deferred(function (t) {
		setTimeout(t.resolve, e)
	})
};

// Some variables to use later
var xFactor = 1.4,
	win = $(window),
	$body = $("body"),
	wHeight = function () {
		return win.height()
	},
	wWidth = function () {
		return win.width()
	},
	distance = wWidth() < 481 ? 80 : 40,
	button = $("button"),
	count = 0;

// Event Handlers
// Finds where mouse is coming from, dodge direction, and proximity to edge
// Feeds into sneak() function
$("button").on("mouseenter", function (e) {
	var t = $(this),
	n = getDirection(t, {
		x: e.pageX,
		y: e.pageY
	}),
	r = getDodgeSide(t, {
		x: e.pageX,
		y: e.pageY
	}),
	i = reverse(n);
	sneak($(this), n, i, r)

}).on("click", function (e) {
	var t = $(this),
	n = getDirection(t, {
		x: e.pageX,
		y: e.pageY
	}),
	r = getDodgeSide(t, {
		x: e.pageX,
		y: e.pageY
	}),
	i = reverse(n);
	sneak($(this), n, i, r)

}).addClass("on").on("mouseenter", function () {
	$.wait(6e3).then(function () {
		$body.addClass("final")
	})
});

I'd love to know who whose original work this is, the site is beautiful and the code is elegant.

If you'd like me to take it down, please ask, I mostly posted this because I was curious about how it works.