<div class="wrapper"></div>
<div class="footer">footer!</div>
*,*::before,*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
background-color: #2c2a2a;
color: #fff;
}
.wrapper {
min-height: 100vh;
background-repeat: no-repeat;
background-position: 50%;
-webkit-background-size: cover;
background-size: cover;
background-image: url(https://i.imgur.com/YCSYk8J.jpg);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
box-shadow: 0 22px 54px rgba(0,0,0,.5);
}
.small {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-o-transform: scale(.9);
transform: scale(.9);
cursor: pointer;
}
.footer {
padding: 20px 0;
text-align: center;
text-transform: uppercase;
font-size: 20px;
}
$(function () {
var wrapper = $('.wrapper');
var windowObj = $(window);
function decreaseWrapper () {
wrapper.addClass('small');
}
function increaseWrapper () {
wrapper.removeClass('small');
}
windowObj.scroll(function () {
if ( $(this).scrollTop() + $(this).height() > wrapper.outerHeight() ){
decreaseWrapper();
} else {
increaseWrapper();
}
});
$('html').on('click', '.small', function () {
$('html, body').animate({
scrollTop: wrapper.outerHeight() - windowObj.height()
}, 500);
});
});
This Pen doesn't use any external CSS resources.