Skip to content

Commit

Permalink
Editing README file.
Browse files Browse the repository at this point in the history
  • Loading branch information
Rodrigoleon committed Apr 4, 2012
1 parent 804beed commit 42a0fd1
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions README.markdown
@@ -1,19 +1,19 @@
## CSS3 & HTML5 Screen Distortion Effect (BF3) CSS3 & HTML5 Screen Distortion Effect (BF3)
=============================================== ===============================================


This is a project that aims at mimicking a screen distortion effect - namely the Battlefield 3 effect. This is a project that aims at mimicking a screen distortion effect - namely the Battlefield 3 effect.


The concept is quite easy: ###The concept is quite easy:
-You have an image, picture or hopefully in the future a div or any element that you want to give this effect to -You have an image, picture or hopefully in the future a div or any element that you want to give this effect to
-The element stays normal throughout the website viewing experience -The element stays normal throughout the website viewing experience
-When hovered over, the element utilizes the CSS3 animation element to move to the distorted portion of the background image. It also uses HTML5 and JS to play an audio file. Then the image stays in the distorted stage for a few seconds, and finally goes back to its original state. -When hovered over, the element utilizes the CSS3 animation element to move to the distorted portion of the background image. It also uses HTML5 and JS to play an audio file. Then the image stays in the distorted stage for a few seconds, and finally goes back to its original state.


Hover = Sprite Image change to distorted version and sounds begins. ###Hover = Sprite Image change to distorted version and sounds begins.
Sprite Image stays in that state for a few seconds. Sprite Image stays in that state for a few seconds.
Sprite Image goes back to original version. Sprite Image goes back to original version.


About the Image: ###About the Image:
The image used in this project is a screenshot from Battlefield 3. It is made in photoshop to create the distortion effect. So it can be tweaked to be subtle. Later as the project takes off, the goal is to drop photoshop and utilize some element to create the actual distortion effect in place of Photoshop. The image used in this project is a screenshot from Battlefield 3. It is made in photoshop to create the distortion effect. So it can be tweaked to be subtle. Later as the project takes off, the goal is to drop photoshop and utilize some element to create the actual distortion effect in place of Photoshop.


+Usage: ###Usage:
You can use this in any of your projects of course; however, this is my first little project and I would love to see what you create with it. A reference back to my name would be great as well. So, credit me if you can :) You can use this in any of your projects of course; however, this is my first little project and I would love to see what you create with it. A reference back to my name would be great as well. So, credit me if you can :)

0 comments on commit 42a0fd1

Please sign in to comment.