Skip to content

Instantly share code, notes, and snippets.

@Lanny
Created June 14, 2014 02:20
Show Gist options
  • Save Lanny/ff7f7e683a884bdbffae to your computer and use it in GitHub Desktop.
Save Lanny/ff7f7e683a884bdbffae to your computer and use it in GitHub Desktop.
Because accessibility is for dweebs
var wordPool
;(function() {
EFFECT_DISTANCE = 100
MAGNITUDE_COEFFICIENT = 2.5
function distance(p1, p2) {
var asq = Math.pow(p1.top - p2.top, 2)
bsq = Math.pow(p1.left - p2.left, 2)
return Math.sqrt(asq + bsq)
}
function pool(el) {
el = $(el || 'body')
var paras = el.find('.word-pool')
for (var i=0; i<paras.length; i++) {
var para = $(paras[i]),
newPara = para.clone().empty(),
words = para.text().split(/[ \n]+/)
for (var k=0; k<words.length; k++) {
$('<span class="pool-word">')
.text(words[k] + ' ')
.appendTo(newPara)
}
para.css('visibility', 'hidden')
newPara.insertBefore(para)
var domWords = newPara.find('.pool-word')
for (var k=domWords.length-1; k>=0; k--) {
var word = $(domWords[k]),
basePosition = word.position(),
css = $.extend(basePosition, {position: 'absolute'})
word.css(css)
.data('basePosition', basePosition)
}
}
el.on('mousemove', function(e) {
update(e.pageX, e.pageY)
})
;(function rePlace() {
place()
requestAnimationFrame(rePlace)
})()
}
var wordPoolWords;
function update(mouseX, mouseY) {
var wordPoolWords = wordPoolWords || $('.pool-word'),
mousePos = {'top': mouseY, 'left': mouseX}
for (var i=wordPoolWords.length-1; i>=0; i--) {
var word = $(wordPoolWords[i]),
basePos = word.data('basePosition'),
dX = basePos.left - mouseX,
dY = basePos.top - mouseY,
dist = distance(mousePos, basePos)
if (dist < EFFECT_DISTANCE) {
var offsetMagnitude = Math.sqrt(EFFECT_DISTANCE - dist)
* MAGNITUDE_COEFFICIENT,
offsetAngle = Math.atan2(dY, dX),
targetX = basePos.left + Math.cos(offsetAngle) * offsetMagnitude,
targetY = basePos.top + Math.sin(offsetAngle) * offsetMagnitude
word.data('targetPos', {'top': targetY, 'left': targetX})
} else {
word.data('targetPos', basePos)
}
}
}
function place() {
var wordPoolWords = wordPoolWords || $('.pool-word')
for (var i=wordPoolWords.length-1; i>=0; i--) {
var word = $(wordPoolWords[i]),
curPos = word.position(),
trgPos = word.data('targetPos') || curPos,
newPos = {
'top': curPos.top + (trgPos.top - curPos.top)/5,
'left': curPos.left + (trgPos.left - curPos.left)/5
}
word.css(newPos)
}
}
wordPool = {'pool': pool}
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment