anime.js (애니메이션 플러그인) anime.js는 단순하면서도 강력한 API를 갖춘 경량 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 JavaScript 객체와 함께 작동합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 anime.js - a Collection by Julian Garnier on CodePen Demos and examples for anime.js - https://animejs.com codepen.io 👉🏻다운로드 anime.js Javascript animation engine animejs.com

Horizontal Smooth Scroll Layouts 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Horizontal Smooth Scroll Layout | Demo 1 | Codrops Illywhacker 07 #water #bottle #hand explore tympanus.net 👉🏻다운로드 Horizontal Smooth Scroll Layouts | Codrops If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I' tympanus.net

CSS Animated Hamburger Icon 모바일 메뉴 버튼 호버 및 클릭시 변형되는 애니메이션 효과 입니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 CSS animated hamburger icon ... codepen.io 👉🏻다운로드 CSS animated hamburger icon ... codepen.io

Slice Revealer Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Slice Revealer | Demo 1 | Codrops ​300+ pre-built websites with a 1 click installation Be Theme has more than 300 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click in less than a second. Check out the theme → tympanus.net 👉🏻다운로드 Sl..

Brook: Free minimal HTML template for blogs Freebiesbug 에서 가져온 무료 리소스 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Brook HTML Template - Frontpage one brooks-html-template.netlify.app 👉🏻다운로드 TemplateDeck - Free and commercial Bootstrap 5 templates Welcome to TemplateDeck! My tiny little corner of the internet where you can get handcrafted, premium & free Bootstrap 5 HTML templates! templatedeck.com

Crafting a Scrollable and Draggable Parallax Slider Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Parallax Slider with Hover Reveal Animation | Codrops Indigo tympanus.net 👉🏻다운로드 Crafting a Scrollable and Draggable Parallax Slider | Codrops In this article, I’ll show you how to build a parallax slider with a fun reveal animation. I’ll be using GSAP, CSS Grid tympan..

안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..

1. 함수 합성(Function Composition)이란? 함수 합성은 함수들을 조합하여 새로운 함수를 만드는 것입니다. 함수 합성(Function Composition)을 사용해서 함수를 만들어 보겠습니다. 1) compose()의 특징은 함수 호출들을 오른쪽에서 왼쪽 방향으로 볼수 있습니다. const compose = function(functions){ if(!functions.length){ return function(x){ return x; } } return function(x){ let val = x; for(let i = functions.length - 1; i >= 0; i--){ val = functions[i](val) } return val; } } const fn = com..

function getData(){ fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(({title}) => console.log(`음답: ${title}`)) } function handleHeavyTask(bFetch){ if(bFetch) getData(); //fetch 비동기 요청 else console.log('지연없이실행') //코드의 실행 순서 보장 못함. } (function(){ console.log('안녕하세요'); handleHeavyTask(false); console.log('무거운 작업이 시작됐어요.'); })(); 결과) 👇🏻 이것은 동기와, 비동기 코드가 ..

🤟 Icon Font 정리 안녕하세요 TriplexLab입니다. 오늘은 벡터 이미지를 Icon Font로 만들어보는 것을 정리해 보겠습니다. figma, Illustrator, sketch 등등의 벡터 이미지를 추출할 수 있는 디자인 툴을 사용하다 보면 벡터로 이미지를 SVG 파일로 뽑긴 뽑았는데... 코드를 그대로 html 파일에 넣으면 너무 길어져서 코드 깊이가 길어지면 길어질수록 감당할 수가 없어지는 경험을 해본 적 있으신가요?? 그래서 Icon Font로 만들어서 class로 불러와 사용해보겠습니다. 먼저 다음 사이트를 방문하시면 IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io 다음과 같은 화면이 나옵니다. 뭐 사용하고 싶은 아이콘 있으..

좌,우 버튼으로 Y축으로 슬라이드되면서 무한 반복(롤링)되는 방식입니다. html에서 아이템 모두 개수마다 노출되는것이 아니라, 비례해서 상대적으로 노출됩니다. See the Pen slider-loop by 소윤호 (@younhoso) on CodePen.

🎯무한 롤링 기능 안녕하세요 TriplexLab입니다. 오늘은 무한롤링 기능에 대해서 이야기를 해보겠습니다. 저 같은 경우에는 Swiper(v8.4.7)을 커스텀해서 기능을 완성할 수 있었습니다. 그리고 반응형으로 제작을 해야해서 마크업 상에서 PC, 모바일 둘 다 만들어 놓고 css 미디어쿼리를 사용해서 해상도가 PC일 때 PC버전 보여주고, 해상도가 모바일일 때 모바일 버전을 보여주는 방식을 택했습니다. 그렇다 보니 JS에서 Swiper인스턴스를 다음과 같이 두 번 호출했습니다. /** HISTORY 모바일 영역 */ new Swiper(".history-swiper.mo", { //... } /** HISTORY PC 영역 */ const historySwiperPc = new Swiper(".hi..