Wie wird dieser Bildeffekt erzeugt?

Ich habe diese Seite schon seit einiger Zeit angeschaut. Erstaunlich, wirklich. Aber ich kann nicht sagen, wie der Hintergrundbild-Effekt, der bei Scroll funktioniert, funktioniert. Habe den Code durchsucht und festgestellt, dass sie Jquery plus eine Reihe von Scroll-Plugins verwenden, aber nichts über die Bilder, die ich sehen kann.Wie wird dieser Bildeffekt erzeugt?

Wie würden Sie sagen, dass es fertig ist?

Der Standort: http://herohousing.org/UBBT/

Quelle

2010-03-10 Industrial

Sehr interessant muss zugeben, das ist eine Seite, die einige Zeit in Anspruch nehmen disect ... aber sehr cool. – Zoidberg

Warum das jQuery-Tag? Für viele Dinge wird überhaupt kein Javascript benötigt. – Dykam

Dieser Trick ist ganz einfach und braucht nur etwas CSS wo jede Platte ein Hintergrundbild hat, die festgelegt ist:

<style type="text/css"> 
    div { 
     height: 100%; 
     background-image: url(http://sstatic.net/so/img/logo.png); 
     background-attachment: fixed; 
     border: thin solid; 
    } 
    div.a { 
     background-repeat: repeat-x; 
     background-color: #FDD; 
    } 
    div.b { 
     background-repeat: repeat-y; 
     background-color: #DFD; 
    } 
    div.c { 
     background-repeat: no-repeat; 
     background-color: #DDF; 
    } 
</style> 

<div class="a">A</div> 
<div class="b">B</div> 
<div class="c">C</div>

hier die gleiche Hintergrundbild Ich verwende aber Die unterschiedliche Hintergrundfarbe und Bildwiederholung sollte Ihnen zeigen, dass es drei verschiedene Elemente sind.

bearbeiten Ok, es ist offenbar, dass einige Zweifel, was ich schreibe. Und tatsächlich verwendet die zitierte Seite jQuery dafür. Aber nur, um das Bild an die Breite und Höhe des Ansichtsfensters des Browsers anzupassen, da Sie noch kein Hintergrundbild bestimmen können. CSS 3 spezifiziert einen background-size property, aber seine Unterstützung ist immer proprietär mit dem herstellerspezifischen Präfix wie -khtml- (Konqueror), -moz- (Gecko basierte Browser wie Firefox), -o- (Opera) und -webkit- (WebKit basierte Browser wie Safari).

Wenn Sie darauf verzichten können, können Sie die CSS-Technik verwenden, die ich Ihnen gezeigt habe.

Quelle

2010-03-10 18:36:10 Gumbo

Sie haben vergessen, JQuery zu verwenden, um Bilder auf '.a',' .b' und '.c' Divs zuzuweisen. –

@Die Elite Gentleman: Warum sollte ich jQuery verwenden, wenn es eine einfache CSS-Lösung gibt? Und die DIV * haben * ein Hintergrundbild. – Gumbo

Aber sie tun immer noch etwas mit JS. Wenn ich JS deaktiviere, wird überhaupt kein Hintergrundbild angezeigt. –

Es sind 4 divs mit jeweils einem anderen Hintergrundbild, was den Effekt besonders gut macht ist der "background-attached: fixed;" Eigenschaft, um den Hintergrundscrollvorgang zu stoppen.

Wenn Sie Firebug für Firefox herunterladen, können Sie die Divs überprüfen und beobachten, wie das CSS die Seite verhält und versuchen, es für sich selbst zu replizieren.

Wirklich gut aussehende Effekt, den ich in die Tat :-)

Quelle

2010-03-10 18:37:19

Wie wird dieser Bildeffekt erzeugt?

Antwort

Verwandte Themen