diff --git a/dex.css b/dex.css new file mode 100644 index 0000000..f5c4973 --- /dev/null +++ b/dex.css @@ -0,0 +1,642 @@ +@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: hsl(210, 10%, 23%); + +} +/* #half1{ + height: 50%; + width: 100%; + position: absolute; + bottom: 0; + background-image: url(./NothingPhoneImages/box2.png); + background-size: cover; + background-position: center; + z-index: 99; +} +#half2{ + height: 50%; + width: 100%; + position: absolute; + background-image: url(./NothingPhoneImages/box1.png); + background-size: cover; + background-position: center; + z-index: 99; +} */ +#home-page{ + height: 100vh; + width: 100%; + position: relative; + overflow: hidden; + +} +#phone1{ + position: absolute; + background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png); + background-size: cover; + background-position: center; + height: 470px; + width: 450px; + top: 110px; + rotate: -25deg; + right: 120px; +} +#phone2{ + position: absolute; + background-image: url(./NothingPhoneImages/BA_ABR_300_1001.png); + background-size: cover; + background-position: center; + height: 470px; + width: 450px; + top: 130px; + rotate: -25deg; + right: 50px; +} +#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{ + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width:0.8px; + -webkit-text-stroke-color:#999D9C; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-family: kor; + font-size: 7vh; + font-weight: 900; + opacity: 0; + +} +#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: hsl(210, 10%, 23%); +} +#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%); + +} +#page00{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: hsl(210, 10%, 23%); +} +#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%); + +} +#page00 .Group3::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: hsl(210, 10%, 23%); + 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%; + 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; + -webkit-text-fill-color: transparent; + -webkit-text-stroke: #999D9C; + -webkit-text-stroke-width: 2px; + text-align: center; + position: absolute; + top: 75%; + left: 50%; + transform: translate(-50%); + font-family: kor; + font-size: 20vh; + font-weight: 100; + opacity: 1; + +} +#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: hsl(210, 10%, 23%); + 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: 240px; + top: 56.5%; + left: 50%; + transform: translate(-50%,-50%); + width: 529px; + object-fit: cover; + +} +#page4{ + height: 100vh; + width: 100%; + overflow: hidden; + background-color: hsl(210, 10%, 23%); + 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: hsl(210, 10%, 23%); + position: relative; +} +#page5 #imgdiv8{ + height: 100%; + width: 50%; + 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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..832369c --- /dev/null +++ b/index.html @@ -0,0 +1,243 @@ + + + + + + Document + + + + + + +
+ +
+ +
+
+
+
+
+
+
+
+
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
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..35d1b84 --- /dev/null +++ b/script.js @@ -0,0 +1,542 @@ +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:920, + duration:3, + opacity:1, + scrollTrigger:{ + trigger:"#page #splash1", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page #splash2",{ + x:-920, + opacity:1, + duration:3, + scrollTrigger:{ + trigger:"#page #splash2", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page1 #imgdiv",{ + scale:3, + stagger:0.25, + duration:3, + + y:600, + 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:600, + 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, + + + 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:-162, + 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:700, + duration:4, + scrollTrigger:{ + trigger:"#page4 #imgdiv6", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #imgdiv7",{ + x:-700, + duration:4, + scrollTrigger:{ + trigger:"#page4 #imgdiv7", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #txt1",{ + x:700, + duration:4, + opacity:1, + scrollTrigger:{ + trigger:"#page4 #txt1", + scroller:"#main", + + scrub:2, + + } +}); +t1.to("#page4 #txt2",{ + x:-430, + 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:700, + duration:4, + scrollTrigger:{ + trigger:"#page5 #imgdiv8", + scroller:"#main", + scrub:2, + + } +}); +t1.to("#page5 #imgdiv9",{ + x:-700, + duration:4, + scrollTrigger:{ + trigger:"#page5 #imgdiv9", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 p",{ + scale:1.2, + opacity:1, + duration:4, + scrollTrigger:{ + trigger:"#page5 p", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 #up",{ + y:60, + duration:4, + opacity:1, + scrollTrigger:{ + trigger:"#page5 #up", + scroller:"#main", + scrub:2, + } +}); +t1.to("#page5 #down",{ + y:-60, + opacity:1, + duration:4, + scrollTrigger:{ + trigger:"#page5 #up", + scroller:"#main", + scrub:2, + } +}); + + +