Added some parallax to the footer - the footer now gets revealed as you scroll down instead of moving with the page

This commit is contained in:
Gregory Ballantine 2021-08-20 22:52:10 -04:00
parent 1904e631e6
commit 4abc629afa
2 changed files with 36 additions and 17 deletions

View File

@ -10,6 +10,7 @@
<script src="/assets/scripts/varrock.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header-box">
<div id="header-logo">
<h1>Bit Goblin</h1>
@ -32,6 +33,7 @@
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="row">

View File

@ -5,6 +5,7 @@ body
font-family: "Gill Sans", sans-serif
font-size: 2rem
margin: 0
padding-bottom: 125px
a
color: #1e76d1
@ -21,8 +22,19 @@ hr
.u-text-center
text-align: center
// this wrapper is only used to hide the footer
#wrapper
position: relative
z-index: 10
width: 100%
height: 100%
margin: 0
padding: 0
background: white
#header-box
position: relative
z-index: 2
height: 500px
background:
image: url(/assets/images/bg-banner.jpg)
@ -113,7 +125,12 @@ hr
// footer section
#footer
position: fixed
z-index: -1
bottom: 0
width: 100%
margin-top: 25px
padding-top: 15px
background: #212121
border-top: 2px solid #999
color: white