Skip to content

Commit 3cd4d3c

Browse files
imdanieldevimdanieldev
committed
scroll effect
1 parent d361f6c commit 3cd4d3c

1 file changed

Lines changed: 92 additions & 79 deletions

File tree

‎src/App.vue‎

Lines changed: 92 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -58,64 +58,78 @@
5858
<div class="shooting-star"></div>
5959
<div class="shooting-star"></div>
6060
<div class="min-h-svh w-full lg:py-0 flex justify-center items-center">
61-
<div class="flex justify-around px-2 items-center w-full gap-10 flex-col lg:flex-row">
62-
<div
63-
class="border-gradient3 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0 lg:translate-y-9">
64-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
65-
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
66-
<path d="M5.3 12h14v4.7H5.3z m0 7.3h14V24H5.3zM22 12H26.7v12h-4.7z"
67-
opacity=".3" />
68-
<path
69-
d="M26.7 5.3H5.3c-1.5 0-2.7 1.2-2.6 2.7L2.7 24c0 1.5 1.2 2.7 2.6 2.7h21.4c1.5 0 2.7-1.2 2.6-2.7V8c0-1.5-1.2-2.7-2.6-2.7z m-7.4 18.7H5.3v-4.7h14V24z m0-7.3H5.3V12h14v4.7zM26.7 24h-4.7V12H26.7v12z" />
70-
</svg>
71-
Basic Plan
72-
</h3>
73-
<p class="text-center">In this plan, we provide you with a static site using Vanilla JS
74-
and
75-
SCSS, which can be used
76-
to introduce a company or build a portfolio, and if you want a blog, we will create
77-
it
78-
using Zola, which is an SSG.</p>
61+
<div id="panels"
62+
class="flex min-h-[300svh] justify-start px-2 py-4 items-start w-full gap-10 flex-nowrap overflow-x-hidden relative">
63+
<div class="w-full grow-0 shrink-0 basis-full flex justify-end items-center panel">
64+
<div
65+
class="border-gradient3 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
66+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
67+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
68+
<path d="M5.3 12h14v4.7H5.3z m0 7.3h14V24H5.3zM22 12H26.7v12h-4.7z"
69+
opacity=".3" />
70+
<path
71+
d="M26.7 5.3H5.3c-1.5 0-2.7 1.2-2.6 2.7L2.7 24c0 1.5 1.2 2.7 2.6 2.7h21.4c1.5 0 2.7-1.2 2.6-2.7V8c0-1.5-1.2-2.7-2.6-2.7z m-7.4 18.7H5.3v-4.7h14V24z m0-7.3H5.3V12h14v4.7zM26.7 24h-4.7V12H26.7v12z" />
72+
</svg>
73+
Basic Plan
74+
</h3>
75+
<p class="text-center">In this plan, we provide you with a static site using Vanilla
76+
JS
77+
and
78+
SCSS, which can be used
79+
to introduce a company or build a portfolio, and if you want a blog, we will
80+
create
81+
it
82+
using Zola, which is an SSG.</p>
83+
</div>
7984
</div>
80-
<div
81-
class="border-gradient2 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0">
82-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
83-
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
84-
<path d="M16 20.5l-5 3.1 1.3-5.7-4.4-3.9 5.8-0.5L16 8.1l2.3 5.4 5.8 0.5-4.4 3.9 1.3 5.7z"
85-
opacity=".3" />
86-
<path
87-
d="M29.3 12.3l-9.6-0.8L16 2.7 12.3 11.5 2.7 12.3l7.2 6.3L7.8 28 16 23 24.2 28l-2.1-9.4L29.3 12.3zM16 20.5l-5 3.1 1.3-5.7-4.4-3.9 5.8-0.5L16 8.1l2.3 5.4 5.8 0.5-4.4 3.9 1.3 5.7L16 20.5z" />
88-
</svg>
89-
Standard Plan
90-
</h3>
91-
<p class="text-center">In this plan, we design a site for you using WordPress and valid
92-
plugins
93-
and templates. Any type of site is possible, whether it is an introduction, a blog,
94-
or a
95-
store. If necessary, a special template will be created for your site. You can
96-
provide an
97-
SMS package for user registration. Hosting and domain provision are required and can
98-
be
99-
the responsibility of the customer.</p>
85+
<div class="w-full grow-0 shrink-0 basis-full flex justify-center items-center panel h-fit">
86+
<div
87+
class="border-gradient2 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
88+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
89+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
90+
<path d="M16 20.5l-5 3.1 1.3-5.7-4.4-3.9 5.8-0.5L16 8.1l2.3 5.4 5.8 0.5-4.4 3.9 1.3 5.7z"
91+
opacity=".3" />
92+
<path
93+
d="M29.3 12.3l-9.6-0.8L16 2.7 12.3 11.5 2.7 12.3l7.2 6.3L7.8 28 16 23 24.2 28l-2.1-9.4L29.3 12.3zM16 20.5l-5 3.1 1.3-5.7-4.4-3.9 5.8-0.5L16 8.1l2.3 5.4 5.8 0.5-4.4 3.9 1.3 5.7L16 20.5z" />
94+
</svg>
95+
Standard Plan
96+
</h3>
97+
<p class="text-center">In this plan, we design a site for you using WordPress and
98+
valid
99+
plugins
100+
and templates. Any type of site is possible, whether it is an introduction, a
101+
blog,
102+
or a
103+
store. If necessary, a special template will be created for your site. You can
104+
provide an
105+
SMS package for user registration. Hosting and domain provision are required and
106+
can
107+
be
108+
the responsibility of the customer.</p>
109+
</div>
100110
</div>
101-
<div
102-
class="border-gradient1 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0 lg:-translate-y-9">
103-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
104-
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
105-
<path d="M11.8 6.7H8.3l-2 4h3.5z m13.9 4l-2-4h-3.5l2 4zM14.7 22.2V13.3H7.3z m2.6 0L24.7 13.3H17.3zM17.2 6.7h-2.4l-2 4h6.4z"
106-
opacity=".3" />
107-
<path
108-
d="M25.3 4H6.7L2.7 12l13.3 16L29.3 12l-4-8z m-1.6 2.7l2 4h-3.6l-2-4h3.6zM8.3 6.7h3.6l-2 4H6.3l2-4zM14.7 22.2L7.3 13.3H14.7v8.9zM12.8 10.7l2-4h2.4l2 4H12.8zM17.3 22.2V13.3h7.4L17.3 22.2z" />
109-
</svg>
110-
Essential Plan
111-
</h3>
112-
<p class="text-center">In this plan, a site is designed for you with PHP and VueJS, and
113-
the
114-
coding is completely proprietary, and while fully respecting security, it is written
115-
in
116-
the most optimal way possible using Tailwind CSS. A separate fee is required for
117-
design,
118-
and the provision of hosting and domain is the same as in the standard plan.</p>
111+
<div class="w-full grow-0 shrink-0 basis-full flex justify-start items-center panel">
112+
<div
113+
class="border-gradient1 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
114+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
115+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
116+
<path d="M11.8 6.7H8.3l-2 4h3.5z m13.9 4l-2-4h-3.5l2 4zM14.7 22.2V13.3H7.3z m2.6 0L24.7 13.3H17.3zM17.2 6.7h-2.4l-2 4h6.4z"
117+
opacity=".3" />
118+
<path
119+
d="M25.3 4H6.7L2.7 12l13.3 16L29.3 12l-4-8z m-1.6 2.7l2 4h-3.6l-2-4h3.6zM8.3 6.7h3.6l-2 4H6.3l2-4zM14.7 22.2L7.3 13.3H14.7v8.9zM12.8 10.7l2-4h2.4l2 4H12.8zM17.3 22.2V13.3h7.4L17.3 22.2z" />
120+
</svg>
121+
Essential Plan
122+
</h3>
123+
<p class="text-center">In this plan, a site is designed for you with PHP and VueJS,
124+
and
125+
the
126+
coding is completely proprietary, and while fully respecting security, it is
127+
written
128+
in
129+
the most optimal way possible using Tailwind CSS. A separate fee is required for
130+
design,
131+
and the provision of hosting and domain is the same as in the standard plan.</p>
132+
</div>
119133
</div>
120134
</div>
121135
</div>
@@ -143,36 +157,34 @@ onMounted(() => {
143157
effects: true,
144158
normalizeScroll: true,
145159
});
146-
gsap.to(animateBox.value, {
147-
y: "100%",
148-
scale: 1.2,
149-
scrollTrigger: {
150-
trigger: animateBox.value,
151-
pin: true,
152-
scrub: true,
153-
}
154-
});
155-
gsap.to(".border-gradient3", {
160+
const panel = gsap.utils.toArray("#panels .panel");
161+
let tween;
162+
tween = gsap.to(panel, {
163+
x: () => -1 * (document.querySelector("#panels").scrollWidth - innerWidth),
164+
ease: "none",
156165
scrollTrigger: {
157-
trigger: ".border-gradient3",
166+
trigger: "#panels",
158167
pin: true,
159-
scrub: true,
168+
start: "top top",
169+
scrub: 1,
170+
// end: () => "+=" + (document.querySelector("#panels").scrollWidth - innerWidth),
171+
end: "bottom bottom",
172+
pinReparent: false,
173+
pinSpacing: false,
174+
pinSpacer: false,
175+
snap: false,
160176
}
161177
});
162-
gsap.to(".border-gradient2", {
163-
scrollTrigger: {
164-
trigger: ".border-gradient2",
165-
pin: true,
166-
scrub: true,
167-
}
168-
});
169-
gsap.to(".border-gradient1", {
178+
gsap.to(animateBox.value, {
179+
y: "100%",
180+
scale: 1.2,
170181
scrollTrigger: {
171-
trigger: ".border-gradient1",
182+
trigger: animateBox.value,
172183
pin: true,
173184
scrub: true,
174185
}
175186
});
187+
console.log(document.querySelector("#panels").scrollWidth - innerWidth)
176188
let split = new SplitText(".name", { type: "chars" });
177189
let words = new SplitText(".my-text", { type: "words" });
178190
let skill1 = new SplitText(".skills li:nth-child(1)", { type: "words" });
@@ -292,7 +304,7 @@ onMounted(() => {
292304
gsap.to(window, {
293305
duration: 2,
294306
scrollTo: document.querySelector("#items"),
295-
ease: "elastic.out(1.5,0.75)"
307+
ease: "elastic.out(1.5,0.5)"
296308
});
297309
});
298310
});
@@ -386,7 +398,8 @@ onMounted(() => {
386398
}
387399
388400
.starsbg {
389-
background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
401+
/* background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); */
402+
background-color: #0b0b2b;
390403
}
391404
392405
.stars {

0 commit comments

Comments
 (0)