Codrops 원본
Sticky Grid Scroll: Building a Scroll-Driven Animated Grid
스크롤 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
src/index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Grid Scroll | Codrops</title>
<meta name="description" content="A structured scroll-driven image grid where movement unfolds progressively within a sticky layout." />
<meta name="author" content="Theo Plawinski" />
<link rel="shortcut icon" href="https://tympanus.net/favicon/favicon.ico" />
<link rel="stylesheet" href="./styles/base.css" />
<link rel="stylesheet" href="./styles/index.css" />
<script>
document.documentElement.className = 'js';
</script>
</head>
<body class="loading">
<header class="frame">
<div class="frame__infos">
<h1>Sticky Grid Scroll</h1>
<a href="https://tympanus.net/codrops/?p=106424">Tutorial</a>
<a href="https://github.com/theoplawinski/codrops-sticky-grid-scroll">GitHub</a>
<a href="https://tympanus.net/codrops/hub/">All demos</a>
</div>
<nav class="frame__tags">
<a href="https://tympanus.net/codrops/hub/tag/gsap/">#gsap</a>
<a href="https://tympanus.net/codrops/hub/tag/sticky/">#sticky</a>
<a href="https://tympanus.net/codrops/hub/tag/gris/">#grid</a>
<a href="https://tympanus.net/codrops/hub/tag/scroll/">#scroll</a>
</nav>
<p class="frame__author">
By <a href="https://theoplawinski.com/?utm_source=codrops&utm_medium=tutorial&utm_campaign=sticky-grid-scroll">Theo Plawinski</a>
</p>
</header>
<main>
<section class="block block--intro">
<figure class="media">
<img class="media__image" src="../8.webp" alt="Image 8" />
<figcaption class="media__caption">Scroll-driven layout experiment</figcaption>
</figure>
</section>
<section class="block block--main">
<div class="block__wrapper">
<div class="content">
<h2 class="content__title">Sticky Grid Scroll</h2>
<p class="content__description">
A structured scroll-driven image grid where movement unfolds progressively within a sticky layout.
</p>
<a class="content__button" href="https://tympanus.net/codrops/?p=106424">Read the tutorial</a>
</div>
<div class="gallery">
<ul class="gallery__grid">
<li class="gallery__item">
<img class="gallery__image" src="../1.webp" alt="Image 1" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../2.webp" alt="Image 2" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../3.webp" alt="Image 3" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../4.webp" alt="Image 4" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../5.webp" alt="Image 5" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../6.webp" alt="Image 6" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../7.webp" alt="Image 7" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../8.webp" alt="Image 8" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../9.webp" alt="Image 9" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../10.webp" alt="Image 10" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../11.webp" alt="Image 11" />
</li>
<li class="gallery__item">
<img class="gallery__image" src="../12.webp" alt="Image 12" />
</li>
</ul>
</div>
</div>
</section>
</main>
<script type="module" src="./scripts/index.js"></script>
</body>
</html>src/scripts/index.js
import Lenis from "lenis"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { preloadImages } from "./utils.js"
gsap.registerPlugin(ScrollTrigger)
class StickyGridScroll {
constructor() {
this.getElements()
this.initContent()
this.groupItemsByColumn()
this.addParallaxOnScroll()
this.animateTitleOnScroll()
this.animateGridOnScroll()
}
/**
* Select and store the DOM elements needed for the animation
* @returns {void}
*/
getElements() {
this.block = document.querySelector(".block--main")
if (this.block) {
this.wrapper = this.block.querySelector(".block__wrapper")
this.content = this.block.querySelector(".content")
this.title = this.block.querySelector(".content__title")
this.description = this.block.querySelector(".content__description")
this.button = this.block.querySelector(".content__button")
this.grid = this.block.querySelector(".gallery__grid")
this.items = this.block.querySelectorAll(".gallery__item")
}
}
/**
* Initializes the visual state of the content before animations
* @returns {void}
*/
initContent() {
if (this.description && this.button) {
// Hide description and button
gsap.set([this.description, this.button], { opacity: 0, pointerEvents: "none" })
}
if (this.content && this.title) {
// Calculate how many pixels are needed to vertically center the title inside its container
const dy = (this.content.offsetHeight - this.title.offsetHeight) / 2
// Convert this pixel offset into a percentage of the container height
this.titleOffsetY = (dy / this.content.offsetHeight) * 100
// Apply the vertical positioning using percent-based transform
gsap.set(this.title, { yPercent: this.titleOffsetY })
}
}
/**
* Group grid items into a fixed number of columns (default: 3)
* @returns {void}
*/
groupItemsByColumn() {
this.numColumns = 3
// Initialize an array for each column
this.columns = Array.from({ length: this.numColumns }, () => [])
// Distribute grid items into column buckets
this.items.forEach((item, index) => {
this.columns[index % this.numColumns].push(item)
})
}
/**
* Apply a parallax effect to the wrapper when scrolling
* @returns {void}
*/
addParallaxOnScroll() {
if (!this.block || !this.wrapper) {
return
}
// Create a scroll-driven timeline
// Animate the wrapper vertically based on scroll position
gsap.from(this.wrapper, {
yPercent: -100,
ease: "none",
scrollTrigger: {
trigger: this.block,
start: "top bottom", // Start when top of block hits bottom of viewport
end: "top top", // End when top of block hits top of viewport
scrub: true, // Smooth animation based on scroll position
},
})
}
/**
* Animate the title element when the block scrolls into view
* @returns {void}
*/
animateTitleOnScroll() {
if (!this.block || !this.title) {
return
}
// Create a scroll-driven timeline
// Animate the title's opacity when the block reaches 57% of the viewport height
gsap.from(this.title, {
opacity: 0,
duration: 0.7,
ease: "power1.out",
scrollTrigger: {
trigger: this.block,
start: "top 57%", // Start when top of block hits 57% of viewport
toggleActions: "play none none reset", // Play on enter, reset on leave back
},
})
}
/**
* Create a GSAP timeline to reveal the grid items with vertical animation
* Each column moves from top or bottom, with staggered timing
*
* @param {Array} columns - Array of columns, each containing DOM elements of the grid
* @returns {gsap.core.Timeline} - The timeline for the grid reveal animation
*/
gridRevealTimeline(columns = this.columns) {
// Create a timeline
const timeline = gsap.timeline()
const wh = window.innerHeight
// Calculate the distance to start grid fully outside the viewport (above or below)
const dy = wh - (wh - this.grid.offsetHeight) / 2
columns.forEach((column, colIndex) => {
// Determine the direction: columns with even index move from top, odd from bottom
const fromTop = colIndex % 2 === 0
// Animate all items in the column
timeline.from(
column,
{
y: dy * (fromTop ? -1 : 1), // Start above or below the viewport based on column index
stagger: {
each: 0.06, // Stagger the animation within the column: 60ms between each item's animation
from: fromTop ? "end" : "start", // Animate from bottom if moving down, top if moving up
},
ease: "power1.inOut",
},
"grid-reveal", // Label to synchronize animations across columns
)
})
return timeline
}
/**
* Create a GSAP timeline to zoom the grid
* Lateral columns move horizontally, central column items move vertically
*
* @param {Array} columns - Array of columns, each containing DOM elements of the grid
* @returns {gsap.core.Timeline} - The timeline for the grid zoom animation
*/
gridZoomTimeline(columns = this.columns) {
// Create a timeline with default duration and easing for all tweens
const timeline = gsap.timeline({ defaults: { duration: 1, ease: "power3.inOut" } })
// Zoom the entire grid
timeline.to(this.grid, { scale: 2.05 })
// Move lateral columns horizontally
timeline.to(columns[0], { xPercent: -40 }, "<") // Left column moves left
timeline.to(columns[2], { xPercent: 40 }, "<") // Right column moves right
// Animate central column vertically
timeline.to(
columns[1],
{
// Items above the midpoint move up, below move down
yPercent: (index) => (index < Math.floor(columns[1].length / 2) ? -1 : 1) * 40,
duration: 0.5,
ease: "power1.inOut",
},
"-=0.5", // Start slightly before previous animation ends for overlap
)
return timeline
}
/**
* Toggle the visibility of content elements (title, description, button) with animations
*
* @param {boolean} isVisible - Whether the content should be visible
* @returns {void}
*/
toggleContent(isVisible = true) {
if (!this.title || !this.description || !this.button) {
return
}
// Create a timeline
gsap.timeline({ defaults: { overwrite: true } })
// Animate the title's vertical position
.to(this.title, {
yPercent: isVisible ? 0 : this.titleOffsetY, // Slide up or return to initial offset
duration: 0.7,
ease: "power2.inOut",
})
// Animate description and button opacity and pointer events
.to(
[this.description, this.button],
{
opacity: isVisible ? 1 : 0,
duration: 0.4,
ease: `power1.${isVisible ? "inOut" : "out"}`,
pointerEvents: isVisible ? "all" : "none",
},
isVisible ? "-=90%" : "<", // Overlap with previous tween when showing
)
}
/**
* Animate the grid based on scroll position
* Combines grid reveal, grid zoom, and content toggle in a scroll-driven timeline
*
* @returns {void}
*/
animateGridOnScroll() {
// Create a scroll-driven timeline
const timeline = gsap.timeline({
scrollTrigger: {
trigger: this.block,
start: "top 25%", // Start when top of block hits 25% of viewport
end: "bottom bottom", // End when bottom of block hits bottom of viewport
scrub: true, // Smooth animation based on scroll position
},
})
timeline
// Add grid reveal animation
.add(this.gridRevealTimeline())
// Add grid zoom animation, overlapping previous animation by 0.6 seconds
.add(this.gridZoomTimeline(), "-=0.6")
// Toggle content visibility based on scroll direction
// Overlap with previous animation by 0.32 seconds
.add(() => this.toggleContent(timeline.scrollTrigger.direction === 1), "-=0.32")
}
}
// Initialize smooth scrolling using Lenis and synchronize it with GSAP ScrollTrigger
function initSmoothScrolling() {
// Create a new Lenis instance for smooth scrolling
const lenis = new Lenis({
lerp: 0.08,
wheelMultiplier: 1.4,
})
// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
lenis.on("scroll", ScrollTrigger.update)
// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
// This ensures Lenis's smooth scroll animation updates on each GSAP tick
gsap.ticker.add((time) => {
lenis.raf(time * 1000) // Convert time from seconds to milliseconds
})
// Disable lag smoothing in GSAP to prevent any delay in scroll animations
gsap.ticker.lagSmoothing(0)
}
// Preload images then initialize everything
preloadImages().then(() => {
document.body.classList.remove("loading") // Remove loading state from body
initSmoothScrolling() // Initialize smooth scrolling
new StickyGridScroll() // Initialize grid animation
})
함께 쓰는 파일 7개 보기
src/scripts/utils.js
import imagesLoaded from "imagesloaded"
/**
* Preloads images specified by the CSS selector.
* @function
* @param {string} [selector="img"] - CSS selector for target images.
* @returns {Promise} - Resolves when all specified images are loaded.
*/
const preloadImages = (selector = "img") => {
return new Promise((resolve) => {
// The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded.
imagesLoaded(document.querySelectorAll(selector), { background: true }, resolve)
})
}
// Exporting utility functions for use in other modules.
export {
preloadImages
}src/styles/base.css
:root {
--font-primary: Arial, sans-serif;
--font-secondary: Times, serif;
--color-text: #000;
--color-bg: #fff;
--color-link: #000;
--color-link-hover: #000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html,
body {
width: 100%;
height: 100%;
}
html {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul,
ol,
menu {
list-style: none;
}
picture,
img,
svg,
video {
display: block;
width: 100%;
height: auto;
}
a {
text-decoration: none;
color: inherit;
outline: none;
cursor: pointer;
&:focus {
background: lightgrey;
outline: none;
&:not(:focus-visible) {
background: transparent;
}
&:focus-visible {
background: transparent;
outline: 2px solid red;
}
}
}
button,
input,
select,
textarea {
display: block;
border: 0;
border-radius: 0;
background: 0 0;
color: inherit;
}
button:hover {
cursor: pointer;
}
@media (scripting: enabled) {
.loading {
&::before,
&::after {
content: "";
position: fixed;
z-index: 10000;
}
&::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
&::after {
top: 50%;
left: 50%;
width: 100px;
height: 1px;
margin: 0 0 0 -50px;
background: var(--color-link);
animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
}
}
}
@keyframes loaderAnim {
0% {
transform: scaleX(0);
transform-origin: 0% 50%;
}
50% {
transform: scaleX(1);
transform-origin: 0% 50%;
}
50.1% {
transform: scaleX(1);
transform-origin: 100% 50%;
}
100% {
transform: scaleX(0);
transform-origin: 100% 50%;
}
}
.frame {
position: fixed;
top: 0;
left: 0;
display: grid;
grid-template-areas:
"infos sponsor"
"tags author";
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-gap: 24px;
align-content: space-between;
width: 100%;
height: 100vh;
padding: 24rem;
font-size: 14px;
line-height: 1.5;
pointer-events: none;
z-index: 1000;
a,
button {
pointer-events: auto;
opacity: 0.4;
&:hover {
text-decoration: underline;
text-underline-offset: 2px;
opacity: 1;
}
}
.frame__infos {
grid-area: infos;
*:not(:last-child) {
margin-right: 24px;
}
h1 {
@media (min-width: 768px) {
display: inline-block;
}
}
a {
display: block;
@media (min-width: 768px) {
display: inline-block;
}
}
}
.frame__archive {
grid-area: archive;
}
.frame__tags {
grid-area: tags;
display: flex;
column-gap: 12px;
}
.frame__author {
grid-area: author;
justify-self: flex-end;
text-align: right;
a {
opacity: 1;
}
}
#cdawrap {
grid-area: sponsor;
justify-self: flex-end;
max-width: 360px;
text-align: right;
strong {
font-weight: bold;
}
}
}
src/styles/index.css
html {
font-size: calc(100vw / 1440);
}
body {
font-family: var(--font-primary);
font-size: 16rem;
background-color: var(--color-bg);
color: var(--color-text);
}
/* ---------------- Block intro ---------------- */
.block--intro {
position: relative;
z-index: 1;
}
.media {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 0 24rem;
}
.media__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-color: lightgray;
}
.media__caption {
position: relative;
width: 221rem;
font-size: 14rem;
line-height: 1.3;
text-transform: uppercase;
text-align: center;
}
/* ---------------- Block main ---------------- */
.block.block--main {
height: 425vh;
}
.block__wrapper {
position: sticky;
top: 0;
padding: 0 24rem;
will-change: transform;
overflow: hidden;
}
.content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
text-align: center;
z-index: 1;
}
.content__title {
width: 924rem;
font-family: var(--font-secondary);
font-size: 104rem;
line-height: 1.15;
letter-spacing: -0.02em;
}
.content__description {
width: 455rem;
margin-top: 24rem;
font-size: 14rem;
line-height: 1.3;
text-transform: uppercase;
}
.content__button {
margin-top: 32rem;
font-size: 14rem;
text-transform: uppercase;
&:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
}
/* ---------------- Gallery ---------------- */
.gallery {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 736rem;
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32rem;
row-gap: 40rem;
will-change: transform;
}
.gallery__item {
width: 100%;
aspect-ratio: 1;
will-change: transform;
}
.gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
background-color: lightgray;
}
vite.config.ts
import { defineConfig } from "vite"
// https://vitejs.dev/config/
export default defineConfig({
base: "./",
root: "src/",
publicDir: "../public",
server: {
host: true, // Open to local network and display URL
open: true, // Open in browser on development server start
},
build: {
outDir: "../dist", // Output in the dist/ folder
emptyOutDir: true, // Empty the folder first
sourcemap: true, // Add sourcemap
}
})
Media credits and license evidence실행 안내·자료
README.md
## Credits
Images sourced from [Lummi](https://www.lummi.ai/).
## License
[MIT](LICENSE)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2025 [Theo Plawinski](https://theoplawinski.com)
Copyright (c) 2009 - 2025 [Codrops](https://tympanus.net/codrops)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.Bundled dependency licenses실행 안내·자료
GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.
Standard "No Charge" GSAP License
I. DEFINITIONS
“GSAP License” means the terms and conditions of this GSAP Software License Agreement.
"GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.
"Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).
"Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.
"Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).
II. GRANT OF LICENSE
Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.
III. RESTRICTIONS
You may not:
Use any GSAP Products for any Prohibited Uses without prior written consent;
Reverse engineer any GSAP Products for the purpose of creating Competitive Products;
Remove or alter any proprietary notices or branding from GSAP Products.
IV. OWNERSHIP AND INTELLECTUAL PROPERTY
All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.
V. TERMINATION
Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.
VI. MISCELLANEOUS PROVISIONS
General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.
Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).
No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.
FAQ
Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
Absolutely! AI-generated code is not a "Prohibited Use".
What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!
Can I really use GSAP in commercial projects without paying anything?
Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚
Effective date: April 30, 2025
Last modified date: May 30, 2025
Copyright (©) 2025, Webflow
lenis@1.3.17 — LICENSE
The MIT License
Copyright (c) 2024 darkroom.engineering
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
ev-emitter@2.1.2 — LICENSE.md
Copyright (c) 2016-2021 [David DeSandro](https://desandro.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
imagesloaded@5.0.0 — LICENSE.md
Copyright (c) 2011-2022 [David DeSandro](https://desandro.com) and [contributors](https://github.com/desandro/imagesloaded/graphs/contributors)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
세 열이라는 코드 전제와 실제 배치
입력·상태·출력·수명과 실제 결과를 명시합니다.
- 이 예제에서는
- StickyGridScroll.groupItemsByColumn은 numColumns를 3으로 고정하고 인덱스 나머지로 항목을 분류합니다. 설명과 버튼은 초기 opacity=0·pointerEvents=none으로 설정합니다.