Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Preloading Screen
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/hanna.css">
<div class="wrapper">
<div id="loader-wrapper">
<div id="loader">
<p>LOADING</p>
<div class="circ-one"></div><div class="circ-two"></div>
</div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div id="content">
<div class="wrapper preload">
<section class="grid-unit top-left">
<div class="swing-panel">
<span class="desc">Documents</span>
</div>
<div class="sphere"></div>
<span class="entypo-book-open icon"></span>
<span class="label">Documents</span>
</section>
<section class="grid-unit top-right">
<div class="swing-panel">
<span class="desc">About Me</span>
</div>
<div class="sphere"></div>
<span class="entypo-vcard icon"></span>
<span class="label">About Me</span>
</section>
<section class="grid-unit bottom-left">
<div class="swing-panel">
<span class="desc">Settings</span>
</div>
<div class="sphere"></div>
<span class="entypo-tools icon"></span>
<span class="label">Settings</span>
</section>
<section class="grid-unit bottom-right">
<div class="swing-panel">
<span class="desc">Gallery</span>
</div>
<div class="sphere"></div>
<span class="entypo-picture icon"></span>
<span class="label">Gallery</span>
</section>
</div><!-- end wrapper -->
</div>
$(document).ready(function() {
setTimeout(function() {
$('.wrapper').addClass('loaded');
}, 3000);
});
jQuery(function(){
$(window).load(function(){
$('.wrapper').removeClass('preload');
});
});
@import "bourbon";
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
p {
line-height: 1.33em;
color: #7E7E7E;
font-family: 'Lemon', cursive;
}
h1 {
color: #EEE;
}
#content {
margin: 0 auto;
padding-bottom: 50px;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
z-index: 1001;
animation: spin 2s linear infinite;
&:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
animation: spin 3s linear infinite;
}
&:after {
content: "";
position: absolute;
top: 15px;
right: 15px;
left: 15px;
bottom: 15px;
border-radius: 50%;
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background-color: lightgray;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
z-index: 1000;
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader {
display: block;
width: 100px;
height: 100px;
margin: 50 auto;
}
.circ-one {
position: relative;
display: block;
width: 50px;
height: 50px;
background: rgba(217,91,67,1);
border-radius: 100%;
float: left;
animation: load-x 1s cubic-bezier(0.445, 0.100, 0.550, 0.900) infinite;
}
.circ-two {
position: relative;
display: block;
width: 50px;
height: 50px;
background: rgba(84,36,55,1);
border-radius: 100%;
float: right;
animation: load-y 1s cubic-bezier(0.445, 0.100, 0.550, 0.900) infinite;
}
@keyframes load-x {
0% { left: -10px; transform: scale(1); }
25% { transform: scale(1.5); z-index: 2; }
50% { left: 60px; transform: scale(1); }
75% { transform: scale(0.5); z-index: 1; }
100% { left: -10px; transform: scale(1); }
}
@keyframes load-y {
0% { right: -10px; transform: scale(1); }
25% { transform: scale(0.5); }
50% { right: 60px; transform: scale(1); z-index: 1; }
75% { transform: scale(1.5); z-index: 2; }
100% { right: -10px; transform: scale(1); }
}
#loader p {
text-align: center;
font-family: 'Hanna', serif;
font-weight: 50;
color:rgba(192,41,66,1);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
50% { opacity: 0.5; }
}
// Loaded
.loaded #loader-wrapper .loader-section.section-left {
transform: translateY(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
transform: translateY(100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
transform: translateX(-100%);
transition: all 0.3s 1s ease-out;
}
@import url(http://fonts.googleapis.com/css?family=Oxygen);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
box-sizing: border-box;
}
.preload * {
transition: none !important;
}
html
{
position: relative;
min-height: 100%;
}
.wrapper{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.grid-unit {
position: relative;
float: left;
border-top: 10px solid #fff;
border-left: 10px solid #fff;
width: 50%;
height: 50%;
perspective: 800;
overflow: hidden;
}
.top-left {
background: rgba(236,208,120,1);
}
.top-left:hover {
background-image: url('http://zvczvc.zz.vc/img/%ED%95%98%EB%B2%84%20%EB%B8%8C%EB%A6%BF%EC%A7%80.jpg');
background-size: cover;
border-right: 10px solid #fff;
background-blend-mode: multiply;
background-color: rgba(236,208,120,1);
}
.top-right {
background: rgba(217,91,67,1);
border-right: 10px solid #fff;
}
.top-right:hover {
background-image: url('http://content.finda.photo/unsplash/oFAVqfTSby8.jpg');
background-size: cover;
border-right: 10px solid #fff;
background-blend-mode: multiply;
background-color: rgba(217,91,67,1);
}
.bottom-right {
background: rgba(192,41,66,1);
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
}
.bottom-right:hover {
background-image: url('http://zvczvc.zz.vc/img/%EB%A9%94%ED%8A%B8%EB%A1%9C%ED%8F%B4%EB%A6%AC%ED%83%84%20%EB%AF%B8%EC%88%A0%EA%B4%80.jpg');
background-size: cover;
border-right: 10px solid #fff;
background-blend-mode: multiply;
background-color:rgba(192,41,66,1);
}
.bottom-left {
background: rgba(84,36,55,1);
border-bottom: 10px solid #fff;
}
.bottom-left:hover {
background-image: url('http://zvczvc.zz.vc/img/5%20hartensteinabroad%20pont%20neuf%20bridge%20paris.JPG');
background-size: cover;
background-blend-mode: multiply;
background-color: rgba(84,36,55,1);
}
.swing-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 2.5em;
color: #fff;
font-family: Oxygen, arial, sans-serif;
transform-origin: left 50%;
transform: rotateY(120deg);
transition: transform .5s ease;
letter-spacing: -.05em;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.top-right .swing-panel,
.bottom-right .swing-panel{
transform-origin: right 50%;
transform: rotateY(-120deg);
}
.desc {
display: block;
position: absolute;
padding: 5%;
}
.label {
position: absolute;
font-family: Oxygen, arial, sans-serif;
color: #fff;
font-size: 1.2em;
opacity: 1;
transition: opacity .5s ease;
}
.grid-unit:hover .label {
opacity: 0;
}
.top-left .label {
bottom: 100px;
right: 80px;
transform: rotate(45deg);
}
.top-right .label {
bottom: 100px;
left: 80px;
transform: rotate(-45deg);
}
.bottom-left .label {
top: 100px;
right: 80px;
transform: rotate(-45deg);
}
.bottom-right .label {
top: 100px;
left: 80px;
transform: rotate(45deg);
}
.top-left .desc {
top: 0;
left: 0;
}
.top-right .desc {
top: 0;
right: 0;
}
.bottom-left .desc {
bottom: 0;
left: 0;
}
.bottom-right .desc {
bottom: 0;
right: 0;
}
.grid-unit:hover .swing-panel {
transform: rotateY(0deg);
}
.sphere {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255,255,255,1);
border-radius: 500px;
transition: background-color .25s ease;
opacity: 1;
}
.top-left .sphere {
right: -100px;
bottom: -100px;
}
.top-right .sphere {
left: -100px;
bottom: -100px;
}
.bottom-right .sphere {
left: -100px;
top: -100px;
}
.bottom-left .sphere {
right: -100px;
top: -100px;
}
.grid-unit:hover .sphere {
background-color: rgba(255,255,255,0);
}
.icon {
position: absolute;
font-size: 2em;
transition: all .25s ease;
z-index: 5;
}
.bottom-left .icon {
top: 20px;
right: 30px;
color: rgba(84,36,55,1);
}
.bottom-right .icon {
top: 20px;
left: 22px;
color: rgba(192,41,66,1);
}
.top-right .icon {
bottom: 25px;
left: 20px;
color: rgba(217,91,67,1);
}
.top-left .icon {
bottom: 25px;
right: 35px;
color: rgba(236,208,120,1);
}
.grid-unit:hover .icon {
color: #fff;
font-size: 8em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment