Building The Haunting of Hill House Door Knob Effect in Javascript

Using Anime.js and Howler.js

Image for post
Image for post
Barely visible door knob

Assets

HTML & CSS

<img id="knob" src="knob.png">
html, body{
height: 100%;
width: 100%;
}
body{
align-items: center;
background: url(door.jpg);
background-position: center center;
background-repeat: none;
background-size: cover;
display: flex;
justify-content: center;
}
img{
cursor: pointer;
height: 48vh;
}

Javascript

let turning = false
let rotate = 0
let turns = [5380, 5750, 8800]
let sound = new Howl({
src: ['knob.mp3'],
sprite: {
turn0: [0, 5380],
turn1: [5380, 5750],
turn2: [11130, 8800]
}
})
function turn() {
let i = _.random(0,2)

let rotation = _.random(45, 100)
if (Math.random() < 0.5) {
rotate -= rotation
} else {
rotate += rotation
}
let delay = _.random(1000, 3000) anime({
targets: '#knob',
rotate: rotate,
duration: turns[i],
delay: delay,
elasticity: 0,
easing: 'linear',
begin: function() {
sound.play(`turn${i}`)
},
complete: function() {
turn()
}
})
}
document.getElementById('knob').onclick = function(){
if (!turning) {
turning = true
turn()
}
}

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store