좌,우 버튼으로 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..

TriplexLab SKIN(v1.2) TriplexLab 블로그는 2021.10.02(토)에 최초로 리뉴얼 작업이 진행되었고 현재 지금까지 운영해가고 있습니다. TriplexLab SKIN은 티스토리 블로그에서 사용되는 스킨입니다. 해당 스킨은 무료입니다. 누구나 커스터마이징을 할 수 있습니다.(이용방법은 하단에 내용을 참고해주세요😃) ✅ TriplexLab Skin 다운로드 가이드 해당 스킨을 다운로드하기 위해서는 개발자 커뮤니티인 Github에서 다운을 받을 수 있습니다. GitHub - younhoso/TriplexLab-Blog: Tistory TriplexLab Blog Tistory TriplexLab Blog. Contribute to younhoso/TriplexLab-Blog devel..

👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..

🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..

popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..

난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..

[React] Props 2차 배열 활용하기 안녕하세요 오늘은 2차 배열을 활용하기 관점에서 이야기를 해보도록 하겠습니다. 아래 예시는 React에서 Props 처리하는 예시입니다. App.js 파일에서 Dice라는 컴포넌트에서 Props속성들을 주고 있고, Dice.js 파일에서 그 Props속성들을 받아오고 있습니다. //App.js import Dice from "./Dice"; function App() { return ( ) } export default App; 👉 2차 배열 활용하기 근데 Dice.js파일에서 각각 이미지들을 import 해와서 객체와 배열을 활용해서 'DICE_IMAGES'라는 변수에 정리를 했습니다. 자 이렇게 정리를 해두면 Props를 활용해서 함수 내부에서도 src라는..

🚉 ngrok 사용법 안녕하세요 TriplexLab입니다. 오늘은 ngrok에 관해서 이야기해보도록 하겠습니다. 먼저 ngrok은 로컬에서 작업 중인 것을 안전한 터널을 통해 외부에 공유하려고 할 때 쓰면 유용한 도구입니다. 요즘 재택근무가 잦아지면서 현재 로컬에서 작업하던 것을 외부에 공유해줘야 하는 상황이 많이 있습니다. 이런 상황일 때 사용하면 정말 좋습니다. 👉 ngrok 설치 해당 사이트에 방문해서 회원가입 및 로그인을 해주세요. 아래 링크에 들어가서 보시면 운영 체제별로 zip으로 압축한 패키지를 제공하므로 다운로드하여서 압축을 해제하고 PATH에 걸린 폴더에 넣은 후에 사용하면 됩니다. ngrok - secure introspectable tunnels to localhost dashboar..

안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..

✨ slider custom 안녕하세요 TriplexLab 입니다. 오늘은 제가 slider를 응용해서 만든 slider custom에 관해서 살펴보도록 하겠습니다 :) 저도 이 슬라이스 애니메이션은 웹써칭을 하다가 우연히 발견한 애니메이션 입니다. ✍️ slider custom 코드 TriplexLab Front Developer Blog * { margin: 0; padding: 0; list-style: none; } @keyframes slidein { 0% {left: 45%;opacity: 0;} 100% {left: 50%;opacity: 1;} } @keyframes slidein2 { 0% {right: 45%;opacity: 0;} 100% {right: 50%;opacity: 1;} ..

👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ 하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다. (개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 ..