{II}

CSS and JS Lamp Pull Chain Effect

#css#javascript#html

After playing around with the light/dark theme switcher on GitHub I decided to make my own toggle button. I wanted to recreate an antique lampshade pull chain. The result can be seen in the top-right corner of this page.

The code is fairly simple: the cord is drawn with divs and CSS borders, the handle is ASCII, then it is partially hidden with CSS positioning. An event handler is attached to the element so that on click will add a new class which triggers an animation, and upon animationend the class will be removed.

Notes

Experiments were done with pure CSS/HTML but that could only produce two effects: the animation would only run while the mouse button was pressed down, or onclick would only perform the animation once because the class could not be removed. 

<div id="light-switch">
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="knob"><span>{</span>II<span>}</span></div>
</div>
#light-switch {
    position: fixed;
    top: -1.5em;
    right: 1em;
    text-align: center;
    cursor: pointer;
    z-index: 1021;
}

#light-switch div.rounded-circle {
    width: 0.3em;
    height: 0.8em;
    border: 2px dashed white;
    margin: 0 auto;
}

#light-switch div.knob {
    color: #fac403;
    font-size: 0.6em;
    font-family: sans-serif;
}

#light-switch div.knob span {
    font-size: 0.8em;
    position: relative;
    bottom: 2px;
}

.pull-down {
    animation: PullCord 0.6s linear;
}

@keyframes PullCord {
    0%, 100% {
        top: -1.5em;
    }
    50% {
        top: 0;
    }
}
$('#light-switch').on('click', function() {
	$(this).addClass('pull-down');
}).on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
	$(this).removeClass('pull-down');
});