웹솔루션개발 25년 노하우! 해피CGI의 모든것

https://indigounited.github.io/jquery.simplemarquee/test/demo.html 위의 데모 링크에 접근하셔서 한번 보시는게 이해가 가장 빠릅니다. 글자를 위로 아래로 왼쪽으로 오른쪽으로 스크롤 되게 할 수 있습니다. 사용법은 간단합니다. 두 js 를 선언하고 위와 같이 오른쪽으로 스크롤 하고 싶다면, 오른쪽으로 옵션을 주면 됩니다. 그 외에 옵션들은 참고하세요.

화면 스크롤을 할 때 콘텐츠가 애니메이션 효과를 통해 노출이 되도록 구현 할 수 있는 WOWjs 스크립트입니다. 소스의 사용법 및 다운로드는 아래 페이지에서 확인을 할 수 있습니다. https://github.com/graingert/wow https://wowjs.uk/docs.html

스크롤시 스크롤 모션효과를 확인할 수 있는자료입니다. 압축파일내에 HTML, Css로 작동하시는 것을 확인할 수 있습니다. 자료원본 출처는 아래의 링크에서 확인하실 수 있습니다. 그누보드 - 스크롤다운시 모션효과 > 퍼블리셔팁 (sir.kr)

가로로 타임라인을 표현이 가능한 Horizontal Timeline 입니다. https://codyhouse.co/gem/horizontal-timeline/ 페이지로 접속시 데모확인 및 소스 다운로드가 가능 합니다. 데모 페이지 주소는 https://codyhouse.co/demo/horizontal-timeline/index.html 입니다.

브라우저 스크롤링시 다양한 액션을 제공하는 ScrollMagic 입니다. http://scrollmagic.io/ javascript 소스는 CDN으로 연결하시거나 직접 다운로드 하여 이용도 가능 합니다. https://scrollmagic.io/examples/ 데모 페이지로 접속하여 제공되는 다양한 데모를 확인이 가능하고, 데모페이지에 적용된 소스도 쉽게 볼 수 있습니다.

화면 스크롤에 따라 이미지가 움직이는 효과 자바스크립트 화면 스크롤에 따라 이미지가 움직이며, 밋밋한 소개페이지에 적용하면 좋을것 같네요.

* Horizontal Smooth Scroll Layouts - 부드러운 수평 스크롤 레이아웃을 제공합니다 * License - MIT License * 이용방법 첨부된 압축파일을 원하는 웹루트 디렉터리에 업로드후 압축을 해제합니다 적용할 html 파일에 css , js 를 로드합니다 아래와 같이 가로로 스크롤될 영역에 대한 html 코드를 추가합니다 웹페이지를 호출하면 아래와 같은 형태로 실행되어 마우스 휠스크롤시 가로로 스크롤됨을 확인할 수 있습니다

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 top-progress-bar.min.js 파일을 링크합니다. 2. topProgressBar 플러그인을 호출합니다. 3. bgColor 옵션을 이용하여 진행 표시 줄의 색상을 설정할 수 있습니다. 4. height 옵션을 이용하여 진행 표시 줄의 굵기를 설정할 수 있습니다. - 작동 예제

다양한 형태의 좌우, 상하 커스컴 스크롤입니다. 제이쿼리를 이용한 소스이며 익스10 이상, 크롬 브라우저에서 작동합니다. 사이트에서 데모확인과 관련 소스를 다운로드 받으실수 있습니다. html 파일에서 css js 파일을 링크하고 스크립트 함수호출과 레이아웃에 클래스명을 줘서 사용합니다. 사이트에 기본설정법과 소스에대한 설명이 자세하게 나와있습니다.

* ANY LIST SCROLLER(ALS) - 모든 내용을 포함하여 스크롤하는 jquery 플러그인 입니다 * License - MIT License * 기능소개 - 사용하기 쉬움 - 모든 종류의 목록에서 작동 - 목록 요소는 텍스트, 이미지, 기타항목 가능 - 목록 항목의 크기는 고정되어 있거나 서로 동일 - 가로 또는 세로로 스크롤 가능 - 스크롤링은 단순하거나 무한 가능 - 표시 할 항목 수 를 설정할 수 있음 - 터치장치에 대한 "스와이프" 지원 * 사용방법 - 첨부된 압축파일을 다운받아 웹서버에 압축을 풀고 index.html 을 웹브라우저로 실행하면 아래와 같은 샘플을 테스트 할 수 있음 코드를 살펴보면 기본제공되는 css와 js 파일을 문서에서 불러오고 스크롤 출력할 영역에 대한 스크립트 ..