javascript - テキストの視差が機能しない

Question

視差効果に jquery.parallax-1.1.3.js を使用しています。(サイト: http://ianlunn.co.uk/plugins/jquery-parallax/ )

問題: css background-position で動作します。これは背景画像では機能しますが、html のテキストでは機能しません。

私が欲しいもの: この js ファイルにコードを追加して、html テキスト (H1、H2) で視差効果を使用できるようにします。ID付きの方がいいです。したがって、H1 の周囲には、視差効果に関連付けられた ID を持つ div があります。

これはjsです：

(function( $ ){
    var $window = $(window);
    var windowHeight = $window.height();

$window.resize(function () {
    windowHeight = $window.height();
});

$.fn.parallax = function(xpos, speedFactor, outerHeight) {
    var $this = $(this);
    var getHeight;
    var firstTop;
    var paddingTop = 0;

    //get the starting position of each element to have parallax applied to it      
    $this.each(function(){
        firstTop = $this.offset().top;
    });

    if (outerHeight) {
        getHeight = function(jqo) {
            return jqo.outerHeight(true);
        };
    } else {
        getHeight = function(jqo) {
            return jqo.height();
        };
    }

    // setup defaults if arguments aren't specified
    if (arguments.length < 1 || xpos === null) xpos = "50%";
    if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
    if (arguments.length < 3 || outerHeight === null) outerHeight = true;

    // function to be called whenever the window is scrolled or resized
    function update(){
        var pos = $window.scrollTop();              

        $this.each(function(){
            var $element = $(this);
            var top = $element.offset().top;
            var height = getHeight($element);

            // Check if totally above or totally below viewport
            if (top + height < pos || top > pos + windowHeight) {
                return;
            }

            $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");

        });
    }       

    $window.bind('scroll', update).resize(update);
    update();
};
})(jQuery);

これは、html から js を呼び出す方法です。

    <script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#third').parallax("50%", 0.5);

})
</script>

div に ID を指定します。この Div に背景画像を指定します。ID を上記の視差効果に接続します。私は同じことをしたいのですが、H1で。