To pytanie powinno być bardzo łatwe dla niektórych z was CSS Gurus. Przynajmniej mam nadzieję, że tak jest. Wszystko, co chcę wiedzieć, jest to, jak wygląda CSS, jak to osiągnąć ten efekt:

http://www.nodeconf.com/

Jeśli przewijasz tę stronę, możesz zobaczyć, jak stworzyli to "szczeliny", które można przewinąć do rówieśnika w różnych częściach obrazu tła. Każdy szczelina wydaje się mieć inny obraz. Myślałem, że to naprawdę fajne, ale nie mam pojęcia, jak wdrożyć coś podobnego. Czy ten efekt wymaga użycia JavaScript? Jeśli tak, jak to jest skomplikowane?

2
Chev 22 listopad 2013, 03:55

3 odpowiedzi

Najlepsza odpowiedź

Od patrzenia na źródło, myślę, że to coś takiego:

http://jsfiddle.net/wzm9z/

Html:

<div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div>

CSS:

.image-block {
    width: 100%;
    height: 80px;
}
4
user3019837 22 listopad 2013, 00:32

Spróbuj czegoś takiego:

http://jsfiddle.net/kx3cp/

Html:

<div class="background"><img src="http://placekitten.com/1800/950" alt=""></div>
<div class="content"></div>
<div class="content"></div>

CSS:

.background { z-index: -9999; position:fixed; }
.content {background: black; width 50%; height:50em; margin:2em;}
2
agconti 22 listopad 2013, 00:12

Jeśli kliknij prawym przyciskiem myszy stronę i wybierz "Inspect Element", znajdziesz, że CSS dla tych obrazów tła to:

  background: url(images/aBR9P1476.jpg) no-repeat center center fixed;

Jest to w zasadzie sorthand dla:

  background-image:url(images/aBR9P1476.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;

To, co jesteś zainteresowany specjalnie do ostatniej nieruchomości "Mocowanie w tle".

Zobacz dokumentację dla tej nieruchomości tutaj: http://www.w3schools.com/cssref/pr_background-attachment.asp

Właściwość montażu w tle, czy obraz tła jest ustawiony lub przewija z resztą strony.

Twoje zdrowie

1
JackKalish 22 listopad 2013, 00:08