Naprowadzenie do przykładowego efektu

0

jak zrobić podobny efekt jak tutaj ? https://www.google.com/drive/ . Chcę by zdjęcie pobrane z dysku samo dostosowało rozmiar do okna ekranu a następnie podobne przejście jak w przykładowym linku. Proszę o jakieś naprowadzenie

 #div
{
   
 
   width: 100%;
 
   height: auto;
 
   
 
   background-size: cover;
 
   background-image:url(http://s3.amazonaws.com/TimeScapes/images/stills/4k/big_sur.jpg)

}

tak wiem że to z linku url, i tutaj pytanie jak zrobić z dysku ?

jezcze w body dodał bym margin: 0 !important;

0

O jakim efekcie mówisz? Twój post to jakiś bełkot, z którego wiele nie wynika.

0

Tak jak kolega dzek zauważył, popraw swój pierwszy post, bo dla innych jest po prostu nieczytelny. Przeczytaj to sam jeszcze raz, albo wyślij jakiemuś koledze i spytaj czy rozumie coś z tego. To już nawet nie chodzi o słownictwo branżowe czy jego brak, ale budowę zdań. Nie wiem z czego to wynika, niedbalstwo, lenistwo, brak czasu ? Ale pamiętaj, że jak ty nie szanujesz innych forumowiczów, oni nie będą również szanowali ciebie (i prawdopodobnie ci nie pomogą).

Wracając do tematu, rozumiem, że chciałbyś zrobić stronę w stylu one-page i żeby dane sekcje miały szerokość i wysokość okna przeglądarki.

Najpierw robisz odpowiednią strukturę w html:

<body>
	<div id="sekcja1" class="sekcja">
		Lorem ipsum
	</div>

	<div id="sekcja2" class="sekcja">
		Lorem ipsum
	</div>

	<div id="sekcja3" class="sekcja">
		Lorem ipsum
	</div>
</body>

Potem stylujesz w css. Jeśli chcesz żeby sekcje były na całe ekran ustawiasz wysokość na 100%, ale pamiętaj, że to 100% elementu nadrzędnego (w tym przypadku body), więc on i html również muszą być na cały ekran.

html, body, .sekcja{
			width: 100%;
			height: 100%;
		}
		
		#sekcja1{
			background-size: cover;
   			background-image:url(http://s3.amazonaws.com/TimeScapes/images/stills/4k/big_sur.jpg);
		}
		
		#sekcja2{
			background-size: cover;
   			background-image:big_sur.jpg;
		}
		
		#sekcja3{
   			background:url(http://s3.amazonaws.com/TimeScapes/images/stills/4k/big_sur.jpg) 50% / cover;
		}

Przy definicji background możesz skorzystać ze skrótu, tak by wszystko było ładnie w jednej lini (jak w #sekcja3)
https://dev.opera.com/articles/css3-borders-backgrounds-boxes/background-shorthand/

Jeśli chodzi o plik tła który jest na dysku, lokalnie, to żeby go wybrać ustawiasz link relatywnie. Jeśli plik ze zdjęciem jest w tym samym folderze co twój plik css, to jako background podajesz samą nazwę pliku (jak w #sekcja2). Nie wiem w jakim celu chcesz używać tej strony, ale jeśli opublikujesz ją w sieci, nie będziesz w stanie (a raczej inni odwiedzający), zobaczyć tych zdjęć.
http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

Jeśli nie czujesz się mocny w temacie, to dobrze też jest umieścić temat w dziale 'Newbie' ;)

1

Ja jeszcze od siebie dodam, że scroll obrazków to tzw. efekt parallaxy (https://davidwalsh.name/parallax) :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1