animations / about section
This commit is contained in:
HAM!DREZA
@@ -1,3 +1,4 @@
|
||||
node_modules/
|
||||
.nuxt/
|
||||
pages/test.vue
|
||||
.output/
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -33,8 +33,8 @@
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- <svg
|
||||
class="arrow absolute h-[4.167vw] w-[4.167vw] rotate-180 lg:!top-[34vw]"
|
||||
<svg
|
||||
class="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
|
||||
viewBox="0 0 80 80"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -48,7 +48,7 @@
|
||||
d="M44.167 33.3125V46.7083C44.167 47.5208 45.042 48.0208 45.7295 47.6042L48.0212 46.2708C54.0003 42.8333 54.0003 37.1667 48.0212 33.7292L45.7295 32.3958C45.042 32 44.167 32.5 44.167 33.3125Z"
|
||||
fill="#383E43"
|
||||
/>
|
||||
</svg> -->
|
||||
</svg>
|
||||
|
||||
<h1
|
||||
class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
|
||||
@@ -87,18 +87,34 @@ onMounted(() => {
|
||||
start: "center center",
|
||||
end: "+=5000",
|
||||
},
|
||||
rotation: 500,
|
||||
rotation: -800,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
}),
|
||||
});
|
||||
gsap.to(".animate #motion", {
|
||||
strokeDashoffset: -300,
|
||||
strokeDashoffset: 300,
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
duration: 5,
|
||||
})
|
||||
|
||||
});
|
||||
gsap.to(".arrow", {
|
||||
strokeDashoffset: 300,
|
||||
x: 700,
|
||||
y: -130,
|
||||
rotation: -90,
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=5000",
|
||||
},
|
||||
// motionPath: {
|
||||
// path: "#pathes",
|
||||
// align: "#pathes",
|
||||
// alignOrigin: [0.5, 0.5],
|
||||
// autoRotate: 180,
|
||||
// },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -22,8 +22,6 @@
|
||||
<span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="absolute">
|
||||
<div
|
||||
ref="start"
|
||||
@@ -46,6 +44,7 @@
|
||||
stroke-dasharray="8 8"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="big absolute"
|
||||
width="75.365vw"
|
||||
@@ -54,6 +53,8 @@
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<circle
|
||||
cx="723.5"
|
||||
cy="723.5"
|
||||
@@ -62,6 +63,12 @@
|
||||
stroke-width="2"
|
||||
stroke-dasharray="8 8"
|
||||
/>
|
||||
<!-- <svg
|
||||
class=" !absolute !mt-[74.5vw] !me-[10vw] rotate-[-12deg]"
|
||||
width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
|
||||
<path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
|
||||
</svg> -->
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-1
@@ -3,8 +3,9 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"build": "nuxt build",
|
||||
"start": "node .output/server/index.mjs",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<client-only>
|
||||
<home-pageHeader />
|
||||
<home-pageAboutUs />
|
||||
<home-pageSlider />
|
||||
@@ -7,5 +8,7 @@
|
||||
<home-pageProductSampleForm />
|
||||
<home-pageMediaSlider />
|
||||
<home-pageInstagram />
|
||||
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
|
||||
+130
-226
@@ -1,256 +1,160 @@
|
||||
<template>
|
||||
<div ref="main" class="scroller relative h-[1000px]">
|
||||
<section class="orange">
|
||||
<div class="text">This is some text inside of a div block.</div>
|
||||
<div class="description blue">
|
||||
<div>
|
||||
<h1>Side by Side Layered pinning</h1>
|
||||
<p>Use pinning to layer panels on top of each other as you scroll.</p>
|
||||
<div class="scroll-down">
|
||||
Scroll down
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sections">
|
||||
<div class="container-page">
|
||||
<div class="contento">
|
||||
<h2>This is random content</h2>
|
||||
</div>
|
||||
<div class="contento">
|
||||
<h2>This is another content</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<section class="panel red">ONE</section>
|
||||
<section class="panel orange">TWO</section>
|
||||
<section class="panel purple">THREE</section>
|
||||
<section class="panel green">FOUR</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="spacer">
|
||||
<h1>The End!</h1>
|
||||
<h1>Happy Tweening!</h1>
|
||||
</section>
|
||||
|
||||
<section class="black">
|
||||
<div class="text-wrap">
|
||||
<div class="panel-text blue-text">Blue</div>
|
||||
<div class="panel-text red-text">Red</div>
|
||||
<div class="panel-text orange-text">Orange</div>
|
||||
<div class="panel-text purple-text">Purple</div>
|
||||
</div>
|
||||
|
||||
<div class="p-wrap">
|
||||
<div class="panel blue"></div>
|
||||
<div class="panel red"></div>
|
||||
<div class="panel orange"></div>
|
||||
<div class="panel purple"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blue"></section>
|
||||
</div>
|
||||
<header>
|
||||
<a href="https://greensock.com/scrolltrigger">
|
||||
<img
|
||||
class="greensock-icon"
|
||||
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg"
|
||||
width="200"
|
||||
height="64"
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
// import { onMounted, onUnmounted, ref } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import {Scrollbar} from "gsap/Scrollbar"
|
||||
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
||||
gsap.registerPlugin(ScrollTrigger, Scrollbar);
|
||||
// import {Scrollbar} from "gsap/Scrollbar"
|
||||
// import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const main = ref();
|
||||
let ctx;
|
||||
// const main = ref();
|
||||
// let ctx;
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
let bodyScrollBar = Scrollbar.init(document.body, {
|
||||
damping: 0.1,
|
||||
delegateTo: document,
|
||||
console.clear();
|
||||
const panels = gsap.utils.toArray(".panel");
|
||||
console.log("panels :", panels);
|
||||
gsap.set(panels, {
|
||||
yPercent: (i) => (i ? 100 : 0),
|
||||
});
|
||||
|
||||
|
||||
ScrollTrigger.scrollerProxy(".scroller", {
|
||||
scrollTop(value) {
|
||||
if (arguments.length) {
|
||||
bodyScrollBar.scrollTop = value;
|
||||
}
|
||||
return bodyScrollBar.scrollTop;
|
||||
},
|
||||
});
|
||||
bodyScrollBar.addListener(ScrollTrigger.update);
|
||||
|
||||
gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });
|
||||
|
||||
var images = gsap.utils.toArray(".panel:not(.purple)");
|
||||
|
||||
images.forEach((image, i) => {
|
||||
var tl = gsap.timeline({
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
start: () => "top -" + window.innerHeight * (i + 0.5),
|
||||
end: () => "+=" + window.innerHeight,
|
||||
scrub: true,
|
||||
toggleActions: "play none reverse none",
|
||||
invalidateOnRefresh: true,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(image, { height: 0 });
|
||||
});
|
||||
|
||||
gsap.set(".panel-text", {
|
||||
zIndex: (i, target, targets) => targets.length - i,
|
||||
});
|
||||
|
||||
var texts = gsap.utils.toArray(".panel-text");
|
||||
|
||||
texts.forEach((text, i) => {
|
||||
var tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
start: () => "top -" + window.innerHeight * i,
|
||||
end: () => "+=" + window.innerHeight,
|
||||
scrub: true,
|
||||
toggleActions: "play none reverse none",
|
||||
invalidateOnRefresh: true,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(text, { duration: 0.33, opacity: 1, y: "50%" }).to(
|
||||
text,
|
||||
{ duration: 0.33, opacity: 0, y: "0%" },
|
||||
0.66
|
||||
);
|
||||
});
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
scrub: true,
|
||||
markers: true,
|
||||
trigger: ".sections",
|
||||
start: "top top",
|
||||
end: () => "+=" + 100 * panels.length + "%",
|
||||
pin: true,
|
||||
start: () => "top top",
|
||||
end: () => "+=" + (images.length + 1) * window.innerHeight,
|
||||
invalidateOnRefresh: true,
|
||||
});
|
||||
scrub: 1,
|
||||
markers: true
|
||||
}
|
||||
});
|
||||
|
||||
panels.forEach((panel, index) => {
|
||||
if (index) {
|
||||
tl.to(
|
||||
panel,
|
||||
{
|
||||
yPercent: 0,
|
||||
ease: "none"
|
||||
},
|
||||
"+=0.25"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
}
|
||||
.scroller {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.orange {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
.sections {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
}
|
||||
.panels {
|
||||
width: 50%;
|
||||
/* height: 100vh; */
|
||||
background: lime;
|
||||
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.container-page {
|
||||
width: 50%;
|
||||
background-color: purple;
|
||||
}
|
||||
.container-page h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.panel {
|
||||
height: 100vh;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
width: 100%;
|
||||
margin-bottom: 100px !important;
|
||||
margin-left: auto;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #753500;
|
||||
}
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.black {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #070707;
|
||||
}
|
||||
|
||||
.blue {
|
||||
height: 100vh;
|
||||
background-color: #00026d;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 450px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.panel-text {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 40px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
.blue h1 {
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
background-color: #070707;
|
||||
}
|
||||
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.green {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel-text.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.panel-text.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.panel-text.purple-text {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.panel-text.orange-text {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.p-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 450px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
z-index: 1;
|
||||
section.spacer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
height: 100vh;
|
||||
background: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.panel._2 {
|
||||
z-index: 1;
|
||||
background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
|
||||
}
|
||||
|
||||
.panel.blue {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.panel.red {
|
||||
z-index: auto;
|
||||
background-color: red;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.panel.orange {
|
||||
z-index: auto;
|
||||
background-color: #cf5d00;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.panel.purple {
|
||||
z-index: auto;
|
||||
background-color: #808;
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user