https://github.com/alexp11223/phenakistoscope

HTML/CSS Phenakistoscope
https://github.com/alexp11223/phenakistoscope

canvas css html

Last synced: about 1 month ago
JSON representation

HTML/CSS Phenakistoscope

• Host: GitHub
• URL: https://github.com/alexp11223/phenakistoscope
• Owner: AlexP11223
• Created: 2016-01-11T18:08:48.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-26T15:37:13.000Z (almost 9 years ago)
• Last Synced: 2023-09-07T09:07:43.048Z (over 1 year ago)
• Topics: canvas, css, html
• Language: HTML
• Homepage:
• Size: 1.23 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
A simple phenakistoscope (https://en.wikipedia.org/wiki/Phenakistoscope) implemented using HTML/CSS and a bit of vanila JS.

http://alexp11223.github.io/Phenakistoscope/Phenakistoscope.html

![](http://i.imgur.com/3iUBZG4.png)

The galloping horse images are from http://opengameart.org/content/galloping-horse (based on photographs by [Eadweard Muybridge, 1878](https://en.wikipedia.org/wiki/Sallie_Gardner_at_a_Gallop)).

`transform: rotate` is used to rotate the image and the rotation degree gets updated via `requestAnimationFrame`. Speed can be changed using controls on the page.

Semi-transparent overlay/mask on top of the image is created using 'svg'.

Should work in all modern browsers (Chrome, FF, ...) and IE 10+.

image_src folder contains Paint.Net image project file with layers, and .psd exported via Paint.Net plugin.