ikikim/webflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
익희 김 2024-10-03 05:18:15 +09:00
parent fdf8d5753f
commit 423c19c768
2 changed files with 226 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
scroll-background-circle.html Normal file
View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<style>
:root {
--circleSize: 0vh;
--circleColor: white;
}
body {
padding-top: 400px;
padding-bottom: 600px;
}
.section {
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&.first {
background-color: white;
}
&.second {
background-color: black;
}
.text-wrap {
p {
font-weight: 600;
font-size: 3em;
text-align: center;
margin: 0;
color: white;
mix-blend-mode: difference;
}
}
.circle {
position: absolute;
left: 50%;
top: 50%;
background-color: white;
mix-blend-mode: difference;
border-radius: 100%;
transform: translate(-50%, -50%);
width: var(--circleSize);
height: var(--circleSize);
}
}
</style>
</head>
<body>
<div class="section first">
<div class="circle"></div>
<div class="text-wrap">
<p>
brands & <br />
Experiences
</p>
</div>
</div>
<div class="section second">
<div class="circle"></div>
<div class="text-wrap">
<p>
second & <br />
Experiences
</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger);
gsap.to(".section.first .circle", {
width: '100vh',
height: '100vh',
scrollTrigger: {
trigger: ".section.first",
start: "top +=100",
endTrigger: ".section.second",
end: "top",
scrub: true,
markers: true
}
});
gsap.to(".section.second .circle", {
width: '100vh',
height: '100vh',
scrollTrigger: {
trigger: ".section.second",
start: "top",
end: "bottom",
scrub: true,
markers: true
}
});
});
</script>
</body>
</html>

109
textAnimation00.html Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Observer.min.js"></script>
<style>
:root {
@font-face {
font-family: 'Paperlogy-8ExtraBold';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
}
}
p {
font-family: 'Paperlogy-8ExtraBold';
}
body {
padding-bottom: 5000px;
}
.box-mother {
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
.box {
display: flex;
flex-direction: column;
overflow: hidden;
position: fixed;
width: 100%;
p {
margin: 0;
font-size: 3em;
text-align: center;
}
}
}
</style>
</head>
<body>
<div class="box-mother">
<div class="box">
<p>Making</p>
<p>The <b>bold</b></p>
<p>beautiful</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
Observer.create({
target: document,
type: "wheel, scroll",
onDown: (e) => {
if (e.scrollY.v > 100) {
gsap.to("p:nth-child(1), p:nth-child(3)", {
x: 200,
});
gsap.to("p:nth-child(2)", {
x: -200,
})
}
if (e.scrollY.v > 150) {
gsap.to("p:nth-child(1), p:nth-child(3)", {
opacity: 0,
});
gsap.to("p:nth-child(2)", {
opacity: 0,
})
}
},
onUp: (e) => {
if (e.scrollY.v < 100) {
gsap.to("p:nth-child(1), p:nth-child(3)", {
x: 0,
});
gsap.to("p:nth-child(2)", {
x: 0,
})
}
if (e.scrollY.v < 150) {
gsap.to("p:nth-child(1), p:nth-child(3)", {
opacity: 1,
});
gsap.to("p:nth-child(2)", {
opacity: 1,
})
}
}
});
});
</script>
</body>
</html>