분류 전체보기345 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. 마우스 충돌 1 2025. 3. 12. 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. css 3d, transform-style: preserve-3d .box{position: absolute; width: 200px; height: 200px; left: 50%; top: 20%; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-50deg); }.box::before{content: ''; position: absolute; left: 0; bottom: -120px; width: 100%; height: 150px; background: #000; transform: rotateX(90deg);filter: blur(40px);opacity: 0.5;}.box div{position: absolute; inset: 0; transform-style:.. 2025. 3. 7. 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. 영상 작품의 껍데기가 생각했던 것보다 만듦새가 아주 좋았다. 사진에는 뭔가 고철덩어리나 폐기물처럼 보였었는데, 실물은 클래식하고 단단한 원목 재질로 상태가 좋았다. 2025. 3. 4. 워드프레스 사용자정의 쉬운 편집 버튼 적용하기 function $wp_customize->add_setting( 'main_tel', array( 'default' => '02-1004-1004', 'sanitize_callback' => 'wp_kses_post', 'transport' => 'refresh', ) ); $wp_customize->add_control( 'main_tel', array( 'label' => __( '메인 전화번호', 'your-textdomain' ), 'section' => 'custom_colors2', 'settings' => 'main_tel', 'type' => 'text'.. 2025. 3. 4. 미안해요 데이브 1968년 스텐리 큐브릭(1928~1999)이 감독한 SF 영화 《2001: 스페이스 오디세이》(2001: A Space Odyssey)에서 주인공 데이비드와 우주선의 인공지능 HAL 간의 극단적 대립의 순간, 마치 아득하고 고요한 암흑의 우주 공간과 같은 섬뜩하고 서늘한 HAL의 대답은 진화하는 인류 과학 문명과 환경의 어두운 이면을 매우 적나라하고 간단명료하게 보여준다. “미안해요, 데이브. 유감이지만 난 그럴 수 없어요.” 전시 주제는 이 한 줄로 상징된다. 전시 제목에서도 볼 수 있듯이, ‘데이브(Dave)’라는 단어의 ‘취소선’ 표식은 ‘데이브’와 같이 특정될 수 있는 어느 한 개인이 아닌, 누구라도 ‘데이브’가 될 수 있음을 의미하는 ‘개념 중심 크리에이티브(Conceptualdriven cr.. 2025. 3. 3. round tab, css Home About Services Portfolio Contactheader nav a.active { background: var(--clr);}header nav a.active::before { content: ''; position: absolute; left: -20px; bottom: 0; width: 20px; height: 20px; background: transparent; border-bottom-right-radius: 10px; box-shadow: 5px 5px 0 5px var(--clr); z-index: 2;}header nav a.active::after { content: ''; .. 2025. 3. 3. 원페이지 스크롤 섹션 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. 카테고리 최근글 쿼리, 갯수는 사용자정의에서 'recom', 'posts_per_page' => get_theme_mod( 'mainslidimg_num', 8 ), // 갯수는 사용자정의 'orderby' => 'date', 'order' => 'DESC' ); $query = new WP_Query($args); if ($query->have_posts()) { echo ''; while ($query->have_posts()) { $query->the_post(); ?> .. 2025. 2. 27. 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. 블렌더 단축키 S + sh + Z스케일 z는 제외 E돌출 tabedit 전환 토글r + xx축 로테이트sh + A추가 alt + G위치 리셋 sh + C커서 리셋 num . 화면 리셋 sh + D 복제 G + ctl이동중 스냅 ctl + A어플라이 리셋 f9팝업창F채우기 fill face edge split선기순으로 떼어내기 IInset Faces 면 삽입X선택 삭제sh + A엣지 선택 bridge edge loops루프 채우기 sh + 우클릭 커서 배치 + sh미세움직임한글쓰려면메모장에 쓰고 복붙/로컬뷰ctl + R루프컷 sh + alt + 클릭 루프선택ctl + I선택 반전J, ctl + Jjoinalt + Z엑스레이뷰alt + N플립 노말 L링크된 선택 ctl + B베벨P > seperr > select선택 분.. 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. 유니버셜 에브리띵 https://www.universaleverything.com/유니버셜 에브리띵(UE)은 미디어 아티스트, 경험 디자이너, 퓨처 크리에이터로 구성된 아티스트 콜렉티브이다. 그들의 삶에 대한 긍정적 사고와 미래 지향적인 접근 방식은 모든 협업, 예술 작품 및 프로토타입 작업에도 큰 영감이 된다. 2004년부터 그들의 글로벌 네트워크를 통한 다양한 작업을 진행해 왔으며, 각 프로젝트가 진행될 때마다 작품에 맞는 맞춤형 팀을 구성해서 진행한다. 이러한 글로벌 작업 네트워크에는 60명 이상의 건축가, 엔지니어, 디자이너, 촬영 감독, 애니메이터, 음악가 및 개발자가 다양하게 소속되어 유연한 작업 구조를 이루며 진행하고 있다. 그들은 새로운 디스플레이 기술을 접목하여 캔버스로 사용하기도 하며, 디자인, 건축, .. 2025. 2. 20. 카카오뱅크로 사업자통장 개설시 전자세금계산서용 인증서 발급 받기 귀찮아서 사업자등록과 사업자 통장 개설을 다 온라인으로 했다. 그런데 사업자 통장을 카카오뱅크로 하면 사업자 공용인증서는 공짜로 주는데 홈텍스에서 사용할 전자세금계산서용 공인인증서는 따로 받아야 한다. https://www.signgate.com/main.sg여기서 대면신청-> 발급 -> 전자세금계산서용 이라고 되어있는 4,400원짜리 사면 된다. (11만원짜리 누르지 않도록 주의한다 - 이런 상술은 뭥미..) 여기서 신청후 -> 이메일을 확인하고 (결제까지 한뒤) -> 신청서를 인쇄한후 나는 근처에 우체국이 있어서 거기 신청서를 가져가면 접수증을 주는데 -> 이메일로 안내 메일이 오면 그대로 하면 된다. 참고로 나는 덤벙대는 성격이라 4,400원 결제를 안한 상태로 우체국에 가는 바람에 (우체국에서 결.. 2025. 1. 7. zapier, 개발자없는 자동화도구 https://zapier.com/ Automate without limits | ZapierWorkflow automation software for everyone. Automate your work across 7,000+ app integrations—no developers, no IT tickets, no delays.zapier.com 2024. 11. 22. 공예인들의 축제 호모 파베르 https://www.homofaber.com/ Homo FaberHomo Faber is a cultural movement centred on creative artisans. Its signature projects are an online guide, an international biennial and education programmes for the next generations.www.homofaber.com 우왕. 너무 좋아. 2024. 11. 22. filter: drop-shadow .tri{position: absolute; left:100px;border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 60px solid #0f0;filter: drop-shadow(0 0 10px #0f0) drop-shadow(0 0 30px #0f0)} 2024. 10. 18. Lottie json 파일 단순 마우스 오버 효과 2024. 10. 17. mouse move .box span {position: absolute; display: block; width: 0; height: 0;border-radius: 50%;background: #fff; transition: 0.1s;transform: translate (-50%, -50%); mix-blend-mode: difference;}.box:hover span {width: 300px;height: 300px;}document.querySelectorAll('.box').forEach(function (box) { box.addEventListener('mousemove', function(e){ let x = e.pageX - box.offsetLeft; let y = e.pageY - box... 2024. 10. 17. 3d + 마우스 스크롤 https://activetheory.net/ 2024. 10. 14. 마우스 스크롤 https://akaru.fr/ 2024. 10. 14. 액체 흐르는 표현 https://sloshseltzer.com/ 2024. 10. 14. 이전 1 2 3 4 ··· 13 다음
