From d10a4293adc9e2dfdd5da873925ac2f44e6f5cce Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 24 Apr 2023 15:21:22 +0200
Subject: [PATCH] start scene animation

---
 css/main.css |  5 ++++-
 index.html   | 16 +++++++++-------
 js/main.js   | 17 ++++++-----------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/css/main.css b/css/main.css
index 414e8a5..b52e1e0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -130,7 +130,7 @@ main section h2 {
 
   position: absolute;
   width: 100vw;
-  min-height: 100vh;
+  height: 1300px;
   left: 1px;
   top: -2px;
 
@@ -184,6 +184,9 @@ main section h2 {
 #welcome img {
   position: absolute;
 }
+.phones-land{
+  z-index:-1;
+}
 
 #phone-watches-1 {
   width: 345px;
diff --git a/index.html b/index.html
index 4c5dd66..be4375c 100644
--- a/index.html
+++ b/index.html
@@ -43,10 +43,12 @@
   </section>
   <section id="welcome">
 
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
+    <div class="phones-land">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
+    </div>
     <h2 class="margin-auto container-text-lg">
       We come from
       <span class="color-emphasis">
@@ -144,8 +146,8 @@
       <img src="/img/phone_clothes.png" alt="phone">
     </div>
   </section>
-<!--  other section-->
-  <section id="popover" >
+  <!--  other section-->
+  <section id="popover">
     <div class="phone-container">
       <div class="top">
 
@@ -169,7 +171,7 @@
       </p>
     </div>
   </section>
-  <section id="portfolio" >
+  <section id="portfolio">
     <div class="phone-container"></div>
     <div id="text">
       <h2>
diff --git a/js/main.js b/js/main.js
index 5627b2a..d1ca99a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,8 +7,7 @@ anime({
 
 anime({
   targets: '#hand',
-  backgroundPosition: ['50px', '0px'],
-  opacity: ['0.5', '1'],
+  top: ['0px', '100px'],
   easing: 'easeInOut'
 });
 
@@ -29,17 +28,13 @@ anime({
 let tl1 = anime.timeline({autoplay: false});
 
 let s1a2 = {
-  targets: '#cover',
-  backgroundColor: ['#000', '#ddd'],
-  borderRadius: function (el) {
-    return anime.random(2, 10);
-  },
-  delay: function (el) {
-    return anime.random(0, 800);
-  }
+  targets: '#hand',
+  top: ['0px', '100px'],
+  easing: 'easeInOut'
 };
+
 // Add children
-tl1.add(s1a2, '-=1300');
+tl1.add(s1a2, '-=10');
 
 let controller = new ScrollMagic.Controller();