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

화면을 스크롤하면 텍스트가 우측으로 이동되며 이미지를 가로지르는 듯한 효과를 보여줍니다. 홈페이지, 첨부파일을 확인하시면 사용된 소스를 확인하실 수 있습니다. [html] 기본 html 소스에서 배경이미지와, 동일한 텍스트 2개를 만들어 줍니다. [style] position, overflow, z-index 스타일을 설정하여 지나가는 텍스트 > 이미지 > 이미지 안 텍스트 가 출력되도록 조정합니다. [script] 스크롤시 텍스트를 이동해주는 스크립트 소스입니다. 본 소스를 상단이 아닌 html 하단에 추가하셔야 작동됩니다. 소스를 참고하셔서 응용하여 다양하게 적용해보세요 ^^

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 WaltzerJS 파일을 링크합니다. 2. 슬라이드 시킬 내용들을 DIV 태그로 감싸서 추가합니다. 3. CSS 파일에 클래스를 추가하고 필요에 맞게 변경할 수 있습니다. 예) 4. WaltzerJS 플러그인을 호출합니다. 5. 옵션을 조절하거나 및 콜백 함수를 사용할 수 있습니다. 6. API 메소드 7. 이벤트 핸들러 - 작동 예제

모바일용 이미지 슬라이드 Custom scroll slider로 슬라이더바를 이용한 이동, 터치를 이용한 이동이 가능합니다. html, css, js를 이용하여 구성 및 이용이 가능하며, js내 옵션 변경을 통해서 간격 너비, 속도 제어등이 가능합니다. 또한 html 소스를 개수도 자유롭게 늘릴 수 있습니다.

* Revealing Hero Effect with CSS & JavaScript 페이지가 스크롤 될 때 섹션별로 컨텐츠를 표시합니다 첨부된 압축파일을 다운로드하여 웹루트 디렉터리에 압축 해제합니다 적용한 html 문서를 열고 문서 상단에 제공되는 css 를 호출하도록 합니다 그리고 섹션별로 아래와 같이 페이지 스크롤 영역안에 들어갈 각 컨텐츠를 삽입할 수 있습니다 섹션별로 컨텐츠를 삽입할 영역을 다정한후 body 태그 위에 기본제공되는 js 파일을 아래와 같이 호출하도록 합니다 적용후 브라우저로 호출할시 아래와 같이 스크롤될때 각 섹션영역을 구분하면서 스크롤링 됨을 확인할 수 있습니다

심플하게 화면을 스크롤할 때 여러가지 애니메이션 효과를 적용 할 수 있는 ScrollMe 입니다. Jquery Plugin 으로 구성 되어 있습니다. 이곳에 첨부된 파일을 다운로드 하셔서 이용을 하시거나 최신버전의 다운로드는 https://github.com/nckprsn/scrollme 페이지에서 할 수 있습니다. 다운로드 받은 파일의 압축을 풀어보시면 아래와 같이 js 파일을 확인이 가능 합니다. 해당 Plugin 의 사용 방법은 http://scrollme.nckprsn.com/ 페이지에서 확인이 가능 합니다. ​

* Revealing Hero Effect with CSS & JavaScript - javascript 로 만든 페이지 스크롤입니다 첨부된 압축파일을 다운로드 하여 원하시는 웹루트 디렉터리에 압축을 해제하여 업로드 합니다 html 구조는 아래와 같습니다 샘플파일에서 제공되는 css 파일을 호출합니다 페이지 스크롤할 영역을 아래와 같이 설정합니다 html 문서 하단에 샘플파일에서 제공되는 js 파일을 호출합니다 비교적 간단한 구성이기때문에 디자이너께서 활용하시기 괜찮을것 같습니다

* Infinitely Scrollable Vertical Menu - 무한스크롤이 가능한 메뉴플러그인 입니다 * License - MIT License 스크롤 메뉴 웹페이지를 구성하는 html, js 샘플 구조는 아래와 같습니다 menu__item 으로 선언된 class 를 js.00a46daa.js 파일에서 컨트롤 하게끔 되어있습니다 위의 코드를 실행한 웹페이지 결과는 아래와 같습니다 디자인에 대한 세부조정은 첨부된 base.98fd6c19.css 파일에서 조정이 가능합니다 디자인 능력이 있으신 작업자분께서 활용하시면 괜찮으시리라 생각됩니다

페이지 섹션 사이를 전환하면서 표시기가 휠 라운드의 원 안에 이동하는 휠 슬라이더가 있는 독창적 인 한 페이지 스크롤 웹 사이트 를 만드는 jQuery / CSS 솔루션 입니다. 최신 Bootstrap 프레임 워크와 호환되며 Bootstrap의 scrollspy 구성 요소가 필요합니다. ​ ​원 페이지용 웹사이트를 제작할 때 사용하면 괜찮을 듯 합니다. 다운로드 받은 파일의 압축을 해제하고, slider-wheel.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 마우스 휠이나, 키보드 방향키를 이용해서 웹페이지의 스크롤을 위,아래로 조절을 하면 웹페이지의 배경이 스크롤에 따라서 변경이 됩니다. 중앙에 동그란 부분에 표시되는 컨텐츠가, 스크롤의 위치에 해당하는 컨텐츠로 교체가 됩니다. 동그란..

태블릿 및 모바일 장치에서 스와이프 이벤트를 이용해서 스크롤 할수 있는 jquery 스위퍼 플러그인입니다. ​ ​다운로드 받은 압축파일을 해제해서 examples/index.html examples/carousel-css3.html 두개의 파일을 웹브라우저로 열어보면 확인이 가능합니다. ​ 모바일이나 태블릿에서 스와이프 이벤트를 이용해서 컨텐츠를 상,하,좌,우 스크롤링 할때 적당합니다. 이런 화면을 제작하는 방법이 일단 많은 컨텐츠를 먼저 만들어야 해서, 조금은 까다로운 편인거 같네요. 특이사항으로는 swipescroll 을 생성할 때 지정할 수 있는 몇가지 옵션이 있습니다. 그 외에는 스와이프 이벤트중과, 이벤트의 헨들러가 있네요 태블릿이나, 모바일 기기에서 많은 컨텐츠를 표시해야 할 때 유용해 보입니..

마우스 스크롤을 하단으로 이동할때마다 내용이 출력되는 애니메이션 JQuery ScrollTrigger 입니다. CSS3를 활용한 애니메이션으로 다양한 프레임에서도 적용이 가능합니다. 이미지 출력 및 원페이지형 홈페이지 제작에도 유용합니다. 가로모드도 지원하며, 그 외 다양한 옵션을 제공하여 편리성이 높습니다.