Egyszerű parallax effekt

2020-05-15

6 éve készítettem egy bemutatót a Skrollr JS library-ról, most pedig megnézzük hogyan lehet JS nélkül, simán CSS-sel parallax effektet létrehozni.

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

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Parallax</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<section class="section-1">
		<h1>Lepke</h1>
	</section>
	<section class="section-2">
		<h1>Tigris</h1>
	</section>
	<section class="section-3">
		<h1>Kutya</h1>
	</section>
	<section class="section-4">
		<h1>Süni</h1>
	</section>

</body>
</html>

CSS forráskód


* {
	margin: 0;
	padding: 0
}
html, body {
	height: 100%
}
section {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	height: 100%;
	position: relative
}
.section-1 { background-image: url('pics/section1.jpg') }
.section-2 { background-image: url('pics/section2.jpg') }
.section-3 { background-image: url('pics/section3.jpg') }
.section-4 { background-image: url('pics/section4.jpg') }
h1 {
	font-family: arial;
	font-size: 5vw;
	color: white;
	background: rgba(0,0,0,.7);
	padding: 20px 40px;
	position: absolute;
	bottom: 50px;
	right: 50px
}

@media(max-width:600px) {
	section {
		background-attachment: scroll;
		height: 250px
	}
	h1 {
		bottom: 20px;
		right: 20px;
		padding: 15px 30px
	}
}

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • HTML + CSS alapoktól a felső szintig

    Persze, felhasználhatod, nincs benne jogvédett tartalom....

  • HTML + CSS alapoktól a felső szintig

    Szervusz Tamás! Először is nagyon jók az anyagaid és sokat tanultam tőled/belőlük, csak így tovább. És köszönöm, a segítséged az anyagok és videók for...

  • Betűtípusok a weben

    A webszerveren is be kell állítani, hogy UTF-8 legyen a default kódolás. Bár elég furcsa, ha ez alapból nem ez van beállítva....

  • Betűtípusok a weben

    Szia. Van egy kis problémám. Fejlesztem, illetve teljesen új oldalt csinálok és a html gépről megnyitva teljesen jól jeleníti meg a magyar ékezetes k...

  • Klónok támadása: Gravit Designer

    Néztem már, egy Illustrator, Photoshop, InDesign trió kiváltására jó alternatíva lehet. De én használok XD-t, Premiere-t, After Effects-et, Media Enco...

  • HTML + CSS alapoktól a felső szintig

    Eddig is magabiztosan ajánlottam az oldaladat annak, aki meg akart ismerkedni a webfejlesztéssel, mint általam megismert első blog, ezentúl azonban bi...

  • Klónok támadása: Gravit Designer

    Szia Tamás, Az lenne a kérdésem, hogy próbáltad e már az Affinity Designer és a Affinity Photo programokat? Esetleg tervezed e ezek tesztelését egy y...

  • Webdesign tanfolyam

    Szia. Valóban nagyon jól sikerült a videód. Köszönöm...

  • Webdesign tanfolyam

    Hali! Ma egész nap próbálkoztam vele és nagyon tetszik!! Itt a pályaválasztás :D azt hiszem tudom milyen suliba megyek!...

  • Webdesign tanfolyam

    Épp életet ment a videó, hogy szombatig le tudjam adni a félév végi portfólió oldal feladatomat :P...

  • ::before & ::after pseudo selector-ok használata

    Ezt használom hozzá: https://prismjs.com...

  • ::before & ::after pseudo selector-ok használata

    Köszönöm a videóidat, rengeteget megnéztem már és nagyon sokat tanultam belőlük. Most azt szeretném megkérdezni, hogy hogyan illeszted be az oldalaidb...