jQuery Plugin For Responsive Single Line Scrolling - Scrollyea

Scrollyea is a jQuery plugin that allows you to scroll a group of html elements by mouse dragging in a responsive floating interface.

Features:

• Responsive and customizable
• Abilisty to disable scrolling if the container fit the browser's size
• Abilisty to center the interface if the container fit the browser's size
• Support of parallax effect

More examples:

• Default example
• Center-if-fit example
• Disable-if-fit example
• Parallax example

Basic Usage:

1. Load the latest jQuery javascript library and jQuery scrollyea plugin in your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scrollyeah.js"></script>

2. Include required jQuery Scrollyea stylesheet on your page

<link rel="stylesheet" href="scrollyeah.css"/>

3. Create a group of items you wan to scroll

<div class="scrollyeah">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>

4. Using the data-* attributes to control the scrolling

<div class="scrollyeah" data-centerIfFit="false">
  <!-- center if fit -->
</div>

<div class="scrollyeah" data-disableIfFit="true">
  <!-- disable if fit -->
</div>

<div class="scrollyeah">
  <div class="scrollyeah__parallax" data-parallaxRate="-.3">
    <!-- Any content in parallax -->
  </div>
  <!-- Your floats -->
</div>

---

This awesome jQuery plugin is developed by artpolikarpov. For more Advanced Usages, please check the demo page or visit the official website.