LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Many people think that users don't scroll.

And the majority of content should be above something called...

'the page fold'

But users do scroll.

And sometimes they don't even need a prompt to do so.

Because scrolling is the nature of the web.

Let's design with that in mind.

CSS
@import url(https://fonts.googleapis.com/css?family=Raleway);

html,body {
  height: 100%;
  min-height: 100%;
  width: 100%;
}

body {
  background: #673AB7;
  font-family: 'Raleway';
  color: #fff;
}
section {
  height: 200%;
  width: 100%;
  display: table;
  box-sizing: border-box;
  padding: 0 2em;
}

.inner {
  max-width: 700px;
  margin: 0 auto;
}

.intro, .last {
  height: 100%;
}

p {
  height: 100%;
  display: table-cell;   
  vertical-align: middle;
  text-align: center;
  font-size: 2em;
  line-height: 1.4em;
}

.fold {
  background: #009688;
}

.shift {
  padding-top: 200%;
  position: relative;
  top: 1.5%;
  vertical-align: bottom;
}

/* Thanks to Kevin Haag for this:
https://codepen.io/khaag/pen/wotBH */

#mouse-icon{
	width:17px; height:25px;
	display:block;
	margin:-20px 0 0 -7px;
	border:3px solid #fff;
	position:absolute;
	z-index:700;
	opacity:0.6;
	top:50%; left:50%;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-moz-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#mouse-icon::before{
	content:'SCROLL';
	width:60px;
	display:block;
	margin:0 0 0 -30px;
	position:absolute;
	left:50%;
	text-align:center;
	font:1em 'Dosis', sans-serif;
	color:#fff;
	font-weight:700;
	opacity:0;
	-webkit-transform: scaleX(0);
 	-moz-transform: scaleX(0);
 	-o-transform: scaleX(0);
 	transform: scaleX(0);
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#mouse-icon:hover{
	opacity:1;
  cursor:pointer;
}

#mouse-icon:hover:before{
	margin-top:-30px;
	opacity:1;
	-webkit-transform: scaleX(1);
 	-moz-transform: scaleX(1);
 	-o-transform: scaleX(1);
 	transform: scaleX(1);
}

#scroll-wheel{
  	width:5px;
  	height:6px;
  	display:block;
  	position:absolute;
  	top:5px;
  	left:6px;
  	background:#fff;
  	-webkit-border-radius:3px;
  	-moz-border-radius:3px;
  	-o-border-radius:3px;
  	border-radius:3px;
  	-webkit-animation: scrollWheel 1s linear infinite;
	-moz-animation: scrollWheel1s linear infinite;
	-o-animation: scrollWheel 1s linear infinite;
	animation: scrollWheel 1s linear infinite;
}

@-webkit-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}

@-moz-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}

@-o-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}

Description

Just for some fun. Above the fold rant.
Term
Mon, 11/27/2017 - 21:29

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv