Как сделать так, чтобы страницы загрузки загружалась дольше и плавно исчезала и перед пользователем уже появлялся сайт без бликов? Так же не могу понять почему при имитации медленной загрузки шрифт прелоад-надписи загружается в последнюю очередь
До загрузки
После загрузки
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/clear.css" rel="stylesheet" type="text/css" />
<link href="css/adaptive.css" rel="stylesheet" type="text/css" />
<script src="js/script.js"></script>
<title>Inter-Web</title>
</head>
<body>
<div class="preloader" id="preloader">
<div class="loader">
Int<span class="blink-one">e</span>r-w<span class="blink-two">e</span>b
</div>
</div>
<section class="main">Lorem ipsum dolor sit amet consectetur adipisicing, elit. Amet numquam magnam magni reiciendis repellat neque consectetur iste quidem eveniet unde eaque similique, vel voluptas dignissimos autem fugit laudantium, suscipit at ullam voluptatum quibusdam explicabo quo! Veniam ea at veritatis error optio inventore consectetur quia quaerat aperiam repudiandae dolor ducimus est sint, porro. At reprehenderit nulla, atque ullam, nam nisi ipsa, delectus, deserunt sequi quam numquam tempora! Odit similique, facilis quos! Similique ab repellat omnis est laudantium vitae aut numquam quibusdam dignissimos, voluptatem nemo eum consequuntur, ipsum officia accusamus corporis reprehenderit, aperiam eveniet! Amet, accusantium, ad. Neque voluptate dolores corrupti sed repellendus impedit labore numquam ipsa explicabo reprehenderit porro perspiciatis, officia corporis at voluptas aliquam quae ad fuga? Aperiam, corrupti nihil possimus repudiandae nam at nemo animi iste, maxime, eveniet quibusdam, iusto ducimus quis. Quod voluptates recusandae nihil, temporibus vitae sequi, accusamus error ratione voluptate cumque perspiciatis illo veritatis eaque, autem, quasi atque. Recusandae, vero? Distinctio amet praesentium cupiditate sint, unde hic mollitia autem voluptates nesciunt. Corrupti, at, veniam eaque impedit rem, alias maiores possimus sequi nihil eligendi libero voluptatum quos obcaecati tempore minima doloribus! Animi, officiis, modi soluta facere aperiam placeat tempora aliquam ad provident consectetur blanditiis sapiente vel quisquam perspiciatis, rerum doloremque rem nostrum repudiandae deserunt facilis quibusdam obcaecati. Quas hic fugit fuga, saepe facilis possimus corrupti nobis quasi consectetur, obcaecati ad. Laboriosam necessitatibus error animi in adipisci porro, doloremque similique repellat voluptate dolores eum nobis facere neque quaerat obcaecati dicta ipsam itaque. Consequatur laboriosam numquam, in culpa labore similique quas optio ipsum veritatis facilis sit, mollitia neque corrupti commodi nihil laudantium suscipit, adipisci, cum sunt libero! Nisi quasi necessitatibus ea iste iusto ullam qui facilis numquam incidunt aut praesentium est eligendi tempora vel suscipit rerum quaerat velit repellat, debitis nam delectus explicabo molestiae iure illo consequuntur? Commodi quidem repudiandae suscipit deleniti possimus placeat consequuntur unde, eius aperiam laboriosam esse eum at quasi ducimus, consectetur earum id quos. Labore ea maiores molestiae aperiam nemo, iusto, ex deserunt dolores ratione officiis consectetur voluptas, vero alias enim maxime optio quibusdam aliquid! Accusamus eaque reiciendis maiores vitae nihil voluptates ducimus soluta vel ad modi, sed in laudantium. Neque deserunt dignissimos aperiam tempore fugiat aliquam, nihil animi fuga, cupiditate, magnam dolor rem sint accusantium quis error, enim nam explicabo quaerat eum officia ad. Voluptatibus quasi natus iste porro nisi officiis, et odio necessitatibus ullam consequuntur quibusdam corrupti iusto aliquid dolorum veritatis nobis incidunt.</section>
</body>
@font-face {
font-family: 'Rostov';
src: url('/fonts/rostov.eot'); /* IE 9 Compatibility Mode */
src: url('/fonts/rostov.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
url('/fonts/rostov.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/rostov.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
url('/fonts/rostov.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/rostov.svg#rostov') format('svg'); /* Chrome < 4, Legacy iOS */
}
/*Basic settings*/
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #000;
}
section {
height: 100%;
width: 100%;
}
/*Section preloader*/
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 1s all;
opacity: 1;
visibility: visible;
z-index: 2000!important;
background-color: black;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-family: "Rostov";
font-size: 135px;
width: 100%;
height: 100%;
}
.blink-one {
text-shadow:
0 0 10px rgba(255,255,255,.8),
0 0 20px rgba(255,255,255,.8),
0 0 22px rgba(255,255,255,.8),
0 0 40px rgba(219,66,217,.8),
0 0 60px rgba(219,66,217,.8),
0 0 80px rgba(219,66,217,.8),
0 0 100px rgba(219,66,217,.5),
0 0 140px rgba(219,66,217,.5),
0 0 200px rgba(219,66,217,.5);
animation: neon 3s infinite;
animation-timing-function: ease-out;
}
.blink-two {
text-shadow:
0 0 10px rgba(20,255,200,.8),
0 0 20px rgba(20,255,255,.8),
0 0 22px rgba(20,255,200,.8),
0 0 40px rgba(219,66,217,.8),
0 0 60px rgba(219,66,217,.8),
0 0 80px rgba(119,66,217,.8),
0 0 100px rgba(119,66,217,.5),
0 0 140px rgba(219,58,217,.5),
0 0 200px rgba(219,58,217,.5);
animation: neon 1s infinite;
animation-timing-function: ease-out;
}
@keyframes neon {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
63% {
opacity: 1;
}
93% {
opacity: 1;
}
95% {
opacity: 0;
}
97% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.main {
background-color: red;
}
window.onload = function(){
let preloader = document.getElementById('preloader');
preloader.style.display = 'none';
}
Простой
