An effect that mimics Battlefield 3's static screen effects.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


CSS3 & HTML5 Screen Distortion Effect (BF3)

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

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
  • 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. Basically:

  • Hover = Sprite Image change to distorted version and sounds begins.

  • Sprite Image stays in that state for a few seconds.
  • Sprite Image goes back to original version.

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.


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 :)