본문 바로가기

Js58

gsap, hue-rotate, mousemove .cursor{position: relative; pointer-events: none;}.cursor .box { position: absolute; width: 10px; height: 5px; top:-50px; background-color: aqua;box-shadow: 0 0 15px aqua, 0 0 50px aqua ;transform-origin: center 50px;} 2025. 3. 15.
smoothwheel, 부드러운 마우스 스크롤 https://github.com/fatlinesofcode/jquery.smoothwheel GitHub - fatlinesofcode/jquery.smoothwheel: Cross browser smooth mouse wheel and trackpad scrollingCross browser smooth mouse wheel and trackpad scrolling - fatlinesofcode/jquery.smoothwheelgithub.com 2025. 3. 11.
wow.js animate ... 2025. 3. 9.
rotate, mouse move, delay span{position: absolute; width: 40px; height: 5px; border-radius: 3px; background: #0ff; pointer-events: none; transform-origin: 50px; box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; transition: 0.1s;animation: animate 10s linear infinite;}@keyframes animate { 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}}const spans = [];const numSpans = 30;for(let i = 0; i { const mouseX = e.. 2025. 3. 7.
circle, strokeDashoffset, scrollTop, 그래프 0%let circleIndicator= document.getElementById('circleIndicator');let circle = circleIndicator.querySelector('circle');let textElement = document.getElementById('scrollPercentText');let darrayElement = document.querySelector('.darray');let radius = circle.getAttribute('r');let circum = 2 * Math.PI * radius;circle.style.strokeDasharray = circum;function setProgress(percent){ let offset = circu.. 2025. 3. 6.
gsap, mouse move *{margin: 0;padding: 0; box-sizing: border-box;}body{background-color: #000; background-image: linear-gradient(to right, #333 1px , transparent 1px),linear-gradient(to bottom, #333 1px , transparent 1px);background-size: 20px 20px;}.cursor{position: absolute; pointer-events: none; top: 30px; left: 30px;}.box{position: absolute; width: 20px; height: 10px; background: #00ff9a;} 2025. 3. 5.
원페이지 스크롤 섹션 1섹션 2섹션 3섹션 4섹션 5섹션 1섹션 2섹션 3섹션 4섹션 5const navLinks = document.querySelectorAll("nav a");const sections = document.querySelectorAll("section");// 네비게이션 클릭 시 부드러운 스크롤navLinks.forEach(link => {link.addEventListener("click", function(event) { event.preventDefault(); // 스크롤 애니메이션 중 active 업데이트 방지 isScrolling = true; // 모든 네비게이션에서 active 제거 후 클릭된 요소에 active 추가 navLinks.forEach(a => .. 2025. 3. 3.
menu bar mouse move // 메뉴 색상바var $marker = $('').appendTo('.menu'); var $navitem = $('.menu > .menu-item'); var $current = $('.menu-item.current-menu-item');if ($current.parents('.sub-menu').length) { // 2차 메뉴 $current = $current.closest('.menu-item-has-children');}function indicator($el) { $marker.css({ left: $el.position().left + 20 + "px", width: $el.outerWidth() - 40 + "px", opacity.. 2025. 2. 25.
폴리곤. 컬러 로테이션 hue-rotate let container = document.querySelector('.container');for (let i = 0; i .row { display: inline-flex; margin-top: -32px; margin-left: -50px;}.row:nth-child(even) { margin-left: 1px;}.row .box { position: relative; width: 100px; height: 110px; background: #0c0c0c; margin: 2px; transition: 2s; clip-path: polygon (50% 0%, 100% 25%, 100% 75%, 50% 100%,0% 75%,0% 25%);}.row .box:hov.. 2025. 2. 24.
createElement, mouse move const rounds = [];const numrd = 20;for(let i= 0; i { const mouseX = event.clientX; const mouseY = event.clientY; rounds.forEach((span, index) => { const delay = Math.random() * 200; setTimeout(() => { span.style.left = `${mouseX + 20 + index}px`; span.style.top = `${mouseY + index }px`; }, delay) })})span.round{position: absolute; width: 20p.. 2025. 2. 23.
Lottie json 파일 단순 마우스 오버 효과 2024. 10. 17.
replace(), 유튜브 클릭시 오토플레이 유튜브 주소 뒤에 ?autoplay=1 붙이기 var currentUrl = $('iframe').attr('src');$('.video').click(function(e){ e.preventDefault(); $('#overlay').addClass('visible'); var newStr = '?autoplay=1'; var newUrl = currentUrl.concat(newStr); $('iframe').attr('src', newUrl);});$('.close').click(function(e){ e.preventDefault(); currentUrl = $('iframe').attr('src'); $('#overlay').removeClass('vi.. 2024. 7. 17.
숫자 카운터 var box = $('.box'), boxin = box.find('.boxin'), rate = box.find('.rate'), rateNum = rate.attr('data-rate'); boxin.animate({width:rateNum + '%'}, 2000);//첫번째 // setInterval(textAni, 100);// function textAni(){// var currentRate = boxin.width() / box.width() * 100;// rate.text( Math.ceil(currentRate) + '%');// }//두번째 animate 사용자속성 만들어 넣기 // $({rate:0}).animate({rate:rateNum},{// .. 2024. 7. 17.
hasClass를 이용한 이미지 체인지 var $window = $(window), $header = $('.header'), $logo = 'img/logo.svg', $mlogo = 'img/mlogo.svg';$window.scroll($.throttle(1000/15, function(){ if ($(this).scrollTop() >= 100 ){ if(!$header.hasClass('small')){ $header.addClass('small'); switchLogo($mlogo); } } else { if($header.hasClass('small')){ $header.removeClass('small');.. 2024. 7. 17.
throttle(), clone() var $window = $(window), $header = $('.header'), $haderClone = $header.contents().clone(), $headerCloneContainer = $(''), $threshold = $header.offset().top + $header.outerHeight();$headerCloneContainer.append($haderClone);$headerCloneContainer.appentTo('body');$window.scroll($.throttle(1000/15, function(){ if ($(this).scrollTop() >= $threshold ){ $headerCloneContainer.addCl.. 2024. 7. 17.
lottieFiles https://lottiefiles.com/interactivity Lottie Player - Interactivity GuideThis is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applicationslottiefiles.com    스크롤 LottieInteractivity.create({ player: '#test', mode: 'scroll', actions: [ { visibility:[0.2, 0.7], //컨테이너의 20.. 2024. 7. 15.
Lottie.js, scroll 연동 사용법 : https://airbnb.io/lottie/#/1. 에프터이펙트에서 제작한 애니를 json으로 변환한다. bodymovin 플러그인이 파일을 인식 못하고 작동이 안되어 찾아봤더니 lottieFiles 가 생기면서 이제는 lottieFiles 플러그인으로 대체되었다고 한다. https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통lottiefiles.com 기본 작동법let clickAni = doc.. 2024. 7. 15.
swiper.on('slideChange'), letters const swiper = new Swiper('.swiper', { mousewheel: true, direction: 'vertical', speed: 1700, parallax: true});//글자 한자씩 쪼개기 document.querySelectorAll('.header-content h1').forEach(e => { e.innerHTML = e.textContent.replace(/ (-|#|@){1}/g, s => s[1]+s[0]).replace(/(\S*)/g, m => { return m.replace(/\S(-|#|@)?/g, '$&') }) e.querySelectorAll('.letter').forEach(function(l, i) { l.setAttribute('style.. 2024. 7. 14.
gsap, draggable, photoswipe window.onload = function() { setTimeout(function() { document.body.classList.add('loaded') if (window.matchMedia('(min-width: 992px)').matches) { // If not mobile Draggable.create('.gallery', { bounds: 'body', inertia: true }) } }, 200)}// 이미지 링크 주소 가져오기 document.querySelectorAll('.gallery__item').forEach(function(e) { let img = new Image(), hrefURL = e.getAttribute('href') img.on.. 2024. 7. 10.
백그라운드 영상과 swiper 연계 const video = document.querySelector('.video-background')const swiperText = new Swiper('.swiper', { speed: 1600, loop:true, mousewheel: { }, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }})swiperText.on('slideChange', function() { gsap.to(video, 1.6, { currentTime: (video.duration / (this.slides.len.. 2024. 7. 9.
page transition var $context = $('body'),$navItem = $('#main-nav-menu li'),$navItemMenu = $('#main-nav-menu li a'),$navUnderline = $('#nav-underline'),$activeItem = $('#main-nav-menu li.active'),animating = false;$navUnderline.css({ left: $activeItem.position().left, width: $activeItem.outerWidth(), });$navItem.mouseenter(function(){ $navUnderline.stop().css({ left: $(this).position().left, .. 2024. 7. 9.
setProperty('--scrollTop', `${this.scrollY}px`) window.addEventListener('scroll', e => { document.documentElement.style.setProperty('--scrollTop', `${this.scrollY}px`) // Update method})gsap.registerPlugin(ScrollTrigger, ScrollSmoother)ScrollSmoother.create({ wrapper: '.wrapper', content: '.content'}).layers__base { transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0); z-index: 0;}.layers__middle { transform: translate3d(0, calc(var(--s.. 2024. 7. 9.
appendChild(), prepend() let next = document.querySelector('.next');let prev = document.querySelector('.prev');let slider = document.querySelector('.slider');function append(){ let slides = document.querySelectorAll('.slides'); slider.appendChild(slides[0]);}function prepend(){ let slides = document.querySelectorAll('.slides'); slider.prepend(slides[slides.length - 1]);}next.addEventListener('click', funct.. 2024. 7. 8.
transform-style: preserve-3d, Object.assign(), 비효과 document.addEventListener('mousemove', e => { Object.assign(document.documentElement, { style: ` --move-x: ${(e.clientX - window.innerWidth / 2) * -.01}deg; --move-y: ${(e.clientY - window.innerHeight / 2) * .01}deg; ` })}) H1 Main Title HTML / CSS small text .. 2024. 7. 7.
horizon parallax, particle new Swiper(".slider", { //direction:"vertical", speed:2000, mousewheel: { enabled:true, sensitivity:2.4, }, spaceBetween: 18, parallax:true, //freeMode:true}):root{ --transition:1.5s cubic-bezier(0.2, 0.6, 0, 1) ;}.slider {height: 100%;}.slider__layer{position: absolute; /* transition: var(--transition) !important; */ inset:0; background-size: cove.. 2024. 7. 6.
swiper bind document.querySelectorAll(".slider").forEach((n, i) => { window[`slider${i+1}`] = new Swiper(n, { freeMode:true, centeredSlides:true, direction:"vertical", mousewheel:true, slidesPerView:1.75, slidesOffsetBefore: -125, })})bindSwipers(slider1, slider2, slider3, slider4); .. 2024. 7. 6.
gsap+smoothScroll gsap.registerPlugin(ScrollTrigger, ScrollSmoother);if(ScrollTrigger.isTouch !==1){ ScrollSmoother.create({ wrapper:".wrapper", content:'.content', smooth:1.5, effects:true })}//topgsap.fromTo(".hero-section", { opacity:1}, { opacity: 0, scrollTrigger: { trigger: ".hero-section", start: "center", end: "820", scrub: true }})/.. 2024. 7. 6.
gsap vertical .s2ul{display: flex; gap: 30px; align-items: start; position: absolute; left: 30%;}.s2ul li{position: relative; display: flex; align-items: center; justify-content: center; background-image: url(img/1.jpg); background-size: cover; margin-bottom: 50px; width:400px; height: 350px; }.s2ul li a{display: block; background-color:black; color: #fff; font-size: 2rem; padding: 5px 25px;}.s2ul li{clip-p.. 2024. 7. 5.

티스토리툴바