Mérei Tamás webdesigner

Parallax scrolling

Szerző:   |   2014-04-15

Egy kis móka a Skrollr JS library-val.

Ha nem akarod a HTML-be írogatni a data attribútumokat, akkor az eskrollr-stylesheets bővítménnyel közvetlenül CSS fájlba írva is lehet használni a cuccot. Nekem az eredeti változat áttekinthetőbbnek bizonyult úgyhogy a videóban is ezt használtam.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


	<div id="progress-wrapper">
		<div id="progress" data-0="width:1%;background:rgba(255,255,255,0.3);" data-end="width:100%;background:rgba(255,255,255,0.3);"></div>
	</div>

	<section id="slide-1">
		<div class="content"
			data-0="opacity:0;top:40%; transform:scale(0)"
			data-1000="opacity:1; transform:scale(1)"
			data-2000=""			
			data-3000="opacity:0; top: -10%;">
			Parallax Scrolling
		</div>
	</section>

	<section id="slide-2" data-2000="top:100%;opacity:0" data-3000="top:0%;opacity:1">
		<div class="content"
			data-3500="transform:scale(0) rotate(180deg)"
			data-5000="transform:scale(1) rotate(360deg)"
			data-6000="transform:scale(1) rotate(360deg); opacity:1"
			data-7000="transform:scale(5) rotate(360deg); opacity:0">
			<h1>Lorem Ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia massa quis tellus porta mollis. Morbi condimentum erat massa, eu scelerisque magna auctor at. Maecenas eu velit eget diam pulvinar egestas sed vitae sapien. Nam commodo mattis varius.</p>
		</div>
	</section>

	<section id="slide-3" data-6500="top:100%;opacity:0" data-7000="top:0%;opacity:1">
		<div class="content"
			data-7000="opacity:0; left:-200%; transform:rotate(90deg);"
			data-7500="opacity:1; left:0%; transform:rotate(0deg)">
			And so on...
		</div>
	</section>

CSS forráskód


* {
	padding:0;
	margin:0;
	font-family: 'Roboto', sans-serif;
}
body {
	background-color: #000;
}
section {
	position: fixed;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
}
#progress-wrapper {
	position: fixed;
	width: 60%;
	height: 10px;
	padding: 4px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: 2% auto;
	background: rgba(0,0,0,0.5);
	border-radius: 5px;
	z-index: 1000
}
#progress {
	height: 10px;
	z-index: 2000;
	border-radius: 5px;
}
#slide-1  { background-image: url('1.jpg') }
#slide-2  { background-image: url('2.jpg') }
#slide-3  { background-image: url('3.jpg') }
.content { width:100%; position: fixed }

#slide-1 .content  {
	color: #fff;
	text-align: center;
	font-size: 800%;
	font-weight: bold;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#slide-2 h1 {
	font-size: 400%
}
#slide-2 .content {
	width: 40%;
	left: 50%;
	top: 3%;
	color: #000;
	font-size: 130%;
	font-weight: bold
}
#slide-3 .content {
	width: 60%;
	background: rgba(0,0,0,0.8);
	color: #fff;
	padding: 2% 3%;
	left: 50%;
	top: 30%;
	text-align: right;
	font-size: 800%;
	font-weight: bold
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

23 hozzászólás

  1. mattempus
    2016. május 11. szerda - 15:29

    Szia!

    Először is, hogy tisztázzuk amatőr vagyok, és a magam szórakoztatására kezdtem el tanulni a html+css-t.
    A következő a problémám a 9. perc környékén elakadtam (veled együtt írom, folyamatosan, hogy megértsem, a parallaxot), amikor az opacity-t állítod be. Nem lesz átlátszó az írt szöveg, szerintem azért mert eleve nem jelenik meg nekem scroll bar. Biztos valami teljesen alap dolog, de mégis ha visszanézem ugyanaz az egész.

    • cyrex
      2016. december 19. hétfő - 08:36

      Azért van ott a forráskód, hogy azzal össze tudd hasonlítani, ha valami nem működik.

  2. dmarcell
    2014. október 17. péntek - 15:10

    Szia!

    A 0.6.27-es skrollr.min.js-el nem működik. Nem jelenik meg a scrollbar. Kikopiztam a 0.6.22-t és azzal hibátlanul működik.

  3. Adam
    2014. augusztus 18. hétfő - 11:00

    Hello Cyrex!
    Az miért van hogy a google fonts-ról beállítok egy betűtípust és az ékezetes betűket nem abban a stílusban jeleníti meg a szöveget az oldalon?
    A választ előre is köszönöm.

    • cyrex
      2014. augusztus 18. hétfő - 11:03

      Mert a “Latin Extended (latin-ext)” opciót nem jelölted be. Az tartalmazza a magyar ékezetes karaktereket.

  4. Gyu
    2014. augusztus 17. vasárnap - 10:02

    Szia!
    Szuper tutorial, viszont egy kérdésem lenne. Firefox alatt a transform tulajdonságok nem működnek. Ha előtaggal írom be akkor sem. Pl. data-2500=”-moz-transform:scale(0)” (30-31 verziónál).
    Mi lehet a baj?
    Köszi Gy.

    • cyrex
      2014. szeptember 14. vasárnap - 13:48

      32.0.1-et használok és ott működik. Amikor a videót csináltam akkor nem tudom épp melyik volt az aktuális változat, de akkor is ellenőriztem FF alatt és nem volt vele gond.

  5. WebStarter
    2014. május 5. hétfő - 16:23

    Szia!
    Tudnál ehhez a fullPage.js-hez tutorialt készíteni?

    Nagyon jó tutorialokat csinálsz!!!!

    Várom válaszod!

    • cyrex
      2014. május 28. szerda - 22:38

      Megnézem majd mit tud, jópofának tűnik.

  6. DTomi
    2014. április 29. kedd - 16:25

    Igen királyul néz ki ez a megoldás, csak kár, hogy mobil eszközökön nem működik :/

    • cyrex
      2014. április 29. kedd - 16:27

      Ez nem arra lett kitalálva 🙂

    • adm
      2014. május 13. kedd - 11:16

      https://github.com/Prinzhorn/skrollr Mobile support alatt találsz róla leírást, hogy kell mobilra alkalmazni.

  7. cristensen
    2014. április 23. szerda - 14:32

    Hello!!
    Az lenne a kérdésem hogy ezt a skrollr.min.js fájlt nem helyi mappából akarom megnyitni hanem url-lel akkor hogy tudom működésre bírni?

    var s = skrollr.init();

    így próbáltam, de nem megy!:S

    • cyrex
      2014. április 27. vasárnap - 10:41

      De miért akarnál ilyet tenni?

  8. máté
    2014. április 17. csütörtök - 15:55

    Kedves Cyrex!
    Az lenne a kérdésem, hogy hogyan lehet úgy megcsinállni a menüt,hogy pl.:rákattintok az elérhetőség menüpontra és akkor beadja az elérhetőségeket(nem arra gondolok, hogy lejön egy kis nyil vagy ijesmi)
    vagy mondjuk a videókra kattintok és oda visz! Csinállhatnáll erről tutoriált vagy arról hogyan lehet videót berakni!! válaszodat előre is köszönöm!!

    • Juhász Zsolt
      2014. április 25. péntek - 18:45

      Ha arra gondolsz, hogy van egy fix horizontális menüd az oldal tetején, és ha bármelyik gombjára rákattintasz, szépen “lecsorog” a megfelelő helyre, akkor azt a legegyszerűbben jquery segítségével tudod megoldani.
      Minden contentre egy anchort készítesz, és a fenti menüben a megfelelő gombnak adod a hozzá tartozó linket.

      Ennek a következménye még csak annyi lesz hogy “csúnyán” odaugrik.

      De Google-ben keress rá: “jquery smooth scroll”
      Számtalan megoldást találsz az animált görgetésre (nem bonyolult), és máris szépen oda “gördül” a megfelelő helyre.
      Ha profi munkát akarsz végezni, akkor a görgető animációval is játszogathatsz, de az már csak esztétika!

  9. blackdog476
    2014. április 16. szerda - 20:26

    Válaszban le tudnád írni nekem, hogy hogy kell olyan háttérképet beállítani, hogy bármekkora a felbontás, mindig kitöltse a hátteret?

    • cyrex
      2014. április 16. szerda - 20:42

      background-size: cover, a videóban is elmondtam.

    • blackdog476
      2014. április 16. szerda - 21:10

      Köszi 🙂

    • blackdog476
      2014. április 20. vasárnap - 18:03

      És azt nem tudnád elmondani hogy magasságban is lehetőleg alkalmazkodjon a mérethez?
      A background-size: cover csak szélességében alkalmazkodik hozzá, most úgy oldottam meg hogy
      “body {
      background: url(‘http://i.imgur.com/WceW9X2.jpg’);
      background-size: 100%;
      background-repeat:no-repeat;
      }”
      de ez is csak szélességében alkalmazkodik a böngésző méretéhez.. Repeatelni meg nem szeretném, mert az csúnya

    • Egy névtelen
      2014. május 18. vasárnap - 12:42

      background-size: 100% 100%; <- ez segíteni fog!

  10. blackdog476
    2014. április 16. szerda - 18:13

    Ha CTRL+görgő-vel zoomolunk rá akkor elbugol 😛 😀

Hozzászólás

Legújabb hozzászólások