Parallax scrolling

Szerző: Mérei Tamás   |   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ó

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
}

23 hozzászólás

  1. 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.

    • 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. 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. 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.

    • 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. 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.

    • 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. 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!

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

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

  6. 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 :/

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

      Ez nem arra lett kitalálva 🙂

    • 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. 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

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

      De miért akarnál ilyet tenni?

  8. 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!!

    • 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. 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?

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

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

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

      Köszi 🙂

    • 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

    • 2014. május 18. vasárnap - 12:42

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

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

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

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....