티스토리

amanda의 공간입니다

검색하기

블로그 홈

amanda의 공간입니다

amanda.tistory.com/m

amanda 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[javaScript] jQuery로 modal 창 띄우기 HTML 모달 띄우기 모달 팝업 콘텐츠 CSS/* modal */body.ofh { overflow-y: hidden;}#dim { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}.modal_contents { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10002; width: 9.. 공감수 0 댓글수 0 2024. 11. 8.
[javaScript] 페이지를 따라다니는 하단 띠 배너 let prevScrollpose = window.pageYOffset; window.addEventListener("scroll", function() { let currentScrollPose = window.pageYOffset; if (prevScrollpose > currentScrollPose) { document.getElementById("bnr_btm").style.bottom = "60px"; // 스크롤 올릴 때 } else { document.getElementById("bnr_btm").style.bottom = "0px"; // 스크롤 내릴 때 } prevScrollpose = currentScrollPose; });} 공감수 0 댓글수 0 2024. 11. 8.
[javaScript] swiper for auto play on tab menu swiper 플러그인을 탭에 삽입했는데탭이 바뀌면 스와이퍼가 작동하지 않는 이슈 발생 구글링하여 아래 코드로 해결 ! // swiper for auto play on tab menudocument.addEventListener('DOMContentLoaded', function () { let tabSliders = document.querySelectorAll('.my_swiper'); tabSliders.forEach(function (slider, index) { let sliderId = index + 1; let mySwiper = new Swiper(slider, { observer: true, observeParents: true, slidesPerView: 1, spaceBetwee.. 공감수 0 댓글수 0 2024. 10. 31.
[js] snow falling effect 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... 공감수 0 댓글수 0 2024. 8. 29.
[jQuery] lyrics auto count animation 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.. 공감수 0 댓글수 0 2024. 8. 29.
[jQuery] navigation position sticky scroll event html menu 01 menu 02 menu 03 menu 04 jsfunction tabScroll(){ $('.navi_menu li a').on('click', function(){ let targetId = $(this).data('target'), targetSec = $('#' + t.. 공감수 0 댓글수 0 2024. 8. 29.
[js] 각 section에 스크롤 진입 시 .active 클래스명 삽입 scroll 감지 event html javaScriptfunction secScroll(){ const screenHeight = document.documentElement.clientHeight; $(window).scroll(function(){ $('.item').each(function(){ let crtHeight = $(window).scrollTop(); // current scroll top let t.. 공감수 0 댓글수 0 2024. 8. 29.
[swiper] 스와이퍼 슬라이드 option swiper 속성 정리function eventSwiper(){ var eventSwiper = new Swiper('.event_swiper',{ slidesPerView : '2', // 노출되는 slide 개수 spaceBetween : 10, // 간격 loop:true, // 반복여부 loopAdditionalSlides : 1, direction: 'vertical', // slide 방향 autoHeight : true, // 높이 자동 조절 centeredSlides: true, centeredSlidesBounds: true, speed: 2500, grabC.. 공감수 0 댓글수 0 2024. 5. 20.
[jQuery] 제이쿼리 CDN jQuery CDN 모음 이전 회사에서는 IE까지 맞추느라 1.12.4 버전으로 사용했는데현재 회사에서는 3.6.1 버전으로 사용중 ! *제이쿼리 모든 버전별 CDN 확인하기https://releases.jquery.com/jquery/ 공감수 0 댓글수 0 2024. 5. 17.
[JavaScript] SweetAlert2가 safari에서 제대로 보이지 않을 때 알럿창 버튼에 click event를 추가하기 위해 sweet alert 플러그인 사용 그런데 맥북 safari에서는 알럿창이 보이지 않는 이슈가 있었다찾아보니 해당 페이지의 맨 밑에 알럿창이 뜸.. css가 먹지 않는 것 같아 구글링을 하다가 stackoverflow에서 실마리를 찾음 sweet alert CDN 링크를 아래로 수정하니 해결되었다 ! *참고https://stackoverflow.com/questions/45476045/js-sweetalert2-not-working-in-safari-browser 공감수 0 댓글수 0 2024. 5. 17.
[swiper] 스와이퍼 CDN swiper CDN CSS https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css swiper CDN JShttps://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js 공감수 0 댓글수 0 2024. 5. 10.
[Swiper] 스와이퍼 슬라이드 넘김 시 이벤트 Swiper.js에서 슬라이드 넘어갈 때 event 및 조건문 추가하는 방법 on에 이벤트 속성 삽입 후 event 또는 조건문의 내용 넣기 var mySwiper = new Swiper('.swiper-container', { slidesPerView: 'auto', centeredSlides: true, on: { slideChange : function() { // event }, }, }); * Swiper Event List init 슬라이드 쇼가 초기화될 때 slideChange 슬라이드가 변경될 때 slideChangeTransitionStart 슬라이드 변경 트랜지션 시작시 slideChangeTransitionEnd 슬라이드 변경 트랜지션 끝날 때 slideNextTransitionSta.. 공감수 0 댓글수 0 2024. 3. 13.
[javaScript] 자바스크립트 반응형 event 조건문 // responsive event let mql = window.matchMedia("screen and (max-width: 768px)"); if (mql.matches) { console.log('모바일'); } else { console.log('데스크탑'); } // resize event let mql = window.matchMedia("screen and (max-width: 768px)"); mql.addListener(function(e) { if(e.matches) { console.log('모바일'); } else { console.log('데스크탑'); } }); *참고 https://offbyone.tistory.com/122 공감수 0 댓글수 0 2024. 3. 5.
[javaScript] 브라우저의 높이값, 너비값 가져오기 브라우저의 높이값, 너비값 var documentHeight = (window.innerHeight || self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight); var documentWidth = (window.innerWidth || self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); 공감수 0 댓글수 0 2024. 1. 30.
[javaScript] slot machine counting animation 1. codepen 깔끔한 슬롯머신 숫자 카운팅 자바스크립트 애니메이션 https://codepen.io/nourikarita/pen/RRJXQx slot machine click to randomize a number between 1 and 9999 and see the magic happen... codepen.io 공감수 0 댓글수 0 2024. 1. 11.
[javaScript] counting flip animation 달력이나 시계가 카운트 되면서 자동으로 넘어가는 자바스크립트 애니메이션 레퍼런스 (핀터레스트) https://www.pinterest.co.kr/pin/1047016613354267908/ A Flip Clock Flips Quickly Stock Footage Video [Video] | Clock, Instagram story ads, Facebook create www.pinterest.co.kr codepen에서 찾은 javascript animation 소스 https://codepen.io/ademilter/pen/nazxPX Countdown Clock ... codepen.io 풀어서 설명하는 velog 1. 라이브러리 없이 Vanilla CSS 만으로 플립 시계 카운터 (Flip Coun.. 공감수 0 댓글수 1 2024. 1. 11.
[javaScript] click 요소 data value로 popup창 띄우기 클릭한 요소의 데이터 값 가져와서 팝업 띄우기 HTML 팝업열기 팝업 제목 팝업 내용 CSS /* common */ html, body{margin: 0;padding: 0;} /* popup */ #dim{display: none;position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);} .pop_container{display: none;position: fixed;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 2;width: 90%;max-.. 공감수 0 댓글수 0 2023. 12. 29.
[javaScript] chart 플러그인 1. chart.js - 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다) - 심플한 디자인이고 기본 옵션 외에 커스텀이 어려운 편 https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snip.. 공감수 0 댓글수 1 2023. 12. 27.
[javaScript] countdown event 자바스크립트로 카운트다운 이벤트 구현하기 HTML DAYS HRS MINS SECS CSS .count_wrap ul{ display: flex; justify-content: center; align-items: center; } .count_wrap ul li{ position: relative; text-align: center; } .count_wrap ul li + li{ margin-left: 40px; padding-left: 40px; } .count_wrap ul li + li:before, .count_wrap ul li + li:after{ display: block; content: ''; position: absolute; top: 20px; left: -4px; width: 8p.. 공감수 0 댓글수 0 2023. 12. 13.
[jQuery] 세로 방향 위로 올라가는 marquee 위로 올라가는 텍스트 animation jQuery로 구현하기 jQuery animate 무한 반복은 call back에 함수 이름을 작성해주면 된다 *jQuery animate 사용 방법 (진행 방식과 call back은 생략 가능) .animate({적용되는 속성}, speed, 진행 방식, call back) 진행 방식 값은 linear, swing, null 등이 있음 function scrollTest(){ var scrollRolling = $('.textrolling'), scrollHeight = scrollRolling.height(), scrollTime = scrollHeight * 50; scrollRolling.css('margin-top', '150px'); scrollRolli.. 공감수 0 댓글수 0 2023. 12. 13.
[jQuery] filter 활용한 on click 이벤트 tab menu data-tab 값을 활용해 filter로 해당 data 값 가진 요소 찾는 click event $('.btn_tab').on('click', function(){ var tabData = $(this).data('tab'), tabMenu = $('.tab_menu'), tabConbox = $('.tab_conbox'); tabMenu.children().removeClass('active'); tabMenu.children().filter('[data-tab=' + tabData + ']').addClass('active'); tabConbox.hide(); tabConbox.filter('[data-tab=' + tabData + ']').stop().fadeIn(); }) 공감수 0 댓글수 0 2023. 12. 6.
[jQuery] 탭 메뉴 클릭 시 scroll event 탭 메뉴에 data-name 값을 각각 부여하고 이동할 섹션에는 ID값으로 같은 값을 부여한 뒤 탭 클릭 시 해당하는 섹션으로 스크롤 이동하도록 구현 HTML menu1 menu2 menu3 jQuery $('.tab_menu li a').on('click', function(){ var targetId = $(this).data('name'), targetSec = $('#' + targetId).offset().top; $('html').animate({ scrollTop : targetSec }, '2000'); return false; }) 공감수 0 댓글수 0 2023. 11. 30.
[javaScript] 자바스크립트로 mouse hover event 구현 자바스크립트로 mouse over (mouse enter) 호버 이벤트 구현하기 const wrap = document.getElementById('js_menu_wrap'); const items = wrap.children; for(let i=0; i 공감수 0 댓글수 0 2023. 11. 30.
[javaScript] 카카오톡 공유하기 버튼 & 오류 해결 카카오톡 공유하기 기능 사용 후기 이미지 아래 타이틀과 텍스트만 들어간 깔끔한 형식을 원했는데 타입을 피드(feed)로 선택한 뒤 커스터마이징 하면 된다 공유하는 메시지에서 이미지의 썸네일 교체와 타이틀 및 텍스트 변경은 javaScript에서 커스텀 카카오 썸네일 이미지 크기는 1200*630을 주로 사용하므로 동일한 사이즈로 했다 * 카카오 공유하기 기능 구현 시 유의점 1. 공유하기 기능 사용 전 kakao dev의 내 애플리케이션 플랫폼에 url을 꼭 등록해두어야 한다. 2. 이동하는 url은 내 플랫폼에 등록된 메인 url의 하위 페이지만 가능 3. PC와 모바일 파일을 따로 사용하는 경우 모바일 url도 따로 등록해야 한다 ! 개인 계정으로 테스트해보니 회사 홈페이지 url도 내 플랫폼으로 등.. 공감수 0 댓글수 1 2023. 11. 28.
[javaScript] 특정 날짜 기간 동안에만 이벤트 실행 자바스크립트 특정일 팝업 띄우기 이벤트 let startDate= new Date("2023/11/10 00:00:00"); let endDate= new Date("2023/11/20 23:59:00"); if(Date.now() >= startDate && Date.now() 공감수 0 댓글수 0 2023. 11. 17.
[youtube] 유튜브 영역에 intro image 넣고 클릭 시 동영상 자동 재생 유튜브 재생 버튼 jquery로 만들기 html css .vod_conbox{ overflow: hidden; position: relative; height: 0; width: 100%; /* padding-top: 30px; */ padding-bottom: 56.25%; } .vod_conbox iframe, .vod_conbox object, .vod_conbox embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vod_thumb{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #000; //intro 이미.. 공감수 0 댓글수 0 2023. 11. 10.
[jQuery] mobile touch scroll noti event 모바일 시 사용자가 좌우 스크롤 하도록 유도하는 이미지 띄우는 이벤트 모바일에서 터치 또는 영역 스크롤 시 이미지 사라지는 이벤트 // scroll wrap .scroll_wrap{ overflow-x: auto; width: 100%; } // guide image .scroll_guide{ position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; z-index: 10; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .scroll_guide img{ max-width: 100%; } // scroll contents .scroll_content.. 공감수 0 댓글수 0 2023. 11. 9.
[javaScript] 카카오톡으로 링크 공유하기 *카카오톡 공유하기 Demo https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com https://developers.kakao.com/docs/latest/ko/message/js-link Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 피드 형식으.. 공감수 0 댓글수 0 2023. 11. 7.
[script] 자바스크립트 현재 url 복사하기 html 현재 링크 복사하는 버튼 만들기 *출처 https://seill.tistory.com/1037 [JavaScript] 자바스크립트로 URL, 주소 복사 하는 방법 !! [JavaScript] 자바스크립트로 URL, 주소 복사 하는 방법 !! 예제 코드보시고 알맞게 사용하시면 됩니다 :) 예제 코드 결과값 seill.tistory.com 공감수 0 댓글수 0 2023. 11. 7.
[jQuery] 숫자 count countup.js 같은 숫자 카운트 효과 순수 제이쿼리로 구현하기 $('.num').each(function () { var $this = $(this) var regex = /[^0-9]/g; var result = $this.text().replace(regex, ""); $({ countNum: 0 }).animate({ countNum: result }, { duration: 2000, easing: 'linear', step: function () { $this.text(Math.floor(this.countNum).toString() .replace(/\B(? 공감수 0 댓글수 0 2023. 11. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.