꾸생의 DevLog

페럴렉스 스크롤(Parallax scroll) 예제

Scroll을 활용한 페럴렉스 효과 예제 See the Pen wvWWqae by junheeleeme (@junheeleeme) on CodePen. $(window).scroll(function() { var Top = parseInt($(window).scrollTop()); //~~~ } 패럴렉스 스크롤(Parallax Scroll) 단순 의미로는 "시차"를 뜻하며 여기선 시차에 따라 모션을 다르게 적용하여 하여 역동적인 효과를 주는 것 1. 실시간 스크롤 값 구하기 // 실시간 스크롤 값 구하기 $(window).scroll(function(){ var Top = $(this).scrollTop(); }); 2. 객체의 상대적 Top, Left 구하기 // 1. 실시간 스크롤 값 구하기 $(wi..

2020.10.19  

[HTML/CSS] 부드럽게 스크롤 영역 이동하기

부드럽게 영역 이동하기 html, css를 활용해 해당 영역으로 부드럽게 이동하는 방법입니다. See the Pen NWrrpOB by junheeleeme (@junheeleeme) on CodePen. html{ scroll-behavior: smooth; } 태그 href 속성에 해당 요소의 id값을 넣어준다.

2020.10.19  

[HTML/CSS] CSS로만 만든 모달 레이어 팝업

CSS로만 만든 모달 레이어 팝업 See the Pen eYzZQyr by junheeleeme (@junheeleeme) on CodePen. 중요한 포인트 HTML : + CSS : transition + transition-delay

2020.10.18  

[Img Slider] Simple Image Slider & Slide Show

Simple Image Slider & Slide Show See the Pen GRqZvom by junheeleeme (@junheeleeme) on CodePen. 간단한 이미지 슬라이더 크롬 브라우저는 백그라운드에 오래 놔두었을 경우 setinterval 작업들이 쌓였다가 한 번에 실행되어 설정했던 시간보다 빠르게 이미지가 넘어감. clearQueue() 메서드를 사용해서 백그라운드에서 작업이 쌓이지 않도록 클리어 해준다.

2020.10.17  

[JQ/JS] 요소 삽입 메서드를 활용한 예제

요소 삽입 메서드를 활용한 연습 See the Pen xxOVZXV by junheeleeme (@junheeleeme) on CodePen. 이미지 슬라이드에 활용

2020.10.16  

자바스크립트 부드럽게 올라가는 스크롤 Top버튼

자바스크립트 Top버튼 See the Pen yLJOYKj by junheeleeme (@junheeleeme) on CodePen. scroll-behavior: 'smooth' 속성을 사용!

2020.10.16  

[HTML] <a> 태그 "href"속성 Javascript 명령어

태그 "href"속성 Javascript 명령어 뒤로가기 앞으로가기 새로고침 창닫기 전송(Submit)

2020.10.15  

자바스크립트 요소 삽입/이동 메서드

요소 삽입/이동 메서드 1. 해당 메서드의 위치 before prepend (내용) append after 2. 사용방법(메서드에 따라서 적용방향의 차이가 있음) $("A").before("B"); (대상) (입력내용) $("A").prepend("B"); (대상) (입력내용) $("A").append("B"); (대상) (입력내용) $("A").append("B"); (대상) (입력내용) $("B").insertBefore("A"); (입력내용) (대상) $("B").prependTo("A"); (입력내용) (대상) $("B").appendTo("A"); (입력내용) (대상) $("B").insertAfter("A"); (입력내용) (대상) [JQ/JS] 요소 삽입 메서드를 활용한 예제 요소 삽입 메서..

2020.10.15