Back in forever ago, I was utterly obsessed with everything you could download from Otakuworld. I loved the KiSS dolls, the toy chest, and particularly the screen sitters.

They don’t work anymore and I am sad. Anyway. I wanted some, and windows wouldn’t cooperate, so I made some. But at the website level because I am a “web” dev.

Sitter example

The script

What it does

You give it image urls and a few parameters. It will create an image element in your html, then move it to the upper right corner of elements that have a class of your choice.

You’ll have to draw your own images because I’m lazy and didn’t make samples ;)

How to use it

First, add the script to your page. You can download the javascript file on Github.

  <script src="/assets/js/mp-screensitter.js"></script>

Then, include this javascript at the bottom of the page, and change the parameters as needed.

window.addEventListener("load",function(event) {
    new MpScreensitter(
            seat_class: 'seat',  
            sitter_class: 'sitter', 
            sitter_images: [
            sitter_offset_x: 10, 
            sitter_offset_y: 14, 


They are all optional, but tweaking of the offsets will be needed if your image goes over the box it sits on.

The “sitter_images” array should also contain your images with their proper path.

seat_class (default: “seat”)
The CSS class of the elements to target. You can have multiple “sitters” on a page if you target different classes. The target elements cannot be inline!
sitter_class (default: “sitter”)
The class of the sitter image
sitter_images (default: [’./sitter.gif’] )
A list of the possible sitter images. One will be selected at random the target box changes.
sitter_offset_x (default: 0)
Distance from the right side of the box in pixels
sitter_offset_y (default: 0)
Vertical offset in pixels. The “legs’” size

Get the script on Github