// 241031 swiper for auto play on tab menu document.addEventListener('DOMContentLoaded', function () { let tabSliders = document.querySelectorAll('.care_swiper'); tabSliders.forEach(function (slider, index) { let sliderId = index + 1; let mySwiper = new Swiper(slider, { observer: true, observeParents: true, slidesPerView: 1, spaceBetween: 20, centeredSlides: true, speed: 2000, autop..
html css#snow_wrap{ position: absolute; top: 0; left: 0; width: 1920px; height: 100%;}#snow_wrap canvas{ position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} js// snow animation$(()=>{ (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window...
html 3 css.lyrics_count{ width: 345px; margin: 0 auto; text-align: left;}.lyrics_count span{ display: inline-block; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; color: #000; font-size: 16px; font-weight: 700; vertical-align: middle;}.lyrics_count span + span{ margin-left: 6px;}.lyrics_co..
html javaScriptfunction secScroll(){ const screenHeight = document.documentElement.clientHeight; $(window).scroll(function(){ $('.item').each(function(){ let crtHeight = $(window).scrollTop(); // current scroll top let t..
GA setting @next/third-parties 설치 src/app/[lng]/layout.tsximport type { Metadata, Viewport } from 'next';import { dir } from 'i18next';import { locales } from '@/i18n';import { NextIntlClientProvider } from 'next-intl';import { getMessages, unstable_setRequestLocale } from 'next-intl/server';import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';import '@/assets/css/glo..
next.js 환경에서 스크롤 이벤트 구현하기 요구사항은 스크롤이 특정 영역에 진입했을 때 canvas로 그린 animation이 구현되는 것이었다 스크롤을 감지하기 위해 JS의 intersection observer 기능을 사용했고next.js 환경에서 사용하고자 useIntersectionObserver hook을 생성했다. 그리고 페이지 초기 렌더링 시에는 해당 canvas animation이 로드되지 않고scroll event가 수행될 때 canvas 컴포넌트가 렌더링 되도록 하기 위해next/dynamic을 import 했다. src > hooks > useIntersectionObserver.tsimport { useEffect, useState, useRef } from 'react';..