https://github.com/scotch-io/star-wars-attack-of-the-dom

Star Wars: Attack of the DOM. A cool little demonstration of HTML5, CSS3, and JS combined to make lightsabers attack your webpages! Star Wars javascript physics.
https://github.com/scotch-io/star-wars-attack-of-the-dom

Last synced: 8 days ago
JSON representation

Star Wars: Attack of the DOM. A cool little demonstration of HTML5, CSS3, and JS combined to make lightsabers attack your webpages! Star Wars javascript physics.

• Host: GitHub
• URL: https://github.com/scotch-io/star-wars-attack-of-the-dom
• Owner: scotch-io
• Created: 2013-06-24T02:21:42.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-03T03:41:31.000Z (about 11 years ago)
• Last Synced: 2024-04-14T18:18:22.606Z (7 months ago)
• Language: CSS
• Size: 895 KB
• Stars: 17
• Watchers: 8
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Star-Wars-Attack-of-the-DOM

===========================

![Logo](http://scotch.io/wp-content/uploads/2013/05/attack-of-the-dom.jpg "Logo")

#### [Full Demo](http://scotch.io/demos/star-wars-attack-of-the-dom)

#### [Attack Your Site](http://scotch.io/apps/star-wars-attack-of-the-dom)

#### [Simple Demo on CodePen](http://codepen.io/ncerminara/pen/gwbKs)

#### [Read More](http://scotch.io/bar-talk/x/star-wars-attack-of-the-dom)

Star Wars: Attack of the DOM. A cool little demonstration of HTML5, CSS3, and JS combined to make lightsabers attack your webpages! Star Wars javascript physics.

This project is a fork of our [Pure CSS3 Stars Wars Lightsaber Checkboxes](https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes). We decided to expand on it for fun. Like the other project, this probably won't be useful in a real world setting or project, but it's still a pretty cool demo.

## A long, long time ago...

##### Hacker News Demo

![Demo](http://scotch.io/wp-content/uploads/2013/06/demo-0.png "Demo")

##### Amazon Demo

![Demo](http://scotch.io/wp-content/uploads/2013/06/demo-2.png "Demo")

## About

This project is broken down into a few parts actually. There are:

 - Simple Demos on [CodePen.io](http://codepen.io/ncerminara).

 - [Full Demo](http://scotch.io/demos/star-wars-attack-of-the-dom) on scotch.io. This includes:

    - Star Wars Intro Text

    - Star Wars Scrolling Text

    - A never ending battle against an infinite loop of DOM element creation

 - [Fight your webpage](http://scotch.io/apps/star-wars-attack-of-the-dom) functionality. This is:

    - Slow and buggy

    - Works best on small sites

    - Large DOM and JS intensive sites will not play nice with this

    - Will make your computer's fan dance

## Tools Used

Star Wars: Attack of the DOM uses a JavaScipt port of a popular 2D physics engine called Box2d. (This guy)[https://github.com/franzenzenhofer/box2d-jquery] made a really neat jQuery wrapper of it, too. It's definitely missing some features and has it's bugs, but is, nevertheless, an extremely simple and awesome wrapper for getting quick physics on your webpage. We also use our [Pure CSS3 Stars Wars Lightsaber Checkboxes](https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes) for the swords.

- JavaScript Physics Engine (Box2d)[https://github.com/franzenzenhofer/box2d-jquery]

- [Pure CSS3 Stars Wars Lightsaber Checkboxes](https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes)

## Jedi Lightsaber Choices

- Yoda (updated)

- Mace Windu

- Obi-Wan Kenobi

- Darth Vader

- Darth Maul (new)

- Mickey Mouse?! (new)