반응형

우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?

1.마우스의 휠 버튼을 사용하는 경우
2.키보드의 커서키를 사용하는 방법
3.스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법


이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?

# 스크롤의 이동을 막는 것이 필요한 경우
언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서 빠른 스크롤 이동에 의하여 의도한 콘텐츠를 다 못보여주는 경우도 생각해볼 수 있습니다. 이런 경우는 예를 들면... 페이지 스크롤에 따라 화면이 동적으로 변하는 웹사이트의 경우가 이에 해당합니다. 동적으로 변하는 웹사이트를 보여주기 위해 사용자의 스크롤 이동을 강제하는 것이 필요할 수 있습니다.

또 다른 이유로 스크롤이 화면에 고정되야 하는 경우입니다. 햄버거 버튼을 누른 뒤거나 아니면 모달 형식의 팝업창을 띄운 경우가 좋은 예 입니다.



# 스크롤을 고정하는 방법 예제 소스보기
아래의 소스 코드를 봐주세요. 이코드는 스크립트와 CSS를 사용하여 사용자의 페이지 이동을 강제적으로 막고 있습니다. 우선 스크롤이 생기지 않게 하기 위하여 html과 body 태그에 overflow 속성을 사용하였고 그 값으로 hidden을 주었습니다.

또한 해당하는 요소의 브라우저 기본 이벤트를 피하기 위해 아래의 이벤트 함수를 사용합니다. preventDefault()는 이벤트 내장함수의 실행을 막아 의도한 동작만을 방문자에게 보여줍니다. 또한 발생 가능한 아벤트 버블링을 피하기 위해 stopPropagation()을 추가하였습니다. 해당 자바스크립트는 아래와 같이 사용합니다.
event.preventDefault();
event.stopPropagation();

아래 코드를 직접 실행해 보면서 익혀보시기 바랍니다. 코드는 제이쿼리(jQuery)를 사용하여 만든 예제소스입니다.
$('html, body').css({'overflow': 'hidden', 'height': '100%'});
$('#element').on('scroll touchmove mousewheel', function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
});

위 코드는 스크롤과 터치이동, 마우스휠의 이벤트 발생시 동작하지 않도록 제거합니다. 각각 scrolll, touchmove, mousewheel 이벤트 코드가 추가되어 있습니다.


# 스크롤 이동을 다시 허용하기
만약 다시 스크롤을 허용해야한다면? 이 경우 기존의 마우스 스크롤이벤트의 핸들러를 제거해야하므로 해제방법이 필요할 것입니다. 이때는 등록된 이벤트를 해제하여 주는 off() 메소드를 사용하여 가능합니다. 아래 코드의 예제를 봐주세요.
$('#element').off('scroll touchmove mousewheel');

여기까지 스크롤의 사용자 화면전환을 강제로 막는 방법을 알아보았습니다.



http://relation.co.kr/images_board/board_system_publishing/211/index.php/

반응형
반응형
basicScroll은 패럴랙스 웹사이트 제작을 도와주는 라이브러리입니다. CSS 변수를 지원하고 있어 자바스크립트와 결합하면 원하는 애니메이션 효과를 쉽게 구현할 수 있습니다. 또한 반응형 웹사이트에도 최적화되어 있습니다.

#Developer #개발자 #JavaScript #자바스크립트 #Library #라이브러리 #Parallax #패럴랙스

https://github.com/electerious/basicScroll

...
반응형
반응형

[javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. 


페이스북에서도 영상 플레이하면 스크롤 되었을때 좌측 상단에 레이어로 따라오더라. 

JTBC 뉴스 페이지에서 그렇게 나오길래 보니 jwPlayer를 사용하고 있다. 




jQuery로 적용되어있다. document.ready 에서 window.on('scroll',fun~~~  로 스크롤시 고정 플레이어의 위치를 확인해서 플레이어의 top을 벗어나면 플레이어 사이즈를 변경하고 우측 하단에 bottom 100px, right 50px 주고 fixed 하는 것으로 되어있네. 멋짐. ㅎㅎ 


영상을 보면서 들으면 지문을 읽을 수 있어서 좋다. 








...

반응형
반응형

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.

forcejs

 

 

.

반응형
반응형

scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop


스크롤시 사라졌다가 스크롤 끝나면 다시 나오는 스크립트


https://gist.github.com/RubaXa/5569075


 jquery.event.scroll.js



-- Page 배너 삽입, 모바일 하단에 위치고정


<div id="bottomrollbanner" style="position:fixed; bottom:0; height:49px; width:100%;background-color:bisque;">

                          배너 위치

</div>




<script type="text/javascript">
<!--


$(window).bind('scrollstart scrollend', function (evt){
    if( evt.type == 'scrollstart' ){
        // logic
        console.log("scroll Start");
        jQuery("#bottomrollbanner").fadeOut("fast");
    }
    if( evt.type == 'scrollend' ){
        // logic
        console.log("scroll End");
    jQuery("#bottomrollbanner").fadeIn("slow");
    }
});


var currentScrollTop, temporalScroll = 0;

$(window).scroll(function(){


    currentScrollTop = $(this).scrollTop();
    console.log('Previous value: ' + temporalScroll);
    if (currentScrollTop > temporalScroll) {
        console.log('scroll down - Current value: ' + currentScrollTop);
    }
    else {
        console.log('scroll up - Current value: ' + currentScrollTop);
    }
    temporalScroll = currentScrollTop;



});


//-->

</script>






반응형
반응형

 

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.

scroll

반응형
반응형

WOW.js: Reveal animations as you scroll

wow..js

Homepage: http://mynameismatthieu.com/WOW/
GitHub: https://github.com/matthieua/WOW
Docs: http://mynameismatthieu.com/WOW/docs.html

 

WOW.js Build Status

Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

  • Smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs)
  • Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
  • Fast execution and lightweight code: the browser will like it ;-)
  • You can change the settings - see below

LIVE DEMO ➫

 

 

반응형
반응형

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.

jQuery Plugin for Animating Scroll

Demo Download

Echo.js: Simple JavaScript Image Lazy Loading

Echo.js is a simple image lazy loading library, it’s less than 1KB minified. Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute.

Echo.js: Simple JavaScript Image Lazy Loading

Demo Download

Multi-Level Push Menu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

Multi-Level Push Menu

Demo Download

jQuery Flat Shadow: Create Long Shadows Flat UI

Long shadow effects are widely used to create a depth for any element in flat design. jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted.

jQuery Flat Shadow - Create Long Shadows Flat UI

Demo Download

tidyTime.js: Display More Friendly Time with jQuery

tidyTime.js takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6″ and more. By adding additional text before and after the time you are able to create powerful friendly interaction with users.

tidyTime.js: Display More Friendly Time with jQuery

Demo Download

Taggd: jQuery Plugin to Tag Images

Taggd is a jQuery plugin that help you create tags on images with, or without a popup!

Taggd: jQuery Plugin to Tag Images

Demo Download

UIKIT: Lightwight Front-end Framework

UIkit is a front-end framework, built by YOOtheme, for creating cross-browser and responsive layouts faster.
It is lightweight, has a modular structure and uses LESS for styles + jQuery for the JavaScript.

UIKIT: Lightwight Front-end Framework

Demo Download

slimMenu: Multi-Level Responsive Menu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. It converts an unordered list with any depth into a menu with sub-menus and, for smaller screens, the menu becomes a drill-down navigation. It is touch-friendly and has several options for customization like the animation or its speed.

slimMenu: Multi-Level Responsive Menu

Demo Download

Tabulous.js: Create Tabs with Effects

Tabulous.js is a lightweight jQuery plugin that simplifies creating them with a plain HTML structure. The tabs created can be styled with CSS and multiple switching effects exist (slide, scale, scale up and flip).

Tabulous.js: Create Tabs with Effects

Demo Download

Owl Carousel: Touch-Enabled and Responsive Carousels jQuery Plugin

Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup.

Owl Carousel: Touch-Enabled and Responsive Carousels jQuery Plugin

Demo Download

Summernote: WYSIWYG Editor on Bootstrap

Summernote is a super simple WYSIWYG editor on Bootstrap. It’s open source and easy to install. Lightweight (Summernote: 30Kb), Smart User Interaction, Customize by Initializing options, Safari, Chrome, Firefox, Opera ,Internet Explorer 9+ (IE8 support coming soon)

Summernote: WYSIWYG Editor on Bootstrap

Demo Download

flipLightBox: Responsive Lightbox jQuery Plugin

flipLightBox is a responsive Lightbox that is extremely easy to implement and doesn’t require additional stylesheets, scripts or libraries.The coolest feature of flipLightBox is that it has optional flip effect as each lightbox image opens and closes.

flipLightBox: Responsive Lightbox jQuery Plugin

Demo Download

jquery.arbitrary-anchor.js: Smooth Scrolling For Any Element On Page With jQuery

With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

Smooth Scrolling For Any Element On Page With jQuery

Demo Download

Minified.js: Lightweight JavaScript Library

Minified.js is a very strong alternative to these frameworks and it comes with an impressive size, less than 4kb minified. Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.

Minified.js: Lightweight JavaScript Library

Demo Download

RTP.Slider.js: Touch Enable and Responsive Slider Plugin

RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.

RTP.Slider.js: Touch Enable and Responsive Slider Plugin

Demo Download

Tabby: Lightweight and Mobile First Toggle Tabs

Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It’s style-light so you can easily modify it to fit your design.

Tabby: Lightweight and Mobile First Toggle Tabs

Demo Download

Sticky-Kit: jQuery plugin for Making Smart Sticky Elements

Sticky-Kit is a very handy jQuery plugin that simplifies creating/managing such sticky elements and comes with features for complex use.

Sticky-Kit: jQuery plugin for Making Smart Sticky Elements

Demo Download

S Gallery: Responsive jQuery Gallery Plugin with CSS3 Animations

S Gallery makes use of HTML5′s FullScreen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.

Responsive jQuery Gallery Plugin with CSS3 Animations

Demo Download

On Scroll Effect Layout: Beautiful Scroll Effects

An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section.

There is an example effect defined and also some media queries for dealing with smaller screens.

On Scroll Effect Layout: Beautiful Scroll Effects

Demo Download

반응형

+ Recent posts