Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Scroll’

Single-page scrolling websites are used widely for years and they are very useful on providing information quickly.

On the other hand, the one-page sites where no scroller exists and the page content being changed with JavaScript reached its max. popularity with the Apple’s iPhone 5S website.

jQuery One-Page Scroll

One Page Scroll, a jQuery plugin, simplifies creating such websites so easy.

It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go.

Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.

jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll.

The plugin is lightweight (<1kb) and works with almost no setup. Adding  a specific class to wrapper elements and calling a JS function i senough.

It also eases creating parallax effects with the onScroll callback where we can decide to animate any element.

jInvertScroll

Arbitrary.Anchor.js is a jQuery plugin that extends the standard anchor functionality (linking with #).

It enables us to target not only ids but any jQuery selector (like classes or element types).

Also, complex selectors can be used as well. (like http://example.com#.sup.brah – that needs to match both of the classes).

jQuery Arbitrary Anchors

The clicked links are automatically scrolled with a smooth scrolling effect.

And, this scrolling behavior’s speed can be customized by adding the ms value to the link (like http://example.com#.sup.brah|100).

  • Tags:
  • Filed under: Goodies, Other License
  • 0 Comments
  • Sticky menus are used widely as they help minimizing the need to scroll for reaching to the menu.

    Smint is a jQuery plugin that can turn any given element into a sticky menu instantly.

    jQuery Sticky Menu - Smint

    Also, the plugin has support for smooth scrolling (which is usually used in one-page websites).

    The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.

    Windows is a lightweight jQuery plugin for nicely scrolling the full-screen.

    It provides a simple and handy API for managing the page/content position to ease the browsing experience.

    The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.

    Windows - jQuery Plugin

    Scrolling a list of items, like an image gallery or a news feed, is a frequently-used pattern in websites.

    Any List Scroller is a very handy jQuery plugin that can perform the scrolling with any list and in any dimension.

    Any List Scroller jQuery Plugin

    The list elements can be sized differently, it can stop on the first/last items or work infinitely, there is auto-scroll and the number of items to be displayed can be set.

    It is also possible to define the scrolling direction (for auto-scroll) and its speed.

    Sly is a jQuery plugin that offers item-based (like image/content galleries) scrolling with many useful options.

    Within a defined container element, items inside can be browsed with the help of a scroller or with the functions provided like next, nextPage, toStart, toEnd, 5 toStart, etc.

    Sly jQuery Plugin

    It features different navigation logics which can auto-position next items or keep the active item always in the center.

    There is support for infinite scrolling and it work both horizontally or vertically.

    The plugin is very handy to be used as a pagination, content or image gallery module.

    You'll remember Scrollorama, the popular jQuery plugin for creating chic scrolling effects.

    There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

    It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

    SuperScrollorama

    Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

    The website of the resource shows its flexibility and there is a short-yet-enough documentation provided.

    LionBars is a jQuery plugin for creating OSX-style, custom scrollbars for any web page.

    The scrollbars created looks the same in all browsers under each OS and they don't hurt the usability by not shrinking the content or with the auto-hide option.

    It has support for endless scrolling (check related WRD tutorial) and can fire functions when the scrollbar reaches to the end.

    LionBars

    Scrollorama is a jQuery plugin for creating eye-candy effects in parallel to the scrolling of web pages.

    By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

    The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

    Scrollorama

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com