Atelier BiCute

#1 기능 설명 웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다. 간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다. #2 효과 확인하기 다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다. 공식 페이지 : https://animate.style/ #3 적용 및 사용 방법 Animate.css 연결하기 ※ NPM 방식과 CDN 방식을 지원합니다. 혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다. 다음 코드를 앞에 붙여 넣습니다. 사용 방법 기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니..

#1 기능 설명 페이지를 아래로 스크롤하면 임계값이 충족될 때(사용자 뷰포트의 하단) 각 애니메이션이 트리거 됩니다. data-av-animation 속성을 통해 사용하려는 것을 선언하기만 하면 됩니다. #2 적용 및 사용 방법 연결하기 html의 위쪽에 다음 내용을 입력해 줍니다. ※ 공식 페이지에서 파일을 다운로드할 수도 있습니다. 공식 페이지 : https://jjcosgrove.github.io/jquery-aniview/ 사용 방법 공식 페이지부터 Animate.css와 함께 사용하라고 안내하고 있습니다. $('.aniview').AniView(); 기본 작동은 '.aniview' 클래스를 가져와 실행한다는 것인데 다음과 같은 옵션 설정도 가능합니다. var options = { animateC..

#1 기능 설명 마우스 휠을 스크롤하면 해당 위치까지 부드럽게 애니메이션처럼 스크롤되는 효과. 전체 화면을 페이지 넘기듯 전환하는 방식으로 웹페이지에서 자주 사용되었던 지금은 유행이 살짝 지난 효과. #2 적용 및 사용방법 (샘플) 1. jQuery 연결하기 jQuery를 사용하므로 jQuery 연결은 필수. 참고: 제이쿼리(jQuery) 설치하는 방법 2. HTML 샘플 한국 서울 대전 대구 부산 서울 대전 대구 부산 bicute.net 전체적인 내용은 중요하지 않지만 이 글에선 16~19라인의 section을 전체 화면으로 스크롤되게 할 것이며, 모두 동일한 location이라는 클래스를 주었습니다. 위아래 주석처리가 되어있는 div는 일반적으로 이 부분을 따로 그룹을 지어주겠지만, 이 스크롤 기능을..

#1 기능 설명 일반적으로 내비게이션 등의 앵커 태그(a) 등을 이용하여 동일 페이지에서 위치를 이동하게 될 때, 해당 위치로 바로 이동해 버리지만 이 기능을 사용하게 되면 해당 위치로 이동할 때 화면을 스크롤하는듯한 애니메이션 효과를 주어 부드럽게 이동하게 됩니다. #2 적용 및 사용 방법 1. jQuery가 연결합니다. 참고: 제이쿼리(jQuery) 설치하는 방법 2. scrollTo.js를 HTML 문서에 연결합니다. { 다운로드 방식 } 다음 파일을 다운로드하여 HTML의 앞에 연결해 줍니다. { CDN 방식 } 3. 다음 코드를 위쪽에 삽입해 줍니다. 3번째 줄의 'nav a' 항목을 원하는 요소로 지정해 주면, 해당 링크가 걸린 곳으로 이동할 때 스크롤이 흐르듯이 이동하게 됩니다. 4번째 줄의..

#1 기능 설명 화면을 스크롤하게 되면 해당 시점에서 오브젝트들이 서서히 나타나는 효과를 라이브러리를 사용하여 매우 쉽고, 간편하게 다양한 방식으로 줄 수 있습니다. #2 적용 및 사용 방법 공식 페이지 : https://michalsnik.github.io/aos/ 위 페이지에서 각 속성별 효과를 확인해 볼 수 있습니다. AOS 연결하기 ※ 아래 내용은 CDN 방식으로 연결하는 내용이며 download 파일로 연결하고 싶다면 다음 파일을 받아서 이용하셔도 됩니다. CSS와 JS를 연결하기 위해 html의 위쪽에 다음 내용을 입력해 줍니다. AOS를 동작 시키기 위해 다음 내용을 html의 위쪽에 다음 내용을 삽입해 줍니다. 여기까지만 하면 준비과정은 모두 끝났습니다. 이제 원하는 대상에게 data-ao..

#1 제이쿼리(jQuery)란? jQuery는 웹사이트에서 자바스크립트를 쉽게 사용할 수 있게 도와주는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 높은 호환성과 다양한 기능, 수많은 제이쿼리를 기반으로 한 플러그인 등을 이용하여 편리하게 다양한 기능을 구현할 수 있는 것이 특징입니다. 이번 글은 제이쿼리와 제이쿼리를 이용한 다양한 플러그인을 사용하기 위해 반드시 필요한 사전 준비작업이기에 따로 게시물을 구분하여 작성합니다. #2 제이쿼리 라이브러리 연동(연결)하는 방법 제이쿼리는 특별한 프로그램이 아닌, html에 흔히 연결하여 사용하던 css와 js 같은 파일입니다. 그럼 이 제이쿼리 파일 연결은 어떻게 하는 것인가. (1) 제이쿼리를 다운하여 연동하는 방법 1. https://j..

#1 Google Material Icons 링크 : https://fonts.google.com/icons 사용 방법 방법 1. 원하는 아이콘을 검색하여 클릭하면 오른쪽의 사이드바를 통해 사이즈 색상 등을 선택한 후, 아래쪽의 버튼을 눌러 SVG 또는 PNG 파일로 다운로드하여 사용할 수 있습니다. 방법2. 다운로드하여 사용하는 게 귀찮다 생각되면 HTML에 다음 스타일 시트 한 줄을 추가하는 것으로 손쉽게 사용할 수 있습니다. 위 코드를 삽입하였다면 이제 원하는 장소에 다음과 같이 코드를 입력한 후, 해당 아이콘의 이름을 입력하면 됩니다. (아이콘 이름은 위 이미지의 빨간 화살표 부분입니다) 아이콘이름 get_app #2 Font Awesome 모든 아이콘을 사용하기 위해선 유료 결제(1년 $99)..