diff --git a/dex.css b/dex.css new file mode 100644 index 0000000..08a8b02 --- /dev/null +++ b/dex.css @@ -0,0 +1,790 @@ +@font-face { + font-family: kor; + src: url(./fonts/korataki-rg-3cf0d889.ttf); +} +@font-face { + font-family: gil; + src: url(./fonts/Gilroy-Medium.ttf); +} + +*{ + margin:0; + padding: 0; + box-sizing: border-box; + +} +html,body{ + height: 100%; + width: 100%; +} +#main{ + background-color: #000; +} +#home-page{ + height: 100vh; + width: 100em; + position: relative; + overflow: hidden; + +} +#phone1{ + position: absolute; + background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png); + background-size: cover; + background-position: center; + height: 450px; + width: 430px; + top: 90px; + rotate: -25deg; + right: 25%; +} +#phone2{ + position: absolute; + background-image: url(./NothingPhoneImages/BA_ABR_300_1001.png); + background-size: cover; + background-position: center; + height: 450px; + width: 430px; + top: 100px; + rotate: -25deg; + right: 20%; +} +#pag{ + height: 100vh; + width: 100%; + position: relative; + + +} +#page{ + height: 100vh; + width: 100%; + position: relative; + +} +#page #imgdiv{ + height: 100%; + width: 30%; + position: relative; + background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png); + background-position: center; + background-size: cover; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 3; + +} +#page h2{ + + background: url(./NothingPhoneImages/10628409-water-droplets-on-a-metal-surface.jpg); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-family: kor; + font-size: 7vh; + font-weight: 900; + opacity: 0; + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + background-position: center; + background-size: cover; + +} +#page #splash1{ + height: 100%; + width: 30%; + background-image: url(./NothingPhoneImages/splash2.png); + position: absolute; + background-size: cover; + background-position: center; + top: 5%; + left: -50%; + z-index:3; + opacity: 0; + + +} +#page #splash2{ + height: 100%; + width: 30%; + background-image: url(./NothingPhoneImages/splash1.png); + position: absolute; + background-size: cover; + background-position: center; + top: 50%; + right: -50%; + z-index:3; + transform: translate(-50%,-50%); + opacity: 0; +} +#page1{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; +} +#page1 #imgdiv{ + height: 100%; + width: 30%; + position: relative; + background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png); + background-position: center; + background-size: cover; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 0; + +} +#page00{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; +} +#page00 #imgdiv00{ + height: 100%; + width: 30%; + position: relative; + background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png); + background-position: center; + background-size: cover; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 0; + +} +#page00 .Group50::before{ + content: "Front Camera"; + position: absolute; + top: -30px; + left: 25px; + font-family: kor; + color: #999D9C; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; +} +#page00 h1{ + color: #999D9C; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 7vh; + font-weight: 100; + opacity: 0; +} +#page00 h2{ + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width: 0.1px; + -webkit-text-stroke-color:#999D9C; + text-align: center; + position: absolute; + top: 40%; + right: -10%; + rotate: 90deg; + font-family: kor; + font-size: 18vh; + font-weight: 900; + opacity: 0; + +} +.Group50 p{ + position: absolute; + color: white; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; + text-align: center; + margin-top: 10px; + font-family: gil; +} +#page2{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; + position: relative; +} +#page2 #imgdiv2{ + height: 100%; + width: 30%; + position: relative; + background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png); + background-position: center; + background-size: cover; + left: 50%; + top: 50%; + opacity: 0; + transform: translate(-50%, -50%); + z-index: 3; + + +} +/* #page2 #imgdiv3{ + height: 71.5%; + width: 15%; + position: absolute; + background-image: url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg); + background-position: center; + background-size: cover; + top: 14.5%; + left: 42.5%; + + border-radius: 25px; + opacity: 1; + z-index: 99; + opacity:1; +} */ +#page1 h1{ + color: #999D9C; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 7vh; + font-weight: 100; + opacity: 0; +} +#page1 h2{ + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width: 0.1px; + -webkit-text-stroke-color:#999D9C; + text-align: center; + position: absolute; + top: 40%; + right: -10%; + rotate: 90deg; + font-family: kor; + font-size: 18vh; + font-weight: 900; + opacity: 0; + +} +.Group4::after{ + content: "Ultra Wide"; + position: absolute; + bottom: -30px; + left: 25px; + font-family: kor; + color: #999D9C; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; +} +.Group3::before{ + content: "Main Camera"; + position: absolute; + top: -30px; + left: 25px; + font-family: kor; + color: #999D9C; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; +} +.Group3 p{ + position: absolute; + color: white; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; + text-align: center; + margin-top: 10px; + font-family: gil; +} +.Group4 p{ + position: absolute; + color: white; + font-size: 2.7vh; + width: 100%; + letter-spacing: 1.5px; + text-align: center; + margin-top: 10px; + font-family: gil; +} +#page2 h1{ + -webkit-text-fill-color: transparent; + background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-family: kor; + font-size: 30vh; + font-weight: 100; + -webkit-background-clip: text; + animation: shine 3s infinite linear; + animation-fill-mode: forwards; + background-position: 0; + opacity: 0.3; +} +@keyframes shine{ + 0%{ + background-position: 0; + } + 60%{ + background-position: 500px; + } + 100%{ + background-position: 1000px; + } +} +#page2 h3{ + color: #999D9C; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 7vh; + font-weight: 100; + opacity: 0; + width: 100%; +} +#page2 h4{ + color: #999D9C; + + text-align: center; + position: absolute; + top: 75%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 20vh; + font-weight: 100; + opacity: 1; + background:url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg); + background-position:center; + background-size: cover; + color: transparent; + -webkit-background-clip: text; + +} +#page2 p{ + color: #999D9C; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 3vh; + font-weight: 100; + opacity:0; + width: 100%; + +} +#page2 span{ + color: white; +} +#page3{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; + position: relative; +} +#page3 #imgdiv4{ + height: 100%; + width: 40%; + position: absolute; + background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png); + background-position: center; + background-size: cover; + left: 53%; + top: -37%; + transform: translate(-50%,-50%); + z-index: 2; + rotate: -90deg; + +} +#page3 #imgdiv5{ + height: 62%; + width: 43%; + position: absolute; + background-image: url(./NothingPhoneImages/enter2-hand.png); + background-position: center; + background-size: cover; + left: 50%; + top: 100%; + transform: translate(-50%,-50%); + z-index: 3; + + opacity: 0; +} +#page3 h1{ + -webkit-text-fill-color: transparent; + background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%); + position: absolute; + top: 50%; + left: 51%; + + transform: translate(-50%,-50%); + font-family: kor; + font-size:50vh; + font-weight: 100; + -webkit-background-clip: text; + animation: shine 3s infinite linear; + animation-fill-mode: forwards; + background-position: 0; + opacity: 0.3; + width: 100%; + white-space: nowrap; +} +#page3 h3{ + color: #999D9C; + text-align: center; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 7vh; + font-weight: 100; + opacity: 0; + width: 100%; + +} +#page3 p{ + color: #999D9C; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 3vh; + font-weight: 100; + opacity:0; + width: 100%; + +} +#page3 span{ + color: white; +} +#page3 video{ + position: absolute; + z-index: 2; + border-radius: 25px; + height: 14.5em; + top: 56.5%; + left: 50%; + transform: translate(-50%,-50%); + width: 31.8em; + object-fit: cover; + +} +#page4{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; + position: relative; +} +#page4 #imgdiv6{ + height: 100%; + width: 50%; + position: absolute; + background-image: url(./NothingPhoneImages/new.png); + background-position: center; + background-size: cover; + left: -30%; + top: 40%; + transform: translate(-50%,-50%); + z-index: 2; + + +} +#page4 #imgdiv7{ + height: 100%; + width: 50%; + position: absolute; + background-image: url(./NothingPhoneImages/new2.png); + background-position: center; + background-size: cover; + right:-80%; + top: 70%; + transform: translate(-50%,-50%); + z-index: 2; + +} +#page4 #txt1{ + position: absolute; + top: 25%; + left: 0%; + letter-spacing: 1.5px; + transform: translate(-50%,-50%); + font-family: kor; + color: #999D9C; + font-size: 6vh; + font-weight: 100; + background-position: 0; + opacity: 0; + width: 100%; + white-space: nowrap; +} +#page4 #txt2{ + position: absolute; + top: 83%; + left: 100%; + letter-spacing: 1.5px; + transform: translate(-50%,-50%); + font-family: kor; + color: #999D9C; + font-size: 6vh; + font-weight: 100; + background-position: 0; + opacity: 0; + width: 100%; + white-space: nowrap; +} +#page5{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #000; + position: relative; +} +#page5 #imgdiv8{ + height: 100%; + width: 50em; + position: absolute; + background-image: url(./NothingPhoneImages/new3.png); + background-position: center; + background-size: cover; + left: -30%; + top: 60%; + transform: translate(-50%,-50%); + z-index: 2; + + +} +#page5 #imgdiv9{ + height: 100%; + width: 50%; + position: absolute; + background-image: url(./NothingPhoneImages/new4.png); + background-position: center; + background-size: cover; + right:-80%; + top: 75%; + transform: translate(-50%,-50%); + z-index: 2; + +} +#page5 p{ + position: absolute; + top: 17%; + left: 65%; + letter-spacing: 1.5px; + transform: translate(-50%,-50%); + font-family: kor; + color: #999D9C; + font-size: 6vh; + font-weight: 100; + background-position: 0; + opacity: 0; + width: 100%; + white-space: nowrap; +} +#page5 #up{ + position: absolute; + top: 17%; + left: 65%; + letter-spacing: 1.5px; + transform: translate(-50%,-50%); + font-family: kor; + color: #999D9C; + font-size: 6vh; + font-weight: 100; + background-position: 0; + opacity: 0; + width: 100%; + white-space: nowrap; + -webkit-text-fill-color: transparent; + -webkit-text-stroke-color: #999D9C; + -webkit-text-stroke-width: 1.5px; +} +#page5 #down{ + position: absolute; + top: 17%; + left: 65%; + letter-spacing: 1.5px; + transform: translate(-50%,-50%); + font-family: kor; + font-size: 6vh; + font-weight: 100; + background-position: 0; + opacity: 0; + width: 100%; + white-space: nowrap; + -webkit-text-fill-color: transparent; + -webkit-text-stroke-color: #999D9C; + -webkit-text-stroke-width: 1.5px; +} + + +.design-section{ + padding-top: 3vh; + width: 100%; + + background: #000; + +} +.design-section>h1{ + font-size: 4vw; + font-weight: 900; + font-family: kor; + -webkit-text-stroke: #999D9C .1px; + color: transparent; + letter-spacing: .25vw; + text-align: center; + margin-bottom: 3vw; +} +.elem , .elem2{ + width: 100%; + /* background: red; */ + border-top: 2px solid white; + cursor: pointer; + font-family: kor; + font-weight: 100; +} +.elem .heading h1 { + color: #999d9c; + font-size: 2.5vw; + letter-spacing: .3vw; + padding: 2vw 3vw ; + font-family: kor; + font-weight: 100; +} +.details{ + overflow: hidden; + background: #999d9c; + height: 0vh; +} +.details p{ + line-height: 2vw; + padding: 2vw 3vw; + color: #000; + height: fit-content; +} +.elem-box{ + border-bottom: 2px solid white; +} + +/* camera section */ +.camera-section{ + padding-top: 3vh; + width: 100%; + padding-top: 4vh; + background-color: #000; + +} +.camera-section>h1{ + font-size: 4vw; + font-weight: 900; + font-family: kor; + -webkit-text-stroke: #999D9C .1px; + color: transparent; + letter-spacing: .25vw; + text-align: center; + margin-bottom: 3vw; +} +.camera-elem{ + width: 100%; +} +.camera-details{ + display: flex; + /* justify-content: space-between; */ + gap: 10vw; +} +.elem2 .heading h1 { + color: #999d9c; + font-size: 2.5vw; + letter-spacing: .3vw; + padding: 2vw 3vw ; +} +.footer{ + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 10vh; + background-color: #000; +} +.footer-top{ + width: 100%; + /* background: rgb(70, 110, 110); */ + display: grid; + grid-template-columns: 20% 20% 20% 30% ; + grid-row: 20% 20% 20% ; + gap: 3vw; + margin-top: 10vh; + padding: 0 5vh; +} +.footer .links h1{ + color: white; + font-size: 1.3vw; + margin-bottom: 1.2vw; + font-family: kor; + font-weight: 100; +} +.footer .links h4{ + line-height: 2vw; + color: white; + font-weight: 100; + font-size: .8vw; + font-family: kor; + font-weight: 100; +} +.footer .links h4 a{ + text-decoration: none; + color: white; +} +.footer-top .links input{ + background: #000; + border: 2px solid #fff; + border-radius: 8px; + padding: 1vw .5vw; + color: #fff; + font-family: kor; + font-weight: 100; + padding-left: 20%; +} +.footer-bottom{ + border-top: 2px solid #fff; + display: flex; + padding: 4vh 2vw; + gap: 4vw; + justify-content: space-between; +} +.footer-bottom h3{ + font-size: 1vw; + font-weight: 100; + +} +.footer-bottom h3 a{ + text-decoration: none; + color: white; + font-family: kor; + font-weight: 100; +} +.footer-bottom .icons a{ + font-size: 1.7vw; + background-color: #fff; + color: #000; + text-decoration: none; + padding: 0.3vw; + border-radius: 50%; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..edad399 --- /dev/null +++ b/index.html @@ -0,0 +1,507 @@ + + + + + + Nothing Phone (1) - Nothing India + + + + + + + +
+ +
+ + +
+
+
+
+
+
+
+
+
NOTHING
+
+
+
+
+
+
+
+
+
+
Store
+
+
+
+
+
+
+
+
+
+
Support
+
+
+
+
+
+
+
+
+
+
Community
+
+
+
+
+
+
+ +
+
+
+
+
+
+
NOTHING PHONE (1)
PURE INSTINCT
+
+
+
Snapdragon 778G+ | 50 MP Dual Camera
+
+
+
Features
+
+
+
+
+
+
+
Design
+
Design that goes beyond the surface
+
+
+
+
+
+
+
+
Camera
+
50MP dual camera with Sony IMX sensor
+
+
+
+
+
+
+
+
Display
+
6.55 AMOLED HDR10+ Display.
+
+
+
+
+
+
+
+
Sustainability
+
Made with 100% recycled aluminium.
+
+
+
+
+
+
+
+
Battery
+
Fuel everything you need. Enjoy as much as you want.
+
+
+
+
+
+
+
+
Glyph Interface
+
A new way to communicate. Unique light patterns
+
+
+
+
+
+
+
+
Chipset
+
Snapdragon 778G+ accelerated by 5G
+
+
+
+
+
+
+
+
Performance
+
Essential power for speed and gaming
+
+ +
+
+
+

IP53

+
+
+
+
+
+ +
+

Shoot Every Detail
Feel Every Emotion

+

50MP

+
+
+
+
+
+
+
+
+

50 MP
Sony IMX766 sensor

+
+
+
+
+
+
+
+
+
+
+

50 MP
Samsung JN1 sensor

+
+
+
+
+
+

Include yourself with every moment

+

16MP

+
+
+
+
+
+
+
+
+

16 MP
Sony IMX471 sensor

+
+
+
+
+
+
+

HDR10+

+

Outshine the Ordinary
10 Bit AMOLED Display

+

1200nits Peak Brightness

+

120HZ

+ +
+
+

Experience the Ultimate
Performance with Snapdragon
778G+ chipset

+

596815 Antutu benchmark score

+
+ + + + +
+

6 nm

+
+ +
+
+
+

The symmetrical bezels and aluminium frame

+

adds elegance, lightness and durability

+ +
+
+

Shining White and Shining Black

+
Shining White and Shining Black
+
Shining White and Shining Black
+
+
+
+ +
+

Design

+
+
+
+

Display

+
+
+

6.55” flexible AMOLED display
+ Corning® Gorilla® Glass
+ HDR10+
+ 10-bit colour depth
+ 2400x1080-pixel resolution at 402 ppi
+ 1,000,000:1 contrast ratio
+ 500 nits brightness; 1200 nits peak brightness
+ 60Hz - 120Hz adaptive refresh rate
+ 240Hz touch sampling rate
+ Haptic touch motors

+
+
+
+
+

Capacity

+
+
+

8 RAM + 128 GB memory
+ 8 RAM + 256 GB memory
+ 12 RAM + 256 GB memory

+
+
+
+
+

Dimensions

+
+
+

Height: 159.2 mm
+ Width: 75.8 mm
+ Depth: 8.3 mm
+ Weight: 193.5 g

+
+
+
+
+

In The Box

+
+
+

Nothing Phone (1)
+ Type-C cable
+ Safety information and warranty card
+ Screen protector
+ (pre-applied)
+ SIM tray ejector

+
+
+
+ + +
+ +
+

Camera

+
+
+
+

Main camera

+
+
+

50 MP
Sony IMX766 sensor
Focal length: 24 mm
OIS and EIS image stabilisation
Panorama Night Mode
Portrait Mode
Beauty Mode
Bokeh
Time-lapse + HDR

+ +

Google Filter
Scence Detection
Live Photo
Document Mode
Night Mode
Extreme Night Mode
Night Video
Export Mode
Panorama
Slo-Mo (120 fps)

+ +
+
+ +
+
+

Video

+
+
+

4K recording at 30 fps
+ 1080p recording at 30 or 60 fps
+ Live HDR at 30 fps

+ +

Slo-mo (120 fps)
+ Night Mode
+ (720p/1080p at 30 fps)
+ OIS and EIS image stabilisation

+ +
+
+
+
+

Front Camera

+
+
+

16 MP
Sony IMX471 sensor
ƒ/2.45 aperture
1/3.1” sensor size
Live Photo
HD Portrait

+ +

Google Filter
+ Beauty Mode
+ Night Mode
+ 1080p video recording
+ 30 fps

+ +
+
+ +
+
+

Ultra wide

+
+
+

50 MP
Samsung JN1 sensor
ƒ/2.2 aperture
1/2.76” sensor size
EIS image stabilisation
114° field of view
Night Mode
Macro (4 cm)
HDR

+
+
+ +
+
+ +
+

Features

+
+
+
+

Battery

+
+
+

4500 mAh battery size
+ 33W PD3.0 wired charging: full charge in 70 mins
+ 15W Qi wireless charging with dual charging support: full charge in 120 mins
+ 5W reverse charging
+ Only use with chargers compatible with Quick Charge 4.0.

+
+
+
+
+

Sensors

+
+
+

In-display Fingerprint Sensor
+ Accelerometer
+ Electronic Compass
+ Gyroscope
+ Ambient Light Sensor
+ Proximity Sensor
+ Sensor Core
+ Front RGB sensor

+
+
+
+
+

Memory

+
+
+

RAM: 8/12GB LPDDR5
+ Storage: 128/256GB UFS 3.1

+
+
+
+
+

Face & Finger Unlock

+
+
+

Unlock Phone (1) using fingerprint or facial recognition. Works with face coverings

+
+
+
+
+

Audio

+
+
+

3 high definition mics
+ Dual stereo speakers

+
+
+
+
+

Sim Card

+
+
+

Dual SIM

+
+
+
+
+

Chipset

+
+
+

Snapdragon™ 778G+
+ 6nm TSMC process
+ 1xA78 2.5GHz+3xA78 2.4GHz+4xA55 1.8GHz
+ Adreno 642L GPU
+ Hexagon 770 AI processor.

+
+
+
+
+

Splash, Water & Dust Resistance

+
+
+

IP53

+
+
+ +
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..13a2bd4 --- /dev/null +++ b/script.js @@ -0,0 +1,578 @@ +function locomotive(){ + gsap.registerPlugin(ScrollTrigger); + +// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll + +const locoScroll = new LocomotiveScroll({ + el: document.querySelector("#main"), + smooth: true, + +}); +// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) +locoScroll.on("scroll", ScrollTrigger.update); + +// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things +ScrollTrigger.scrollerProxy("#main", { + scrollTop(value) { + return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; + }, // we don't have to define a scrollLeft because we're only scrolling vertically. + getBoundingClientRect() { + return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; + }, + // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). + pinType: document.querySelector("#main").style.transform ? "transform" : "fixed" +}); +// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. +ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); + +// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. +ScrollTrigger.refresh(); + +} +locomotive() +var t1=gsap.timeline(); +const group3=document.getElementsByClassName("Group3"); +const group4=document.getElementsByClassName("Group4"); +const group50=document.getElementsByClassName("Group50"); +const group9=document.getElementsByClassName("Group9"); +const group10=document.getElementsByClassName("Group10"); +const group11=document.getElementsByClassName("Group11"); +const group12=document.getElementsByClassName("Group12"); +const group13=document.getElementsByClassName("Group13"); +const group14=document.getElementsByClassName("Group14"); +const group15=document.getElementsByClassName("Group15"); +const group16=document.getElementsByClassName("Group16"); +const nothing=document.getElementsByClassName("nothing"); +const group2=document.getElementsByClassName("Group2"); +const group20=document.getElementsByClassName("Group20"); +const group21=document.getElementsByClassName("Group21"); +const phone1=document.getElementById("phone1"); +const phone2=document.getElementById("phone2"); +const pure=document.getElementsByClassName("pure"); +const home=document.getElementById("home-page"); +const snap=document.getElementsByClassName("snap"); + +// t1.to("#half1",{ +// duration:1, +// stagger:2, +// y:500, +// }) +// t1.to("#half2",{ + +// duration:1, +// stagger:2, +// y:-500, +// }) +// t1.from(nothing,{ +// scale:5, +// duration:1, +// x:550, +// y:300, + + +// }) +t1.from([group2,group20,group21],{ + y: -100, + opacity:0, + duration:0.5, + stagger:0.25, +}) +t1.from([phone1,phone2],{ + opacity:0, + duration:0.5, + stagger:0.5, + y:200, +}) +t1.from(pure,{ + opacity:0, + duration:0.5, + stagger:0.5, + y:50, +}) +t1.from(snap,{ + opacity:0, + duration:0.5, + stagger:0.5, + y:10, +}) + +t1.to([group9,group10,group11,group12,group13,group14,group15, group16],{ + opacity:1, + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#pag", + scroller:"#main", + scrub:2, + pin:true, + start:"top top", + end:"bottom 20%", + } +}); + +t1.to("#page",{ + + scrollTrigger:{ + trigger:"#page", + scroller:"#main", + pin:true, + + + } + +}); + + +t1.to("#page h2",{ + scale:7, + opacity:1, + scrollTrigger:{ + trigger:"#page h2", + scroller:"#main", + scrub:2, + + } + +}); +t1.to("#page #splash1",{ + x:850, + duration:3, + opacity:1, + scrollTrigger:{ + trigger:"#page #splash1", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page #splash2",{ + x:-700, + opacity:1, + duration:3, + scrollTrigger:{ + trigger:"#page #splash2", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page1 #imgdiv",{ + scale:3, + stagger:0.25, + duration:3, + opacity:1, + y:540, + scrollTrigger:{ + trigger:"#page1", + scroller:"#main", + pin:true, + scrub:2, + + } + +}); + +t1.to("#page1 h1",{ + opacity:1, + top:"5%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page1 h1", + scroller:"#main", + + start:"top 50%", + end:"top 10%", + scrub:2, + + + } + +}); +t1.to("#page1 h2",{ + opacity:1, + stagger:0.25, + duration:3, + scrollTrigger:{ + trigger:"#page1 h2", + scroller:"#main", + + start:"top 30%", + end:"top 10%", + scrub:2, + + } + +}); +t1.to(group3,{ + opacity:1, + stagger:0.25, + duration:3, + scrollTrigger:{ + trigger:group3, + scroller:"#main", + start:"top 30%", + end:"top 10%", + scrub:2, + + } + +}); +t1.to(group4,{ + opacity:1, + stagger:0.25, + duration:3, + scrollTrigger:{ + trigger:group4, + scroller:"#main", + + start:"top 20%", + end:"top 5%", + scrub:2, + + } + +}); +t1.to("#page00 #imgdiv00",{ + scale:3, + stagger:0.25, + duration:3, + y:540, + opacity:1, + scrollTrigger:{ + trigger:"#page00", + scroller:"#main", + pin:true, + scrub:2, + + } + +}); +t1.to(group50,{ + opacity:1, + stagger:0.25, + duration:3, + scrollTrigger:{ + trigger:group50, + scroller:"#main", + + start:"top 20%", + end:"top 5%", + scrub:2, + + } + +}); +t1.to("#page00 h2",{ + opacity:1, + stagger:0.25, + duration:3, + scrollTrigger:{ + trigger:"#page00 h2", + scroller:"#main", + + start:"top 30%", + end:"top 10%", + scrub:2, + + } + +}); +t1.to("#page00 h1",{ + opacity:1, + top:"5%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page00 h1", + scroller:"#main", + + start:"top 50%", + end:"top 10%", + scrub:2, + + + } + +}); +t1.to("#page2 #imgdiv2",{ + scale:1.4, + rotation: -90, + opacity:1, + + duration:3, + + scrollTrigger:{ + trigger:"#page2", + scroller:"#main", + pin:true, + scrub:2, + + } + +}); + +t1.to("#page2 h3",{ + opacity:1, + top:"0%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page2 h3", + scroller:"#main", + + start:"top 50%", + end:"top 10%", + scrub:2, + + + } + +}); +t1.to("#page2 p",{ + opacity:1, + top:"20%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page2 p", + scroller:"#main", + + start:"top 50%", + end:"top 10%", + scrub:2, + + + } +}); +// t1.to("#page2 #imgdiv3",{ +// scale:4, + +// duration:3, +// rotation:-90, +// opacity:0, +// scrollTrigger:{ +// trigger:"#page2 #imgdiv3", +// scroller:"#main", +// scrub:2, +// start:"top 15%", +// } + +// }); +t1.from("#page2 h4",{ + y:-100, + scale:3.5, + stagger:3, + duration:3, + opacity:0, + scrollTrigger:{ + trigger:"#page2 h4", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page3 h3",{ + opacity:1, + top:"0%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page3 h3", + scroller:"#main", + start:"top 50%", + end:"top 10%", + scrub:2, + + } + +}); +t1.to("#page3",{ + scrollTrigger:{ + trigger:"#page3", + scroller:"#main", + pin:true, + + } + +}); +t1.to("#page3 #imgdiv5",{ + y:-141, + stagger:0.25, + duration:1, + opacity:1, + scrollTrigger:{ + trigger:"#page3 #imgdiv5", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page3 p",{ + opacity:1, + top:"30%", + stagger:0.25, + duration:2, + scrollTrigger:{ + trigger:"#page3 p", + scroller:"#main", + + start:"top 50%", + end:"top 10%", + scrub:2, + + + } +}); + + +t1.to("#page4",{ + scrollTrigger:{ + trigger:"#page4", + scroller:"#main", + pin:true, + + } + +}); +t1.to("#page4 #imgdiv6",{ + x:600, + duration:4, + scrollTrigger:{ + trigger:"#page4 #imgdiv6", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #imgdiv7",{ + x:-600, + duration:4, + scrollTrigger:{ + trigger:"#page4 #imgdiv7", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #txt1",{ + left:"52%", + duration:4, + opacity:1, + scrollTrigger:{ + trigger:"#page4 #txt1", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #txt2",{ + left:"67%", + duration:4, + opacity:1, + scrollTrigger:{ + trigger:"#page4 #txt2", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page5",{ + scrollTrigger:{ + trigger:"#page5", + scroller:"#main", + pin:true, + + } + +}); +t1.to("#page5 #imgdiv8",{ + x:600, + duration:4, + scrollTrigger:{ + trigger:"#page5 #imgdiv8", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page5 #imgdiv9",{ + x:-600, + duration:4, + scrollTrigger:{ + trigger:"#page5 #imgdiv9", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 p",{ + scale:1.1, + opacity:1, + duration:4, + scrollTrigger:{ + trigger:"#page5 p", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 #up",{ + top:"8%", + duration:4, + opacity:1, + scrollTrigger:{ + trigger:"#page5 #up", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 #down",{ + top:"27%", + opacity:1, + duration:4, + scrollTrigger:{ + trigger:"#page5 #up", + scroller:"#main", + scrub:2, + } +}); + + +let currentlyOpenElement = null; + + +function handleClick(event) { + const detailsElement = this.querySelector('.details'); + if (currentlyOpenElement && currentlyOpenElement !== detailsElement) { + + gsap.to(currentlyOpenElement, { + height: "0vh" + }); + } + + + if (detailsElement === currentlyOpenElement) { + gsap.to(detailsElement, { + height: "0vh" + }); + currentlyOpenElement = null; + } else { + gsap.to(detailsElement, { + height: "50vh" + }); + currentlyOpenElement = detailsElement; + } +} + + +document.querySelectorAll('.elem').forEach(function(el) { + el.addEventListener('click', handleClick); +}); + + +document.querySelectorAll('.elem2').forEach(function(el) { + el.addEventListener('click', handleClick); +});