Hello 100A

요즘 심심찮게 자주 쓰이는 marquee 효과다. 아주 간단했고, 쉽게 사용할 수 있다. https://github.com/aamirafridi/jQuery.Marquee GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee jQuery plugin to scroll the text like the old traditional marquee - GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee github.com jquery 는 3.7.1 라이..

사이드바 모바일이나 반응형 웹에서 자주 사용하는 사이드바입니다. 사이드바는 css 만으로 동작이 되니 사이드바만 사용시에는 js파일이 없으셔도 됩니다. 아코디언메뉴는 jquery로 작업했으며 1.4.4로 작업했습니다. 사이드바 width는 70%이며 사이즈 변경시에는 .sidebar 에서 width와 left 값 둘다 변경하셔야합니다 html코드입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 css코드입니다. .content{height:100vh; background:#ccc; margin:0 auto; position:relative;} ..

jQuery로 만든 초간단 아코디언 메뉴입니다. 다운 버튼을 누르면 display:none 시켜놓은 대메뉴에 포함된 서브메뉴가 자연스럽게 슬라이드 다운되며 나옵니다. 내용도 간단하고 소스도 단순하니 긴 설명없이 소스 올려두겠습니다. HTML 소스 입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 CSS 소스입니다. body{ padding:50px; } .cate{ width:300px; position:relative; border-style:solid; border-width:1px 1px 0 1px; border-color:#000; } ..

이번에는 스크롤 바를 내렸을때 메뉴바의 스타일이 변하는 코드를 작성해 보았습니다. 아래의 그림과 같이 스크롤을 내렸을때 메뉴바의 높이, 로고의 크기 메뉴의 폰트크기가 부드럽게 변경됩니다. 아래는 CSS 코드입니다. 스크롤이 내려갔을때 .active 클래스를 addClass 해줍니다. 그렇기 때문에 변경되는 스타일은 .active를 포함하고 스타일을 지정해줍니다. body,html{ margin:0;padding:0; font-family:'Montserrat',sans-serif; } .container{ width:100%; height:1500px; background-image:url('bg.png'); } #header{ position:fixed; width:100%; box-sizing: bo..

가로, 세로가 100%인 페이지 슬라이드 입니다. html, body에 overflow:hidden을 해 스크롤이 없이 마우스 휠과 퀵버튼을 눌러 각 섹션으로 슬라이드가 됩니다. 페이지 마지막에 전체코드파일 첨부해두었습니다. 먼저 각 페이지들의 css입니다. body와 html에 꼭 height:100%를 하셔야 풀페이지로 됩니다. html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;font-family:sans-serif;} #fullpage {position:relative;top:0px;z-index:9;width:100%;height:100%;} .fullsection{width:100%;height:100%;posit..

버튼을 누르면 폼 위에 팝업 레이어가 올라옵니다. 바을 누르면 창이 닫힙니다. 따로 닫는 버튼을 만드시고 closelayer(); 함수를 호출하셔도 됩니다. /* CSS */ /* javascript jquery */ /* HTML */ 팝업레이어