clivewalkden/BoKRzY.markdown

## BoKRzY.markdown

      
    Raw
  

              BoKRzY.markdown
            
          
    BoKRzY

A Pen by Clive Walkden on CodePen.
License.

  
## index.html
<body>
<div id='homecontent' style="position:relative;height:100%;">
		<img src="https://unsplash.it/1200/500">
		<div id="homearrowdown" class="arrowdownhome">
				<img width="14px" src="http://www.mikado.lu/img/home_arrowdown@2x.png" alt="test">
		</div>
</div>

<div class="maincontent">
		<h1>Main Page Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis urna sem. Maecenas ac finibus diam. Vestibulum pharetra ipsum vel posuere congue. Phasellus nec erat nec sem posuere congue sit amet rutrum quam. Mauris iaculis semper ultricies.
				Cras vehicula mattis ipsum, nec fringilla orci rutrum ut. Aenean accumsan nulla elit, eget tincidunt sem semper quis. Aliquam et mattis odio. Ut id libero eget massa maximus tempus vel nec justo. Aliquam lorem erat, aliquet vel lacus eu, imperdiet
				rhoncus dolor.</p>
		<p>Nulla facilisi. Integer sit amet sapien vehicula, maximus diam in, ultrices tortor. Nullam nec odio tincidunt, gravida massa ac, varius nunc. Etiam a sapien vel orci convallis porta ut vitae metus. Maecenas vulputate, quam vitae vestibulum faucibus,
				dolor velit egestas tortor, eget scelerisque urna ex sed ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh neque, tempor in condimentum vitae, faucibus ut diam. Suspendisse vel dolor eget sapien ultrices sodales in eu ex. In scelerisque
				vestibulum quam eu mattis. Integer molestie, nibh in elementum porttitor, est metus finibus dui, ut eleifend nisi diam sed nulla. Ut ac dictum sem, at elementum enim. Suspendisse ut lacus ante. Suspendisse nec aliquet purus, vitae vehicula sem. Maecenas
				malesuada turpis et magna maximus, vel placerat arcu aliquet. Praesent ut fermentum purus.</p>
		<p>In euismod elit non quam aliquet malesuada. Nam elementum nisl non sapien gravida, ut dignissim lorem faucibus. Ut a aliquam tellus, ac viverra nulla. Etiam viverra sapien in quam tincidunt egestas. Proin quis purus vitae quam ultricies volutpat nec
				quis purus. Mauris egestas imperdiet erat at blandit. Praesent non fermentum mauris. Quisque at tincidunt diam. Pellentesque ultrices volutpat eros vitae blandit.</p>
		<p>Cras pharetra justo et purus placerat pharetra. In nec mi aliquet, sodales neque ut, tincidunt purus. Aenean vehicula ligula eros, at rutrum arcu pulvinar sed. Sed ultricies, massa vitae rutrum feugiat, justo lorem euismod neque, quis lacinia quam tellus
				sit amet elit. Aliquam gravida felis non congue malesuada. Suspendisse venenatis gravida sem, et venenatis sapien vehicula at. Ut congue luctus tortor, in fringilla leo fringilla eget. Sed ultrices urna vitae tempor porttitor. Curabitur lectus enim,
				aliquet ac mattis sed, fringilla nec dui.</p>
		<p>Ut eget felis orci. Donec tempus velit vitae maximus iaculis. Ut pharetra sagittis lacus, eu eleifend leo elementum ac. Nam quis tristique purus. Mauris ut risus euismod, viverra risus sit amet, ornare eros. Sed sodales magna in sem sagittis luctus.
				Nulla facilisi. Duis efficitur sem elit, eu euismod magna porta a. Maecenas quis felis nisl. Nam faucibus, nunc eu molestie pretium, neque arcu semper nulla, ultricies tristique est neque ac lacus. In non felis gravida, auctor lacus non, malesuada
				justo. Ut cursus augue in lectus rhoncus blandit. Duis ac suscipit odio, eget feugiat enim. Vestibulum molestie eros quam, in consectetur tellus varius blandit. Donec augue nisi, convallis eget pharetra vel, pellentesque condimentum erat.</p>
</div>
</body>

## script.js
$(function(){

	$("#homecontent").height($(window).height());

	function slideup() {
		$('html, body').animate({
			scrollTop: 0
		}, {
			duration: 1000, // how fast we are animating
			easing: 'easeInOutCirc', // the type of easing
		});
	}

	function slidedown(speed) {
			var h = $('#homecontent').height();
			var speedanim = 1000;
			if (speed == "no") {
					speedanim = 50;
			}
			$('html, body').animate({
					scrollTop: h
			}, {
					duration: speedanim, // how fast we are animating
					easing: 'easeInOutCirc', // the type of easing
			});

			setTimeout(function() {
					hoverout();
			}, 300);
	}

	function hoverout() {
			setTimeout(function() {
				var page = window.location.hash.substr(3);

				$("#logoicon").animate({
						"width": '55px',
						"height": "55px",
						"margin-left": "-26px",
						"top": "33px",
				}, {
						duration: 100,
						easing: 'linear'
				});

				if ((page !== "home" && page !== '') || $(window).scrollTop() >= 10) {
						$(".menuactive").fadeIn(300);
						$("#menutxt").fadeOut(300);
				}
			}, 5);
	}

	function arrowjump() {
			$("#homearrowdown").animate({
					"margin-bottom": "30px"
			}, {
					duration: 500, // how fast we are animating
					easing: 'easeInOutCirc', // the type of easing
			});

			setTimeout(function() {
					$("#homearrowdown").animate({
							"margin-bottom": "0px"
					}, {
							duration: 500, // how fast we are animating
							easing: 'easeOutBounce', // the type of easing
					});
			}, 500);

			if ($('#homearrowdown').length <= 0) {
					clearInterval(homearrowanim);
			}
	}

	/*$("#homecontent").bind("mousewheel", function() {
		return false;
	});*/

	var wheelanim = false;

	$("#homecontent").on('scroll', function(event, delta) {
		console.log('test');
		if (!wheelanim) {
			wheelanim = true;
			setTimeout(function() {
				wheelanim = false;
			}, 1900);
			if (delta > 0) {
				slideup();
			} else {
				slidedown();
			}
		}
	});

	var homearrowanim = setInterval(function() {
			arrowjump();
	}, 3000);

	$('#homearrowdown').on('click',function(){
		slidedown();
	});
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.mikado.lu/js/jquery.easing.1.3.js"></script>

## style.css
#homecontent {
	height: 100%;
	width: 100%;
	overflow: hidden;
	>img{
		width: 100%;
		height: 100%;
	}
}
.arrowdownhome {
	cursor: pointer;
	z-index: 2;
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin-left: -7px;
}


.maincontent{
	padding: 5em;
	p{
		line-height: 2em;
		margin-bottom: 2em;
	}
}
	<body>
	<div id='homecontent' style="position:relative;height:100%;">
	<img src="https://unsplash.it/1200/500">
	<div id="homearrowdown" class="arrowdownhome">
	<img width="14px" src="http://www.mikado.lu/img/home_arrowdown@2x.png" alt="test">
	</div>
	</div>

	<div class="maincontent">
	<h1>Main Page Content</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis urna sem. Maecenas ac finibus diam. Vestibulum pharetra ipsum vel posuere congue. Phasellus nec erat nec sem posuere congue sit amet rutrum quam. Mauris iaculis semper ultricies.
	Cras vehicula mattis ipsum, nec fringilla orci rutrum ut. Aenean accumsan nulla elit, eget tincidunt sem semper quis. Aliquam et mattis odio. Ut id libero eget massa maximus tempus vel nec justo. Aliquam lorem erat, aliquet vel lacus eu, imperdiet
	rhoncus dolor.</p>
	<p>Nulla facilisi. Integer sit amet sapien vehicula, maximus diam in, ultrices tortor. Nullam nec odio tincidunt, gravida massa ac, varius nunc. Etiam a sapien vel orci convallis porta ut vitae metus. Maecenas vulputate, quam vitae vestibulum faucibus,
	dolor velit egestas tortor, eget scelerisque urna ex sed ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh neque, tempor in condimentum vitae, faucibus ut diam. Suspendisse vel dolor eget sapien ultrices sodales in eu ex. In scelerisque
	vestibulum quam eu mattis. Integer molestie, nibh in elementum porttitor, est metus finibus dui, ut eleifend nisi diam sed nulla. Ut ac dictum sem, at elementum enim. Suspendisse ut lacus ante. Suspendisse nec aliquet purus, vitae vehicula sem. Maecenas
	malesuada turpis et magna maximus, vel placerat arcu aliquet. Praesent ut fermentum purus.</p>
	<p>In euismod elit non quam aliquet malesuada. Nam elementum nisl non sapien gravida, ut dignissim lorem faucibus. Ut a aliquam tellus, ac viverra nulla. Etiam viverra sapien in quam tincidunt egestas. Proin quis purus vitae quam ultricies volutpat nec
	quis purus. Mauris egestas imperdiet erat at blandit. Praesent non fermentum mauris. Quisque at tincidunt diam. Pellentesque ultrices volutpat eros vitae blandit.</p>
	<p>Cras pharetra justo et purus placerat pharetra. In nec mi aliquet, sodales neque ut, tincidunt purus. Aenean vehicula ligula eros, at rutrum arcu pulvinar sed. Sed ultricies, massa vitae rutrum feugiat, justo lorem euismod neque, quis lacinia quam tellus
	sit amet elit. Aliquam gravida felis non congue malesuada. Suspendisse venenatis gravida sem, et venenatis sapien vehicula at. Ut congue luctus tortor, in fringilla leo fringilla eget. Sed ultrices urna vitae tempor porttitor. Curabitur lectus enim,
	aliquet ac mattis sed, fringilla nec dui.</p>
	<p>Ut eget felis orci. Donec tempus velit vitae maximus iaculis. Ut pharetra sagittis lacus, eu eleifend leo elementum ac. Nam quis tristique purus. Mauris ut risus euismod, viverra risus sit amet, ornare eros. Sed sodales magna in sem sagittis luctus.
	Nulla facilisi. Duis efficitur sem elit, eu euismod magna porta a. Maecenas quis felis nisl. Nam faucibus, nunc eu molestie pretium, neque arcu semper nulla, ultricies tristique est neque ac lacus. In non felis gravida, auctor lacus non, malesuada
	justo. Ut cursus augue in lectus rhoncus blandit. Duis ac suscipit odio, eget feugiat enim. Vestibulum molestie eros quam, in consectetur tellus varius blandit. Donec augue nisi, convallis eget pharetra vel, pellentesque condimentum erat.</p>
	</div>
	</body>
	$(function(){

	$("#homecontent").height($(window).height());

	function slideup() {
	$('html, body').animate({
	scrollTop: 0
	}, {
	duration: 1000, // how fast we are animating
	easing: 'easeInOutCirc', // the type of easing
	});
	}

	function slidedown(speed) {
	var h = $('#homecontent').height();
	var speedanim = 1000;
	if (speed == "no") {
	speedanim = 50;
	}
	$('html, body').animate({
	scrollTop: h
	}, {
	duration: speedanim, // how fast we are animating
	easing: 'easeInOutCirc', // the type of easing
	});

	setTimeout(function() {
	hoverout();
	}, 300);
	}

	function hoverout() {
	setTimeout(function() {
	var page = window.location.hash.substr(3);

	$("#logoicon").animate({
	"width": '55px',
	"height": "55px",
	"margin-left": "-26px",
	"top": "33px",
	}, {
	duration: 100,
	easing: 'linear'
	});

	if ((page !== "home" && page !== '') \|\| $(window).scrollTop() >= 10) {
	$(".menuactive").fadeIn(300);
	$("#menutxt").fadeOut(300);
	}
	}, 5);
	}

	function arrowjump() {
	$("#homearrowdown").animate({
	"margin-bottom": "30px"
	}, {
	duration: 500, // how fast we are animating
	easing: 'easeInOutCirc', // the type of easing
	});

	setTimeout(function() {
	$("#homearrowdown").animate({
	"margin-bottom": "0px"
	}, {
	duration: 500, // how fast we are animating
	easing: 'easeOutBounce', // the type of easing
	});
	}, 500);

	if ($('#homearrowdown').length <= 0) {
	clearInterval(homearrowanim);
	}
	}

	/*$("#homecontent").bind("mousewheel", function() {
	return false;
	});*/

	var wheelanim = false;

	$("#homecontent").on('scroll', function(event, delta) {
	console.log('test');
	if (!wheelanim) {
	wheelanim = true;
	setTimeout(function() {
	wheelanim = false;
	}, 1900);
	if (delta > 0) {
	slideup();
	} else {
	slidedown();
	}
	}
	});

	var homearrowanim = setInterval(function() {
	arrowjump();
	}, 3000);

	$('#homearrowdown').on('click',function(){
	slidedown();
	});
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://www.mikado.lu/js/jquery.easing.1.3.js"></script>
	#homecontent {
	height: 100%;
	width: 100%;
	overflow: hidden;
	>img{
	width: 100%;
	height: 100%;
	}
	}
	.arrowdownhome {
	cursor: pointer;
	z-index: 2;
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin-left: -7px;
	}


	.maincontent{
	padding: 5em;
	p{
	line-height: 2em;
	margin-bottom: 2em;
	}
	}