스크롤 방향에 따른 네비게이션 보이기, 감추기

HTML Logo 글로벌 네비게이션 menu1 menu2 menu3 menu4 menu5 CSS /* header */ header{position:fixed; left: 0; top: 0; width: 100%; z-index:99; background:none; transition:top .3s, background .3s;} header::after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:linear-gradient(90deg, rgba(0,198,255,1) 55%, rgba(8,228,168,1) 100%); opacity: 0; transi..

2022.06.02

스크롤시 엘리먼트에 애니메이션 추가하기

HTML 스크롤 시 애니메이션 추가 CSS @keyframes animation-active { 0%{opacity: 0; position:relative; top:50px;} 100%{opacity: 1; position:relative; top:0;} } .animation{opacity: 0;} .animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;} JS $( function(){ const Elements = $('.animation'); function scrollSize(){ const scrollTop = $(document).scrollTop(); // 스크롤TOP 값 const windowH =..

2022.05.20

인터렉티브 웹 4 - z축 원근감

box1 ~ box5는 실제로는 크기가 같지만, z축을 이용해 원근감을 준다. HTML Home Info About Community Contact Player 1 Player 2 Player 3 Player 4 Player 5 Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips..

2022.03.16

영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11

jQuery scroll 스크롤 끝을 확인하는 방법

브라우저 창 끝 이벤트 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert('End of Window'); } }); DIV 끝 이벤트 $("#inside").scroll( function() { var elem = $("#inside"); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert("End of Yellow"); } });

2021.12.21

jQuery Plug-in scroll waypoint

jQuery Plug-in scroll waypoint 스크롤에 반응하는 애니메이션 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit velit sit amet tristique tincidunt. Fusce dapibus tortor ut est ornare porttitor. Aliquam auctor bibendum posuere. Fusce laoreet tincidunt lacinia. Aliquam posuere pharetra auctor. Pellentesque et eleifend nibh, a bibendum lacus. Pellentesque sit amet dignissim mauris. Suspendiss..

2021.12.20