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ó

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
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...