Forem

Cover image for Parallax and Z-index
JaredHarbison
JaredHarbison

Posted on • Edited on

2 1

Parallax and Z-index

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.

vid


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;}

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>

That's All Folks!


Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)