본문 바로가기

Javascript

 (15)
스크롤 내리면 요소에 애니메이션 되는 플러그인 choreographer.js christinecha.github.io/choreographer-js/ Choreographer-js c h o r e o g r a p h e r - j s A simple library to take care of complex CSS animations. christinecha.github.io
스크롤 내리면 퍼포먼스 구현되는 플러그인 scrolltrigger.js terwanerik.github.io/ScrollTrigger/ ScrollTrigger - Let your page react to scroll changes Trigger classes based on scroll position The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the v terwanerik.github.io
WEB SITE Reference용 // 포폴 만들 때 아이디어 얻기 좋다 1빠따로 국내 웹사이트 참고용 www.dbcut.com/bbs/index.php 디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음 디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다. www.dbcut.com www.gdweb.co.kr/main/ 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr 해외 웹사이트 참고용 개인적으로 해외 웹사이트 보면 눈이 즐겁다. 싱기방기 www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends Awwwards are the Website Awards that recognize and promote the talent and effort o..
[웹페이지 로딩화면] fakeLoader.js 플러그인 사용법 url : https://github.com/joaopereirawd/fakeLoader.js $("#fakeLoader").fakeLoader(); 5. Options $("#fakeLoader").fakeLoader( { timeToHide:1200, //로딩중에 걸리는 시간, 1000 = 1초 zIndex:999, // 순서 spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' bgColor:"#2ecc71", //Hex, RGB or RGBA colors 배경색깔 imagePath:"yourPath/customizedImage.gif" // 원하는 이..
[초간단설명] Magnific Popup 팝업창 띄우기 1. 먼저 http://dimsemenov.com/plugins/magnific-popup/documentation.html 이 사이트에 들어갑니다. Project on GitHub 클릭 2. 초록버튼 클릭 - Download ZIP 클릭해서 압축파일을 다운로드 받아줍니다. 3. 다 다운받으셨으면 폴더를 열어보세요.이렇게 많은 파일들이 나옵니다. 그러면 dist 폴더를 클릭해주세요 이 두개 폴더를 ▼ 이렇게 경로에 맞게 넣습니다. 4. head 구역에 이렇게 소스를 넣어줍니다. 5. 스크립트 구역에도 이 소스를 넣어 줍니다 6. 이렇게 src안에다가 띄울 url을 넣어줍니다. 완성
[제이쿼리] 스크롤 내릴 시 라이브러리 aos.js 사용방법 https://michalsnik.github.io/aos/ 사이트 AOS 홈페이지에 들어가면 이런 메인페이지가 나온다.이 라이브러리는 스크롤로 인해 애니메이션이 동작하는 제이쿼리기반 라이브러리다 ! ! 사용방법은 저엉~~~~말 정말 간단하다. (저는 혹시몰라서 터미널창 띄워서 npm 설치도 했습니다..!) (이렇게 말이죵) 이렇게 다 추가하고 ! ! 원하는 애니메이션 소스를 긁어다가 태그 안에다가 넣어주면 작동한다. 끝 !
아코디언 리스트 부분 손쉬운 코딩 이렇게 구조 만드려면 ▲ html 코딩입니다. li안에 div 생성 가능. 그리고 기능을 넣어주려면 button 속성을 써야한다. 위치는 큰 타이틀 기준으로 position:relative를 하고 상하좌우 가운데 정렬을 하려면 position:absolute와 top:50%와 콘텐츠 내용물의 크기 기준으로 나누기 2하면됨 그게 -8임. 그리고 width (100/1000*100%); 는 100px을 전체 wrap=1000 나누고 * 100% 해주면된다.

티스토리툴바