<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);
	});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js