Parallax and Z-index

#html #css

My Portfolio Site - Pt 3

I have been having fun with the image theme I put together for my portfolio site as I work on leveling it up overall. As I work on the next iteration of the site I decided to start all the way down to the background images, parallax effect, and animations before getting back into the informational content.

For the theme- The Royal Ontario Museum in Toronto is one of my favorite museums and all of the images I will be using on the site were taken there. I have tons of photos that should work well together to keep a cohesive theme and add some unique imagery.

For now, I'm pretty pleased with the background imagery and initial parallax effects. With an image overlay of the exterior of the museum, I was able to scroll some panels of sample text up from behind the museum while some panels are still scrolling in front of the museum. I put together a quick video of the progress so far.

Take a look at the code!

For the CSS I made use of the articles from my last post of recent resources- and a fair amount of trial and error. I'm still enjoying gulp and browser-watch for development on the frontend.

	/*////////////////////////////////////////////////////////////////////
	////////// fixed and styled Royal Ontario Museum layers //////////////
	////////////////////////////////////////////////////////////////////*/

	.background-rom-and-moon {
	background-image: url(../assets/images/rom-and-moon.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: fixed;
	height: 100%;
	width: 100%;}
	.background-rom-cutout {
	background-image: url(../assets/images/rom-cutout-downside.png);
	position: fixed; z-index: 30; //first//
	background-color: transparent;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100%;
	width: 100%; }
	.rom-cutout-upside {
	position: absolute; z-index: 50; //second//
	height:100%;
	opacity:.85;
	width:100%;}

	/*////////////////////////////////////////////////////////////////////
	////////// info panels styled and z-indexed across ROM ///////////////
	////////////////////////////////////////////////////////////////////*/

	.a {
	position: relative; z-index: 110;//fifth//
	justify-content: center;
	align-items: center;
	color: white;
	display: flex;
	height: 75vh;}
	.c {
	position: relative; z-index: 90;//fourth//}
	.e {
	position: relative; z-index: 160;//seventh//}

	/*////////////////////////////////////////////////////////////////////
	////////// cranes positioned and z-indexed ///////////////////////////
	////////////////////////////////////////////////////////////////////*/

	.rom-crane {
	position: absolute; z-index: 120; //third//
	width: 80%;}
	.rom-crane-mirror {
	position: absolute; z-index: 120; //sixth//
	width: 80%;
	right: 0px;}

view raw portfolio_images-playground_scss_main.scss hosted with ❤ by GitHub

The html is still very simple. I used AOS for the animations of the cranes, but I am experimenting with a different resource. As I start to work with newer text animations and layer a parallax effect on them it will obviously expand back out quite a bit.


	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>animation-playground</title>
	<link rel="stylesheet"
	href="css/main.css">
	<link rel="stylesheet"
	crossorigin="anonymous"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T">
	<link rel="stylesheet"
	href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" >
	<link rel="stylesheet"
	href="https://unpkg.com/aos@next/dist/aos.css" />
	<script src="https://kit.fontawesome.com/61bbbbc2a5.js"
	crossorigin="anonymous"></script>
	</head>
	<body data-spy="scroll">

	<!--========================================================================================
	=============== Royal Ontario Museum background & overlay of background cutout =============
	=========================================================================================-->

	<div class="background-rom-and-moon"></div>
	<div class="background-rom-cutout"></div>

	<!--========================================================================================
	=============== Will be a parallax container (image, name, title, icons) ==================
	=========================================================================================-->

	<div class="a">
	<img class="rom-cutout-upside" src="../assets/images/rom-cutout.png">
	</div>

	<!--========================================================================================
	============== Will be an info panel layered behind ROM ===================================
	=========================================================================================-->

	<div class="b text-center text-white">
	<h1>01</h1><h1>02</h1><h1>03</h1><h1>04</h1><h1>05</h1><h1>06</h1><h1>07</h1><h1>08</h1><h1>09</h1>
	<h1>10</h1><h1>11</h1><h1>12</h1><h1>13</h1><h1>14</h1><h1>15</h1><h1>16</h1><h1>17</h1><h1>18</h1><h1>19</h1><h1>20</h1>
	</div>

	<!--========================================================================================
	=============== Will be an info panel layered ahead of ROM ================================
	=========================================================================================-->
	<div class="c text-center text-white"><h1>01</h1><h1>02</h1><h1>03</h1><h1>04</h1><h1>05</h1><h1>06</h1><h1>07</h1><h1>08</h1><h1>09</h1><h1>10</h1><h1>11</h1><h1>12</h1><h1>13</h1><h1>14</h1><h1>15</h1><h1>16</h1><h1>17</h1><h1>18</h1><h1>19</h1><h1>20</h1>
	</div>

	<!--========================================================================================
	=============== Will be an info panel layered behind ROM ==================================
	=========================================================================================-->

	<div class="d text-center text-white">
	<h1>01</h1><h1>02</h1><h1>03</h1><h1>04</h1><h1>05</h1><h1>06</h1><h1>07</h1><h1>08</h1><h1>09</h1>
	<h1>10</h1><h1>11</h1><h1>12</h1><h1>13</h1><h1>14</h1><h1>15</h1><h1>16</h1><h1>17</h1><h1>18</h1><h1>19</h1><h1>20</h1>
	</div>

	<!--========================================================================================
	=============== Crane images layered behind and ahead of ROM w/ text animation ============
	=========================================================================================-->

	<div class="">
	<img data-aos="fade-right" data-aos-duration="3000" class="rom-crane" src="../assets/images/rom-crane.png">
	<div style="height:35vh"></div>
	<img data-aos="fade-left" data-aos-duration="2000" class="rom-crane-mirror" src="../assets/images/rom-crane-mirror.png">
	</div>



	<script crossorigin="anonymous"
	src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"></script>
	<script crossorigin="anonymous"
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"></script>
	<script crossorigin="anonymous"
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"></script>
	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
	<script>AOS.init();</script>
	</body>
	</html>

view raw portfolio_images-playground_index.html hosted with ❤ by GitHub

That's All Folks!

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

DEV Community

Parallax and Z-index

My Portfolio Site - Pt 3

Take a look at the code!

That's All Folks!

Get n8n VPS hosting 3x cheaper than a cloud solution

Top comments (0)

See why 4M developers consider Sentry, “not bad.”

Read next

Woocommerce nextjs

Nextjs Strapi

Nextjs mysql

Supabase nextjs

Okay