Skip to content

Commit 2be10c9

Browse files
committed
renamed folders and fixed airpod website design
1 parent 1033d30 commit 2be10c9

File tree

9 files changed

+939
-0
lines changed

9 files changed

+939
-0
lines changed

airpods-design/assets/css/styles.css

Lines changed: 442 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading

airpods-design/assets/img/airpod1.png

165 KB
Loading

airpods-design/assets/img/airpod2.png

177 KB
Loading

airpods-design/assets/img/airpods.png

52.1 KB
Loading

airpods-design/assets/js/main.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const showMenu = (toggleId, navId) =>{
2+
const toggle = document.getElementById(toggleId),
3+
nav = document.getElementById(navId)
4+
5+
if(toggle && nav){
6+
toggle.addEventListener('click', ()=>{
7+
nav.classList.toggle('show')
8+
})
9+
}
10+
}
11+
12+
showMenu('nav-toggle','nav-menu')
13+
14+
/*-- ANIMATE GSAP --*/
15+
16+
/*TEXT*/
17+
gsap.from('.home__title', {opacity: 0, duration: 1.5, delay: .5, y: 50})
18+
gsap.from('.home__description', {opacity: 0, duration: 1.5, delay: .8, y: 50})
19+
20+
/*IMG AIRPOD*/
21+
gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: -40})
22+
gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40})
23+
24+
/*NAV*/
25+
gsap.from('.nav__logo', {opacity:0, duration: 2.5, delay: 1.5, y: 25});
26+
gsap.from('.nav__toggle', {opacity:0, duration: 2.5, delay: 1.7, y: 25});
27+
gsap.from('.nav__item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease:'expo.out', stagger: .3})
28+
gsap.from('.nav__btn', {opacity:0, duration: 2.5, delay: 2, y: 25});
29+
30+
31+
/*SCROLL*/
32+
gsap.from('.home__scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30})
33+
34+
35+
36+
/*-- ANIMATE SCROLLMAGIC --*/
37+
var animate = new TimelineMax({onUpdate:updatePercentage})
38+
var controller = new ScrollMagic.Controller()
39+
40+
/*DETAILS*/
41+
animate
42+
.from('.details__img', {opacity: 0, y: 25})
43+
.from('.details__box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4})
44+
45+
var scene = new ScrollMagic.Scene({
46+
triggerElement: ".details__box",
47+
})
48+
49+
.setTween(animate)
50+
.addTo(controller)
51+
52+
function updatePercentage(){
53+
animate.progress()
54+
}
55+

0 commit comments

Comments
 (0)