Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with JavaScript, etc. which I expect you need. Here's what I want to do:
I have a basic 'parallax' web site (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript I should be using.* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
Title
Page two title
subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.
Page three title
subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.
Link
Page title
subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.
Link
Page title
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.