Gehen Sie zur Starcraft II-Website unter Ссылка und scrollen Sie zum Ende der Seite. Beachten Sie, wie es aussieht, als ob Sie aus einem Cockpit schauen.
Während Sie die Sterne auf und ab bewegen, bewegen Sie sich unabhängig von den Cockpitfenstern, um einen Ebeneneffekt zu erzeugen.
Wie bringen sie zwei Bilder dazu, sich unabhängig voneinander zu bewegen?
Bearbeiten: Danke für die Antworten unten. Ich habe bemerkt, dass sie ein transparentes .png-Bild verwenden, aber ich war daran interessiert, wie sie den "gleitenden" Effekt bekommen haben, wo der Planet in Sicht kommt, wenn du nach unten scrollst.
Ich hatte letzte Nacht meine Entwicklungsumgebung nicht zur Verfügung, um damit fertig zu werden, aber ich habe es jetzt herausgefunden.
Dies wird erreicht, indem ein Paar verschachtelter div-Tags verwendet wird. Der Hintergrund des übergeordneten Objekts ist "fest" und der Hintergrund des untergeordneten Objekts ist auf "scrollen" eingestellt. Das relevante CSS ist unten:
%Vor%Und der html:
%Vor%Das Sternenfeld bewegt sich nicht, nur das Cockpit. Was Sie auf dem Rest der Seite sehen, ist nicht der eigentliche Hintergrund der Seite; das Sternenfeld ist der Hintergrund, aber es ist maskiert.
Bearbeiten: Um genau zu sein: Das Cockpit ist ein PNG mit transparenten Fenstern; zeigt den wahren Hintergrund der Seite darunter.
Dies ist die Fußzeile der Seite: Ссылка Wie Sie sehen können, sind die Fenster transparent, so dass Sie den Hintergrund der Seite sehen können.
und die Planeten sind nur im unteren Hintergrund des Körpers: Ссылка
Sie können es selbst testen
html:
%Vor%css:
%Vor%Siehe ein Live-Beispiel hier: Ссылка
David,
Ich habe Ihnen eine Stimme gegeben, weil ich weiß, wie Sie die Bild-URLs verlinkt haben, damit wir sie bequem sehen können. Ihr Code funktionierte jedoch nicht für mich, und ich verbrachte eine Menge Zeit damit, es richtig zu machen. Ich sage nicht, dass der html / css unten noch optimal ist, aber es funktioniert für mich.
Hinweis: Dies funktioniert nicht in IE6 wegen der cockpit.png Transparenz, aber es gibt vermutlich Workarounds: Ссылка
(übrigens, das ist ein tolles Blog-Thema !!)
%Vor%
Tags und Links css
