De H1 van deze pagina (met de tekst kompoos___) heeft een id met de naam "nudge" gekregen. Wat dit teweeg brengt is hierboven te zien. Als je ook een nudge op jouw pagina('s) wilt gebruiken, moet je het onderstaande javascript zo laag als mogelijk op een pagina van jou plaatsen, en één of andere tag (met tekst daarin) het id "nudge" geven. Bij de functie eerste_letter() (in het script), zie je document.getElementById("n2") staan. De "n2" betekent dat de 3e letter het "kick"-effect heeft. Wil je de eerste letter het effect geven, verander je de "n2" in "n0".
<script>
/*global document: false */
/*global setTimeout: false */
var nudge_tekst = "KOMPOOS_____";
var nudge_text_array = [-1,-4,-7,-10,-7,-4,-1];
var letter_nummer = 0,
nudge_object, object_links, jump_nudge, i, letter_nummer_2 = 0,
tekst_nudge = "";
function volgende_letter() {
object_links.style.left = -letter_nummer_2 + "px";
if (letter_nummer_2 !== 0) {
letter_nummer_2 = letter_nummer_2 - 3;
setTimeout(function () {
volgende_letter();
}, 10);
} else {
jump_nudge();}}
function eerste_letter() {
object_links = document.getElementById("n2");
object_links.style.left = -letter_nummer_2 + "px";
if (letter_nummer_2 !== 45) {
letter_nummer_2 = letter_nummer_2 + 3;
setTimeout(function () {
eerste_letter();
}, 50);
} else {
volgende_letter();}}
function nudge_jump() {
if (nudge_tekst.length > 6) {
for (i = 0; i !== nudge_tekst.length; i++) {
tekst_nudge = tekst_nudge + "<span style='position:relative;' id='n" + i + "'>" + nudge_tekst.charAt(i) + "</span>";
}
nudge_object.innerHTML = tekst_nudge;
tekst_nudge = "";
eerste_letter();}}
function jump_nudge() {
tekst_nudge = "";
for (i = 0; i !== nudge_tekst.length; i++) {
if (i + letter_nummer > -1 && i + letter_nummer < 7) {
tekst_nudge = tekst_nudge + "<span style='position:relative;top:" + nudge_text_array[i + letter_nummer] + "px '>" + nudge_tekst.charAt(i) + "</span>";
} else {
tekst_nudge = tekst_nudge + "<span>" + nudge_tekst.charAt(i) + "</span>";}}
nudge_object.innerHTML = tekst_nudge;
tekst_nudge = "";
if (letter_nummer !== (-nudge_tekst.length)) {
letter_nummer--;
setTimeout(function () {
jump_nudge();
}, 50);
} else {
letter_nummer = 0;
setTimeout(function () {
nudge_jump();
}, 50);}}
nudge_object = document.getElementById("nudge");
nudge_jump();
</script>