낮햇볕

body css /* content만 주면 위아래 공간이 생겨서 body와 html에 margin0주기 */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; } /* 배경색주기 */ .content{ width: 100%; height: 1000px; background-color: aliceblue; } .progressbar{ position: fixed; height: 10px; top:6px; right:0; width: 100%; /* 맨앞으로 */ z-index: 500; } .progressbar > .progress{ background-color:yellowgreen; width: 0%;/* 프로그래스바 진행정도 */ hei..

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com greem sock라는 사이트에 들어가서 다운을 받아 주지 않고 cnd를 사용해주었다 밑의 화면은 Dos 클릭해서 Installation을 클릭하면 밑의 사진이나온다 이것도 마찬가지로 jquery 아래에 입력해준다 ScrollTrigger를 사용하기위해 product 에 ScrollTrigger를 클릭해 내려가보면 아래 화면이 나오는데 EXAMPLES 를 클릭해주면된다 아래의 다양한 ScrollTrigger들이 나온다 Cover Layered Secti..

Magnific Popup https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup Documentation The complete guide on how to use Magnific Popup - the open source responsive lightbox plugin. dimsemenov.com Zoom-gallery사용 홈페이지에서 document를 클릭해서 밑의 including files아래의 태그를 head 태그 안에 넣는다 여기서 해당 css나 js 폴더안에 위의 화면처럼 넣어줘서 그 링크에 맞게 경로를 변경해줘야한다 이위에 반드시 jqeury 를 넣어줘야한다 나는 css폴더와 js폴더를 만들어줬으니 그안에 넣어야되어서 작성해주었다 저..

slick에 docts를 해주면 저렇게 button 123 들이 나오는데 그것을 변경시켜보겠다 그리고 Previous 랑 Next도 바꿔볼려고한다 또한 안쪽그림도 바꾸려고한다 먼저 그림부터 삽입해보겠다 body태그안에 그림을 넣을수있게 div태그를 넣었다 그다음 각각 classname을 css에 넣어준다 .view{ padding: 0; /*최소높이*/ min-height:332px; position: relative; } .view:after{ content: ""; width: 45%;/*173px*/ height: 99%; position: absolute; left: 30%; top: 39px; background: url(./img/item.jpg) 0 0 no-repeat; -webkit-ba..

사용자정의 이펙트 animate 사용자가 직접원하는 이펙트 효과정의 중간대문자 방식으로만 속성명 사용 ex) backgroundColor (0) background-color (X) ainmate //사용자애니메이션 $("#animate").on("click",function () { $("#div_box2").animate({ //css속성과 값(끝날때) opacity : 0, //1다보임 0안보임 width :0, //너비 줄어듬 height :0 //높이 줄어듬 },1000, //진행되는 밀리초 function() { //애니메이션이 끝났을때 실행되는 함수 $("#animate").text("이벤트가끝났음")//버튼이름바꾸기 }); });

이펙트 효과의 제어 delay 이벤트효과 지연 딜레이 걸리는 위치 시간지연시키고 싶은위치 만약사라지고 싶다면 사라지고 싶은 위치 앞쪽 페이드아웃 //fadeOut $("#fadeout").on("click", function () { $("#fade_p").delay(1000).fadeOut(); //delay는 페이드아웃하기 전 1초기다렸다 실행 }); stop 실행중인 모든 이펙트효과 중지시킨다 finish 실행중인 모든 이펙트효과 중지시킨다 중간과정없이 바로끝낸다 toggle이펙트 효과 버튼입니다 stop finish //slidetoggle $("#slidetoggle").on( "click", function () { $("#div_box").slideToggle(4000); }); //stop..

슬라이드 효과 css height 속성값 빠르게 변경하여 표현 .slideUp 선택한요소가 서서히올라가면서 사라진다 .slideDown 선택한요소가 서서히내려가면서 보인다 .slideToggle sildeup 과 slidedown 반복해서 동작한다 밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능 ex) .slideUp(4000) .slideDown("slow") slideToggle("fast") 슬라이드다운 보이기 슬라이드업 숨기기 슬라이드 토글입니다 슬라이드다운 업입니다 슬라이드토글입니다

페이드효과 해당요소의 CSSopacity 속성값 빠르게 변경하여 표현 .fadeIn() 선택한 opacity 속성을 높여가며 요소를 나타나게한다 .fadeOut() 선택한 opacity 속성을 높여가며 요소를 사라지게한다 .fadeToggle() fadeIn과 fadeOut번갈아가며 적용한다 밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능 ex) .fadeIn(4000) .fadeOut("slow") .fadeToggle("fast") 페이드 페이드아웃 페이드토글 페이드인아웃입니다 페이드토글입니다

이펙트효과 기본설정으로 바로 사용할수있다 effect 요소의 표시와 숨김 .hide() 이벤트시 숨긴다 .show() 이벤트시 보이게한다 .toggle() 이벤트시 숨기고 보이게 할수있다 인수로 밀리초 해당숫자나 "slow" , "fast" 전달하여 이펙트효과 속도조절가능 ex) .show(4000) .toggle("slow") show("fast") jQuery head안에 넣어야한다 보이기 숨기기 글자가 보이고 숨겨집니다 토글 이 요소는 div안의 p요소입니다div입니다

jquery사용위해 head태그안 작성해줘야한다 jQuery 3.x jQuery Core 3.6.0 -minified 사용하였다 https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 제이쿼리 1.7이..