AndrewMantarro
9/11/2017 - 12:24 AM
Home Page Full Screen Logo Split Preloader - this is the code for opening animation with the logo in the center and the screen splits > plea
Home Page Full Screen Logo Split Preloader - this is the code for opening animation with the logo in the center and the screen splits > please put cookie.js to the root > this is available in G:~Template Working-Folders\Full-Page-Preloader > the cookie is set up to show the opening sequence once on opening, when the browers is closed it resets the opening sequence and will show again when the site is visted again
<!-- PRELOADER -->
<div id="loader-wrapper" class="change-message--on-load">
<div id="loader">
<img src="/files/logo.svg" id="icon">
<div id="loaderIcon"></div>
</div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>/* ----------- PRELOADER ICON ----------- */
#loaderIcon {
animation: animateLoad 1.5s linear infinite;
clip: rect(0, 80px, 80px, 40px);
height: 60px;
width: 60px;
position: absolute;
left: calc(50% - 40px);
top: calc(50% + 100px); /*-- adjust vertical position --*/
}
@keyframes animateLoad {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#loaderIcon:after {
animation: animateLoader 1.5s ease-in-out infinite;
clip: rect(0, 80px, 80px, 40px);
content:'';
border-radius: 50%;
height: 60px;
width: 60px;
position: absolute;
}
@keyframes animateLoader {
0% {
box-shadow: inset #ccc 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #ccc 0 0 0 2px;
}
100% {
box-shadow: inset #ccc 0 0 0 17px;
transform: rotate(140deg);
}
}
/* ---------------------------------- */
/* ----------- PRELOADER ----------- */
/* ---------------------------------- */
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 9999999;
overflow: hidden;
}
#loader {
position: relative;
display: block;
width: 90%;
height: 100%;
margin: auto;
max-width: 400px;
border: 3px solid transparent;
z-index: 1001;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
#loader img{
width:100%;
height:auto;
opacity:0;
filter: alpha(opacity=0);
}
#loader img{
-webkit-animation: load 4s alternate;
animation: load 4s alternate;
}
@-webkit-keyframes load {
0% {
opacity:0;
filter: alpha(opacity=0);
}
30% {
opacity:1;
filter: alpha(opacity=100);
}
70% {
opacity:1;
filter: alpha(opacity=100);
}
100% {
opacity:0;
filter: alpha(opacity=0);
}
}
@keyframes load {
0% {
opacity:0;
filter: alpha(opacity=0);
}
30% {
opacity:1;
filter: alpha(opacity=100);
}
70% {
opacity:1;
filter: alpha(opacity=100);
}
100% {
opacity:0;
filter: alpha(opacity=0);
}
}
#loader-wrapper .loader-section {
position: absolute;
top: 0;
width: 51%;
height: 100%;
background: #2f2f2f;
z-index: 1000;
-webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(0); /* IE 9 */
transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%); /* IE 9 */
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.hide--first {
display: none;
}
.hide--second {
display: none;
}<script>
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 2000);
});
</script>
<script type="text/javascript" src="/cookie.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
// COOKIES
// if the cookie is true, hide the initial message and show the other one
if ($.cookie('hide-after-load') == 'yes') {
$('.change-message--on-load').removeClass('hide--second');
$('.change-message--on-load').addClass('hide--first');
}
// if the cookie is true, hide the initial message and show the other one
if ($.cookie('hide-after-click') == 'yes') {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
}
// add cookie to hide the first message after load (on refresh it will be hidden)
$.cookie('hide-after-load', 'yes');
// when clicked on ?X? icon do something
$('.close').click(function() {
// check that ?X? icon was not cliked before (hidden)
if (!$('.change-message--on-click').is('hide--first')) {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
// add cookie setting that user has clicked
$.cookie('hide-after-click', 'yes');
}
return false;
})
//reset the cookies (not shown in tutorial)
$('.reset a').click(function() {
// check that if it was cliked before or not
if (!$(this).hasClass('clicked')) {
// add class that the link is clicked and shot the footer with delay
$(this).addClass('clicked');
// add cookie setting that user has clicked
$.cookie('hide-after-load', 'no');
$.cookie('hide-after-click', 'no');
}
location.reload();
});
});
</script>