From d18991010cffc46e56b84eda49b255da4b2eda85 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 17 Mar 2019 23:00:49 +0200 Subject: [PATCH] add preloader --- css/style.css | 21 +++++ images/logo1.svg | 31 ++++++++ index.html | 198 ++++++++++++++++++++++++----------------------- sass/style.scss | 29 ++++++- script.js | 16 ++-- 5 files changed, 189 insertions(+), 106 deletions(-) create mode 100644 images/logo1.svg diff --git a/css/style.css b/css/style.css index 0c0961c..a3b98b7 100644 --- a/css/style.css +++ b/css/style.css @@ -341,3 +341,24 @@ option { height: 34px; } .hero .logo { width: 100%; } } + +.preloader { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1111; + background-color: #2d3b50; + text-align: center; + transition: 1s all; + opacity: 1; + visibility: visible; + display: flex; + align-items: center; + justify-content: center; } + +.done { + transform: translateY(-200%); + visibility: hidden; + z-index: -1; } diff --git a/images/logo1.svg b/images/logo1.svg new file mode 100644 index 0000000..05ef8fc --- /dev/null +++ b/images/logo1.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index b1afe4f..34d2c6d 100644 --- a/index.html +++ b/index.html @@ -15,110 +15,114 @@ - -
- - +
+
+
+

Luxury crewed catamaran fllet

+ anchor icon +
Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.
+
- - -
-
-

Luxury crewed catamaran fllet

- anchor icon -
Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.
- -
-
-
- -
-
-
- PRICE  £ / € / $
- 0 M - 200 M - -
-
- - -
-
- +
+
+ PRICE  £ / € / $ +
+ 0 M - 200 M + +
+
+ + +
+
+ +
-
-
- - - + - - -
-
- -
-
+ + +
+ +
+
- - - - - - + + + + + + diff --git a/sass/style.scss b/sass/style.scss index 34d2dda..827f9c7 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -438,4 +438,31 @@ width: 100%; } } - } \ No newline at end of file + } + + //preloader + .preloader { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1111; + background-color: $main-color; + text-align: center; + transition: 1s all; + opacity: 1; + visibility: visible; + display: flex; + align-items: center; + justify-content: center; + } + + .done { + transform: translateY(-200%); + visibility: hidden; + z-index: -1; + } + + // .logo-anim { + // } \ No newline at end of file diff --git a/script.js b/script.js index ea08911..6afab6c 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,13 @@ 'use strict'; (function() { + // invocations - // invocation - - //preloader(); + preloader(); burgerCloseIcon(); animation(); + //change burger close icon function burgerCloseIcon() { @@ -24,7 +24,7 @@ function preloader() { document.body.onload = function() { setTimeout(function() { - var preloader = document.querySelector(".preloader"); + let preloader = document.querySelector(".preloader"); if (!preloader.classList.contains('done')) { preloader.classList.add('done'); } @@ -39,16 +39,16 @@ let tl = new TimelineMax(); tl .from(".header", 1, { - y: '-300%' + y: '-300%', + delay: 2 }, ) .staggerFrom(".anim", .5, { y: '150', opacity: 0 - }, 0.2) + }, 0.4, "-=0.1") .from(".anchor", 0.1, { scale: 0 - }, "-=0.8") - + }, "-=1.6") } })(); \ No newline at end of file