HTML
<div class="home-top-container">
<div class="home-top-wrapper">
<div class="content">
<h1>Innovative Student Living Spaces in Miami, FL</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, lorem elementum tincidunt ullamcorper, sem leo dignissim nunc, malesuada tristique velit sapien quis lectus. Suspendisse potenti. Sed ultrices auctor laoreet. Nulla facilisi. Suspendisse non blandit ligula, quis tristique ligula.</p>
<p><a href="#" class="button tour">TAKE THE TOUR</a></p>
</div>
</div>
</div>
<div class="home-top-container tour-bkgd bkgd-01"></div>
<div class="home-top-container tour-bkgd bkgd-02"></div>
<div class="home-top-container tour-bkgd bkgd-03"></div>
<div id="tour-block">
<div class="tour-content tour-content-01">
<h2>Modern Architecture</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, lorem elementum tincidunt ullamcorper, sem leo dignissim nunc, malesuada tristique velit sapien quis lectus. Suspendisse potenti. Sed ultrices auctor laoreet. Nulla facilisi.</p>
<p><a href="#" class="button next-01">NEXT</a></p>
</div>
<div class="tour-content tour-content-02">
<h2>Innovative Space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, lorem elementum tincidunt ullamcorper, sem leo dignissim nunc, malesuada tristique velit sapien quis lectus. Suspendisse potenti. Sed ultrices auctor laoreet. Nulla facilisi.</p>
<p><a href="#" class="button next-02">NEXT</a></p>
</div>
<div class="tour-content tour-content-03">
<h2>Urban Location</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, lorem elementum tincidunt ullamcorper, sem leo dignissim nunc, malesuada tristique velit sapien quis lectus. Suspendisse potenti. Sed ultrices auctor laoreet. Nulla facilisi.</p>
<p><a href="#" class="button next-03">NEXT</a></p>
</div>
<div class="tour-content tour-content-final">
<h2>Schedule a Tour</h2>
<p class="form-field">Name</p>
<p class="form-field">Email</p>
<p class="form-field">Tour Date</p>
<p><a href="#" class="submit-button">SCHEDULE</a></p>
<p style="margin-top:45px;"><a href="index.html" class="back-final">Back to Home</a></p>
</div>
<a href="/" id="back-button">Back to Home</a>
</div>
CSS
body {
margin:0;
font-family: sans-serif;
}
p {
line-height: 1.7em;
}
a.button, a.submit-button, a.back-final {
letter-spacing: 2px;
transition: all ease 0.2s!important;
}
.home-top-container {
background:url('/wp-content/uploads/2016/01/placeholder-06.jpg');
background-size: cover;
background-position: center;
transition: all ease 0.4s;
height:700px;
}
.home-top-wrapper {
background-color: rgba(0,0,0,0.6);
text-align: center;
height: 100%;
}
.home-top-wrapper .content {
padding: 10% 18% 0 18%;
}
.home-top-wrapper h1 {
color: #fff;
font-size: 55px;
}
.home-top-wrapper p {
color: #fff;
}
.home-top-wrapper a.button {
color: #fff;
border:solid 3.5px #fff;
text-transform: uppercase;
font-weight: 700;
padding:12px 17px;
display: inline-block;
text-decoration: none;
}
.home-top-wrapper a.button:hover {
color: #222;
background-color: #fff;
}
.home-top-container.tour-bkgd {
display: none;
opacity: 0;
z-index: 0;
transition: all ease 0.8s;
}
.home-top-container.bkgd-01 {
background:url('/wp-content/uploads/2016/01/placeholder-09.jpg');
}
.home-top-container.bkgd-02 {
background:url('/wp-content/uploads/2016/01/placeholder-05.jpg');
}
.home-top-container.tour-bkgd.active {
opacity: 1!important;
}
/* --- ACTIVE TOUR --- */
#back-button {
position: absolute;
top:0;
left: 0;
padding: 16px;
color: #ddd;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
transition: all ease 0.3s;
}
#back-button:hover {
color: #555;
}
body.active-tour {
height: 100vh;
overflow: hidden;
}
.home-top-container.active-tour, .home-top-container.active-tour .home-top-wrapper {
height: 100vh;
}
.home-top-container.active-tour .home-top-wrapper {
opacity: 0;
transition: all ease 0.4s 0.4s;
}
.home-top-container.tour-bkgd.active-tour {
display: block;
opacity: 0;
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
#tour-block {
background-color: #fff;
position: absolute;
top: 0;
left: -700px;
width: 600px;
height: 100%;
z-index: 9999;
transition: all ease 0.7s 0.9s;
padding: 20vh 0 0 0;
height: 100vh;
}
.tour-content {
position: absolute;
width:80%;
margin:0 10%;
transform: translateY(-15px);
opacity: 0;
transition: all ease 0.8s 0.7s;
z-index: 0;
}
.tour-content h2 {
font-size: 45px;
}
#tour-block.active-tour {
left: 0;
}
#tour-block a.button {
color: #222;
border:solid 3.5px #222;
text-transform: uppercase;
font-weight: 700;
padding:12px 17px;
display: inline-block;
text-decoration: none;
}
#tour-block a.button:hover {
color: #fff;
background-color: #222;
}
.tour-content-01 {
transition: all ease 0.8s 1.5s;
}
.tour-content.active {
transform: translateY(0px);
opacity: 1;
z-index: 9999;
}
.tour-content.active.close {
transform: translateY(-15px);
opacity: 0;
transition: all ease 0.8s 0.1s!important;
transition-delay: 0.1s;
}
#tour-block.final {
width: 100%;
transition: all ease 0.7s 0.7s;
padding-top:10vh!important;
}
.tour-content-final {
text-align: center;
width: 30%;
margin: 0 35%;
transition: all ease 0.8s 1.35s;
}
.form-field {
border: solid 3.5px #222;
color: #bbb;
text-align: left!important;
padding: 15px;
}
.submit-button {
border: solid 3.5px #222;
background-color: #222;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 15px;
display: block;
text-decoration: none;
}
.back-final {
padding: 16px;
color: #ddd;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
transition: all ease 0.3s;
}
.back-final:hover {
color: #555;
}
JAVASCRIPT
$(".tour").click(function() {
$(".home-top-container").addClass("active-tour");
$("#tour-block").addClass("active-tour");
$(".tour-content-01").addClass("active");
$("body").addClass("active-tour");
});
$(".next-01").click(function() {
$(".tour-content-01").addClass("close");
$(".tour-content-02").addClass("active");
$(".bkgd-01").addClass("active");
});
$(".next-02").click(function() {
$(".tour-content-02").addClass("close");
$(".tour-content-03").addClass("active");
$(".bkgd-02").addClass("active");
});
$(".next-03").click(function() {
$(".tour-content-03").addClass("close");
$("#tour-block").addClass("final");
$(".tour-content-final").addClass("active");
});
