본문 바로가기

scroll

basicScroll은 패럴랙스 웹사이트 제작을 도와주는 라이브러리 basicScroll은 패럴랙스 웹사이트 제작을 도와주는 라이브러리입니다. CSS 변수를 지원하고 있어 자바스크립트와 결합하면 원하는 애니메이션 효과를 쉽게 구현할 수 있습니다. 또한 반응형 웹사이트에도 최적화되어 있습니다. #Developer #개발자 #JavaScript #자바스크립트 #Library #라이브러리 #Parallax #패럴랙스 https://github.com/electerious/basicScroll ... 더보기
[javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. [javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. 페이스북에서도 영상 플레이하면 스크롤 되었을때 좌측 상단에 레이어로 따라오더라. JTBC 뉴스 페이지에서 그렇게 나오길래 보니 jwPlayer를 사용하고 있다. jQuery로 적용되어있다. document.ready 에서 window.on('scroll',fun~~~ 로 스크롤시 고정 플레이어의 위치를 확인해서 플레이어의 top을 벗어나면 플레이어 사이즈를 변경하고 우측 하단에 bottom 100px, right 50px 주고 fixed 하는 것으로 되어있네. 멋짐. ㅎㅎ 영상을 보면서 들으면 지문을 읽을 수 있어서 좋다. ... 더보기
[JAVASCRIPT] Force.js: Scroll and animate your page Force.js: Scroll and animate your page Force.js is the easy way to scroll and animate your page. It uses CSS-Transitions to animate by default (and falls back to JavaScript if they’re not supported) and offers a variety of easing functions. Homepage: http://www.gravmatt.com/force-js/ GitHub: https://github.com/gravmatt/force-js . 더보기
[jQuery] scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop 스크롤시 사라졌다가 스크롤 끝나면 다시 나오는 스크립트 https://gist.github.com/RubaXa/5569075 jquery.event.scroll.js -- Page 배너 삽입, 모바일 하단에 위치고정 배너 위치 더보기
[jQuery] scrollToBySpeed: Scroll windows by speed instead of duration scrollToBySpeed: Scroll windows by speed instead of duration scrollToBySpeed is a jQuery plugin that lets your users scroll by speed rather than duration, giving a more consistent user experience. Regardless of how far down the page something is, when a user clicks a navigation button that triggers a scroll, the speed will be consistent. Homepage: http://ryanburnette.github.io/scrollToBySpeed/ G.. 더보기
[javascript] WOW.js: Reveal animations as you scroll WOW.js: Reveal animations as you scroll WOW.js makes it easy to call CSS animations as your user scrolls down the page. It does not require jQuery, is only 3kb, and is easy to use. Homepage: http://mynameismatthieu.com/WOW/ GitHub: https://github.com/matthieua/WOW Docs: http://mynameismatthieu.com/WOW/docs.html WOW.js Reveal CSS animation as you scroll down a page. By default, you should use it .. 더보기
[jQuery] 20 Fresh jQuery Plugins 20 Fresh jQuery Plugins AnimatedScroll: jQuery Plugin for Animating Scroll AnimateScroll is a beautiful jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to. Demo Download Echo.js: Simple JavaScript Image Lazy Loading Echo.js is a simple image lazy loading librar.. 더보기
[jQuery] Sticky-kit: A sticky element jQuery plugin Sticky-kit: A sticky element jQuery plugin 컨텐츠 영역에 빈 공간이 있고, 풋터가 멀리 있을 경우, 긴 컨텐츠 영역이 끝날때까지 짦은 컨텐츠 영역이 따라서 스크롤 된다. Sticky-kit is an easy way to attach elements to the page so they remain visible when your user scrolls. It works with multiple items, and stickies “bottom out” so they’ll never obscure your footer. Homepage: http://leafo.net/sticky-kit/ GitHub: https://github.com/leafo/sticky-kit Sti.. 더보기