Parallex and vibrate background image with scroll

Parallex and vibrate background image with scroll

I need background image parallax and vibrate little bit when scrolling with mouse.

Background position is working with jQuery's `css()` function but not vibrating.

When ii firebug it result is

  1.     <div data-speed="10" data-type="background" style="height: 1000px;
  2.     background-position: 50% 0px; animation: 0s ease 0s normal none 1 NaNpx;"
  3.     class="parallax-container" id="intro">

**I am using jQuery's  code for this, and testing in `Mozilla`.**

  1.     /*parallex backgound*/
  2.     $glob('div[data-type="background"]').each( function() {
  3.         var $bgobj = $glob(this); // assigning the object
  4.         $glob(window).scroll( function() {
  5.             var yPos = -($window.scrollTop() / 10);
  6.             var coords = '50% '+ (yPos) + 'px';
  7.             $bgobj.css({'background-position': coords}).animate({
  8.                 '-webkit-animation': 'vibrateAnim 1s ease', /* Safari 4+ */
  9.                 '-moz-animation':    'vibrateAnim 1s ease', /* Fx 5+ */
  10.                 '-o-animation':      'vibrateAnim 1s ease', /* Opera 12+ */
  11.                 'animation':         'vibrateAnim 1s ease'  /* IE 10+ */
  12.             },500);
  13.         });
  14.     });

**HTML:**

  1.     <div id="intro" class="parallax-container" style='height:1000px;' data-type="background" data-speed="10">
  2.         <div id="mainTitleText" class="top-content">
  3.             <img class="logo" src="images/logo.png">
  4.         </div><!-- mainTitleText -->
  5.     </div><!--home-->

**CSS:**

  1.     @-moz-keyframes vibrateAnim {
  2.         0%   { top: -10px; }
  3.         10%  { top:  10px; }
  4.         20%  { top: -10px; }
  5.         30%  { top:  10px; }
  6.         40%  { top: -10px; }
  7.         50%  { top:  10px; }
  8.         60%  { top: -10px; }
  9.         70%  { top:  10px; }
  10.         80%  { top: -10px; }
  11.         90%  { top:  10px; }
  12.         100% { top: -10px; }
  13.     }