Benutzerdefinierte CSS-Eigenschaften oder HTML-Attribute?

Question

Ich bin mit Parallax-Scrolling zu experimentieren, und ich möchte, wie etwas tun:

$('.page').each(function() { 
    $(this).css("background-position", 
     "center " + ((window.pageYOffset - $(this).offset().top)/
        $(this).css("speed")) + "px"); 
}); 

Wo Geschwindigkeit ein Attribut zu dem bestimmten Element zugeordnet ist, die beim Scrollen die Bewegungsgeschwindigkeit eines Objekts steuert. So hätte ich so etwas wie:

#item { speed: 4; } 

und

<div name="item" class="page"></div> 

Ich verstehe das nicht möglich sein könnte, mit CSS. HTML5 unterstützt benutzerdefinierte Attribute, aber ich würde diese Dinge lieber irgendwo im Kopf mit anderen Informationen über das Element deklarieren.
Irgendwelche Empfehlungen, wie man das macht?

Danke!

Answer 1

Sie können dies mit CSS nicht. Aber man kann die HTML5 benutzerdefinierte Attribute verwenden, und wenn Sie alles in der Kopfzeile erklären wollen, wie Sie in Ihrer Frage gesagt, könnte man jQuery eigene Methode zu binden Daten Elemente verwenden:

$(document).ready(function(){ 
    $.data(selector,'speed',5); 
    alert($.data(selector,'speed')); //this will alert 5 now 
}); 

Die docs sind hier : http://api.jquery.com/jQuery.data/

Und das sollte man auch arbeiten: http://api.jquery.com/data/ - Code hier ein bisschen anders aussehen:

$(document).ready(function(){ 
    $(selector).data('speed',5); 
    alert($(selector).data('speed')); //this will alert 5 now 
}); 

Hoffnung thath hilft.

Answer 2

HTML5 mit benutzerdefinierten data- Attribut:

<div name="item" class="page" data-speed="4"></div> 

Mit jQuery data() Methode in der Schleife:

parseInt($(this).data('speed'), 10);