Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
804beed
commit 42a0fd1
Showing
1 changed file
with
5 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -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 :) |