• GITHUB
• FACEBOOK
• TWITTER

VHS.JS

A RETRO VHS GLITCH EFFECT

--SCROLL TO ADJUST TRACKING

INSTRUCTIONS

1. CLONE THE REPO OR DOWNLOAD THE ZIP.

git clone git://github.com/julianmaunder/vcr-js.git

2. ADD JQUERY AND VCR.JS TO YOUR HTML PAGE.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script type="text/javascript" src="CUSTOMIZE_THIS_URL/vcr.js"> </script>

3. ADD THIS CSS TO YOUR STYLESHEET.

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: url("CUSTOMIZE_THIS_URL/vcr.jpg" top left repeat-y;
  background-attachment: fixed;
  -webkit-background-size: 100% 19440px;
     -moz-background-size: 100% 19440px;
      -ms-background-size: 100% 19440px;
          background-size: 100% 19440px;
}

4. ENJOY YOUR COOL GLITCHY RETRO WEBSITE.

WARNING:
VCR.JS IS JUST A FUN EXPERIMENT AND IMPLEMENTING ON YOUR WEBSITE WILL DRASTICALLY REDUCE PERFORMANCE AND ONLY WORK PROPERLY IN SOME NEWER BROWSERS, PLEASE USE WITH CAUTION.

@JULIANMAUNDER