728x90 코딩저장소19 국제전화 입력 셀렉트 폼 안녕하세요 오랜만에 제 블로그에 저장해두고싶은 라이브러리가 있어 나타났습니다😉 국제전화 셀렉트 방식의 입력폼을 제공하는 라이브러리를 소개시켜드리려고 합니다~ 전세계 국가별 전화번호 코드가 너무나도 다양하고 전화번호 자리수도 다양하기 때문에 국가별 이름과 번호를 가져와서 정규식으로 처리하면 되겠지만 신경쓸게 많고 오류에 대한 두려움을 없애주니 잘만들어 놓은 라이브러리를 사용하지 않을 이유가 없겠쥬? 역시 열마디말보단 아래 예제대로만 하면 짜잔하고 만들어지는 마~술 See the Pen 국제전화 입력폼 라이브러리 by jmh (@jangmang) on CodePen. 자세한 정보 https://github.com/jackocnr/intl-tel-input GitHub - jackocnr/intl-tel-in.. 2023. 12. 5. 5분 타이머 화면에 출력하기 안녕하세요! 오늘도 매우 간단하지만 새로 짜려면 귀차니즘이 발동하는 타이머기능 소스를 가지고 왔습니다! setInterval안에 1초씩 반복될때마다 seconds(300초)값이 -1씩 줄어들면서 계산되는식인데요 15줄) 60초(1분)기준으로 총 초(300)를 나눈값에 Math.floor(내림수)를 해주면 1~5라는 숫자를 가져올수있습니다. 16줄) 총 초(300)에 60초(1분)을 나눈값의 나머지를 구하게 되면 1~5분단위로 0~60초의 값을 가져올수있습니다. 역시 말로 설명하려니 오히려 더 햇갈린것 같네요😑 아래 소스안에 주석을 한줄한줄 확인하시면 충분히 원하는 값과 방식으로 응용해서 사용하실 수 있을거 같네요😊 See the Pen 5분타이머 by jmh (@jangmang) on CodePen. 감.. 2023. 2. 27. 마우스포인터 방향으로 따라가는 화면만들기 마우스 커서가 움직이는 방향으로 브라우저밖의 화면으로 이동하면서 보여주는 모션을 만들어볼껀데요 🧔 mousemove이벤트로 브라우저내 중앙을 기준으로 상하좌우로 50%범위까지 보여주는 예제로 만들었습니다. 먼저 x,y좌표가 좌상단기준 0으로 시작하므로 브라우저의 중앙점부터 0으로 시작할수 있도록 변수명 centerX, centerY로 브라우저 가로,세로 사이즈의 반값을 빼준 뒤 변수명 percentX, percentY에 브라우저 크기의 반으로 나눈뒤 100으로 곱하여 브라우저 크기대비 상하좌우 -50% ~ 50%까지 이동할수 있도록 계산했습니다. range을 200으로 할경우 상하좌우 100%까지 400으로 할경우 200% 인셈입니다..... 거두절미하고 예제를 볼게요 :) See the Pen 마우스 .. 2022. 5. 6. jQeury ui를 이용해 drag & drop(드래그앤드랍) 기능을 쉽고 빠르게 이용하자 오늘은 jQuery UI의 가장 강력한 기능인 Draggable과 Droppable을 이용해 드래그앤드랍 기능을 쉽고 빠르게 구현해보았습니다. 2개 이상의 드래그객체를 한곳의 드롭다운영역에 위치했을때 발생할수 있는 가장 많이 사용되는 이벤트를 예제소스로 만들어봤습니다~ 사실 jquery-ui.min.js가 알아서 해주기때문에 필요한걸 쏙쏙 뽑아서 넣어주기만 하면 되는수준인데... 헉 모바일에서 손가락에 인식을 안해서 깜놀 ㅠㅠ 그냥 jquery.ui.touch-punch.js 만 jquery-ui.min.js 바로 아래에 선언해주니 모바일까지 완벽하게 동작하네요~ 휴ㅋㅋㅋ See the Pen jquery ui를 이용한 드래그앤드랍 (모바일포함) by 장명호 (@jangmang) on CodePen. 그.. 2022. 4. 28. CSS 한줄로 슬라이드 모션효과를 줄수있는 scroll-snap-type 오늘 소개해드릴 기능은 PC에서는 마우스휠로 모바일에서는 터치드레그로 슬라이드 모션 혹은 스냅효과를 줄 수있는 CSS기능입니다 자..잠깐! JS가 아닌 CSS로 그게 가능하다고??!! 이미 오래전부터 모바일 웹사이트로의 유입이 많아지면서 많은양의 컨텐츠를 화면내에서 카드섹션형식이나 리스트형식으로 보여주기위해 흔하게 사용되고 있는 UI인데요 일일히 스크립트로 제어하기엔 신경쓸게 많고 사이트가 무거워지는게 사실입니다 하지만 이제는 물흐르듯이 style을 잡아줄때 아래 css한줄만 함께 넣어주기만 하면됩니다 scroll-snap-type: x mandatory; scroll-snap-type: y mandatory; 너무 직관적으로 x는 가로스크롤, y는 세로스크롤을 지원합니다 심하게 간단하면서도 거의 모든 .. 2022. 3. 9. GreenSock 플러그인 ScrollTrigger 사용법 요즘처럼 html5+, css3+, jquery가 생기기전에는 웹사이트에 모션을 구현해내기 위해 한번쯤 사용해봤을 라이브러리가 바로 지금은 기억에서 흐릿해진 트윈맥스(TweenMax)이다. css와 jquery로 만들어낼수 있는 애니메이션 기능이 다양해지면서 자연스럽게 사용을 안하게 되었는데 GreenSock 일명 GSAP 3버전으로 꾸준이 업그레이드 되어왔다는 사실! 속도도 빠르고 강력한 기능들이 많지만 대체할수 있는 방법도 있을뿐더러 사용법을 다시 익혀야 했기 때문에 등한시 해왔던게 사실이다. 하지만 모션으로 범벅이 된(?) 사이트를 제작할때는 유용하다고 생각한다. (극혐이지만...) 그 중 오늘 알아볼 내용은 GSAP에서 확장으로 제공하는 강력한 플러그인 기능 ScrollTrigger의 사용밥에 대.. 2022. 2. 22. fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합) 오늘 소개할 내용은! 풀페이지로 스토리텔링한 페이지를 제작할때 유용하게 사용중인 fullpage.js 라이브러리입니다. 하지만 2.9.7버전 이후로 3버전 이상부터는 유료버전으로 전환되어 버렸다 ㅠㅠ 아직도 2버전대로 기본적인 기능들은 활용할 수 있어서 자주 애용하긴 하지만 확장기능을 사용하려면 결제가 필요하다. 여기서 말하는 확장기능은 아래 주소에서 확인해볼 수 있는데 https://alvarotrigo.com/fullPage/extensions/ko/ fullPage extensions and plugins fullPage extensions and plugins alvarotrigo.com 영구획득으로 편하게 사용할수 있기는 하지만 가격이 부담스러운건 사실이다.. 그 중에 내가 사용하려는 기능은 마.. 2022. 2. 21. 스크롤 다운 모션 라이브러리 AOS.js 사용법 오늘은 페이지 스크롤에 따라 등장하는 모션을 간단하게 제공해주는 라이브러리 AOS.js를 소개드리려 합니다. 물론 복잡하지 않은 사이트에 간단한 등장 모션정도는 직접짜서 넣어도 무관하겠지만 내용과 레이아웃에 따라 속도, 방향, 지연시간등을 다르게 적용하는게 은근히 번거로울 수 있습니다. 그래서 발견한 aos.js 라이브러리를 이용하면 간단하게 각지점마다 다양한 모션과 옵션을 적용할 수 있습니다. 사용법 또한 매우 간단합니다. CSS JS INITIALIZE AOS 모션영역 위의 예제소스를 토대로 설명하면 기본css와 js를 import한후에 모션을 적용하고자 객체에 정해진 속성값을 넣어주기만 하면 됩니다. data-aos="fade-right" // 모션방향 (필수값) 아래는 필요에 따라 선택해서 넣으면.. 2022. 1. 6. 스크롤을 내리고 올리는지 체크하는법 스크롤 이동전의 변수값 lastScrollTop과 이동범위인 변수값 st를 비교하여 스크롤이 아래 또는 위로 이동여부를 체크할 수 있습니다. 이때 변수값 delta를 이용해 어느정도 이상 움직였을때 체크할지 범위를 비교하여 return시켜주는 분기를 7줄에 추가했습니다. 너무 미세하게 반응할경우 스크롤값에 따라 반응하는 액션이(예를들어 헤더가 나타나고 사라지는 모션) 지저분해질수 있기 때문입니다 사용자 환경에 따라 차이가 있겠지만 delta = 100 정도면 마우스휠을 연속으로 2번이상 정도 움직였을때 반응하는걸 테스트해볼 수 있습니다 See the Pen 스크롤 위아래 이동체크 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 30. 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올수있나요? Q. 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올 수있나요? 예전에 사용하던 방식으로 구글시트의 셀내용을 웹에 실시간으로 가져오기 위해 시도해보았지만 구글의 접근정책이 바뀐건지 데이터가 불러와지지 않았다...(예전내용들은 생략) 거두절미하고 찾아본결과 아래의 2가지 방법으로 가능했다 첫번째 방법) iframe으로 삽입하기 '파일 > 공유 > 웹에 게시' 를 누른다 1. '삽입' 탭을 누른다. 2. 전체 문서를 누르면 원하는 시트를 선택가능 3. '문서가 수정되면 자동으로 다시 게시' 를 체크하면 수정한 내용이 동기화된다. (약 5분간격) 4. 생성된 iframe태그를 복사해서 원하는 웹사이트에 적용한다. - 테스트해본결과 수정한 내용이 바로 실시간으로 반영되지는 않았고, 대략 5분간격으로 수.. 2021. 12. 21. 정말 간단한 부드럽게 마우스 따라다니기 정말 간단한 부드럽게 마우스 포인터를 따라다니는 원입니다. 스크립트를 최소화 하기위해 css의 transition으로 부드러운 효과를 주고 js의 mousemove로 위치값을 간단하게 구현했습니다 해당하는 영역안에서는 따라다니고 영역을 벗어나면 자연스럽게 fadeout으로 사라지는 마~술(?) See the Pen 마우스 포인터따라다니기 by 장명호 (@jangmang) on CodePen. 2021. 12. 21. 웹사이트에서 앱실행 및 딥링크 모바일 웹사이트에서 앱실행을 위한 버튼예제입니다. 우선 안드로이드, IOS의 기기분기로 나눈후에 1. 앱 설치시 인스타그램 앱실행 2. 앱 미설치시에는 앱마켓으로 이동 안드로이드는 하나의 주소형식으로 앱실행과 구글마켓이동이 가능한걸 볼 수 있지만 IOS는 앱실행과 앱스토어 이동이 나누어져 있는걸 확인 할 수 있습니다. 아이폰의 경우 앱의 설치여부를 접근할 수 있는 방법이 없기 때문에 setTimeout으로 시간이 지나도 앱실행이 되지 않으면 앱스토어 경로로 이동하는 함수가 하나 더 딸려있는겁니다ㅎ 참고로 안드로이드와 IOS 모두 실행하고자 하는 앱의 값(시그마)은 앱개발자를 통해서 전달받아야 합니다~ See the Pen 앱 딥링크 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 8. 이전 1 2 다음 728x90
