tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

start scene animation

Browse Source
This commit is contained in:
Tykayn 2023-04-24 15:21:22 +02:00 committed by tykayn
parent b3f626a15b
commit d10a4293ad
3 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@ -130,7 +130,7 @@ main section h2 {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
min-height: 100vh; height: 1300px;
left: 1px; left: 1px;
top: -2px; top: -2px;
@ -184,6 +184,9 @@ main section h2 {
#welcome img { #welcome img {
position: absolute; position: absolute;
} }
.phones-land{
z-index:-1;
}
#phone-watches-1 { #phone-watches-1 {
width: 345px; width: 345px;

16
index.html
View File

@ -43,10 +43,12 @@
</section> </section>
<section id="welcome"> <section id="welcome">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1"> <div class="phones-land">
<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-1">
<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-2">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4"> <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"> <h2 class="margin-auto container-text-lg">
We come from We come from
<span class="color-emphasis"> <span class="color-emphasis">
@ -144,8 +146,8 @@
<img src="/img/phone_clothes.png" alt="phone"> <img src="/img/phone_clothes.png" alt="phone">
</div> </div>
</section> </section>
<!-- other section--> <!-- other section-->
<section id="popover" > <section id="popover">
<div class="phone-container"> <div class="phone-container">
<div class="top"> <div class="top">
@ -169,7 +171,7 @@
</p> </p>
</div> </div>
</section> </section>
<section id="portfolio" > <section id="portfolio">
<div class="phone-container"></div> <div class="phone-container"></div>
<div id="text"> <div id="text">
<h2> <h2>

17
js/main.js
View File

@ -7,8 +7,7 @@ anime({
anime({ anime({
targets: '#hand', targets: '#hand',
backgroundPosition: ['50px', '0px'], top: ['0px', '100px'],
opacity: ['0.5', '1'],
easing: 'easeInOut' easing: 'easeInOut'
}); });
@ -29,17 +28,13 @@ anime({
let tl1 = anime.timeline({autoplay: false}); let tl1 = anime.timeline({autoplay: false});
let s1a2 = { let s1a2 = {
targets: '#cover', targets: '#hand',
backgroundColor: ['#000', '#ddd'], top: ['0px', '100px'],
borderRadius: function (el) { easing: 'easeInOut'
return anime.random(2, 10);
},
delay: function (el) {
return anime.random(0, 800);
}
}; };
// Add children // Add children
tl1.add(s1a2, '-=1300'); tl1.add(s1a2, '-=10');
let controller = new ScrollMagic.Controller(); let controller = new ScrollMagic.Controller();