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;} |
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> |
Top comments (0)