Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

First commit

  • Loading branch information...
commit 6fc53ded0149e1e59a8ab7e4da0d8430e1dd54dc 0 parents
@lorenzos authored
158 Demo.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <title>Panner demo page</title>
+
+ <!-- Include Mootools and Panner -->
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
+ <script type="text/javascript" src="Source/Panner.js"></script>
+
+ <script type="text/javascript">
+
+ window.addEvent('domready', function() {
+
+ // First basic example
+ $('content').panner();
+
+ // Large image example
+ $('photo').panner({ center: true });
+
+ });
+
+ </script>
+
+ <style type="text/css">
+
+ /* These rules are not necessary to make Panner work.
+ * They are here only to style this demo page. */
+
+ body {
+ font-family: sans-serif;
+ font-size: 13px;
+ }
+
+ div {
+ margin: 20px 10px;
+ }
+
+ div.example {
+ background-color: #999999;
+ border: 1px solid #666666;
+ margin: 10px 40px;
+ padding: 1px;
+ }
+
+ div.example>div {
+ margin: 0;
+ padding: 0;
+ background-color: #333333;
+ }
+
+ div.example>div>.bit {
+ float: left;
+ font-size: 14px;
+ height: 160px;
+ width: 160px;
+ line-height: 23px;
+ margin: 10px 0 0 10px;
+ color: #dddddd;
+ text-shadow: 1px 1px 0 #000000;
+ }
+
+ div.example>div>.bit>img {
+ box-shadow: 4px 4px 0 #222222;
+ }
+
+ p {
+ color: #666666;
+ margin: 20px 10px;
+ clear: both;
+ }
+
+ p b {
+ color: #333333;
+ }
+
+ a {
+ font-weight: bold;
+ color: #3344FF;
+ }
+
+ a:hover {
+ font-weight: bold;
+ color: #6677FF;
+ }
+
+ pre {
+ font-size: 12px;
+ padding: 10px 15px;
+ background-color: #eeffef;
+ border: 1px solid #cceedf;
+ margin: 10px 40px;
+ }
+
+ pre.javascript {
+ background-color: #eeefff;
+ border: 1px solid #ccdfee;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <div><h1>Panner demo page</h1></div>
+
+ <p>
+ <b>Content panning</b> based mouse movement, a cool way to replace
+ <b>scrolling</b> for large images or full pages.<br>
+ Requires Mootools Core 1.4.1 or later.<br>
+ Download and HowTo on <a href="http://mootools.net/forge/p/panner">Mootools Forge</a>, sources and issues on
+ <a href="https://github.com/lorenzos/Panner">GitHub</a>, full documentation
+ <a href="https://github.com/lorenzos/Panner#docs">here</a>.
+ </p>
+
+ <p><b>Basic example</b>, large content panning <i>(note that content is bigger than its container!)</i>:</p>
+
+ <div class="example" style="width: 600px; height: 200px;">
+ <div id="content" style="width: 1200px; height: 520px;">
+ <div class="bit" style="width: 330px; font-family: serif; line-height: 31px; font-size: 22px;">Arduino is an open-source single-board microcontroller designed to make the process of using electronics in multidisciplinary projects more accessible. </div>
+ <div class="bit"><img src="Graphics/Examples/arduino_small.jpg"></div>
+ <div style="width: 320px; padding-left: 10px;" class="bit">Arduino hardware is programmed using a Wiring-based language (syntax and libraries), similar to C++ with some slight simplifications and modifications, and a Processing-based integrated development environment.</div>
+ <div class="bit" style="width: 330px;"><img src="Graphics/Examples/arduino_connected.jpg"></div>
+ <div class="bit" style="height: 330px; width: 330px;"><img src="Graphics/Examples/arduino_macro.jpg"></div>
+ <div style="width: 310px; padding-left: 10px; padding-right: 10px;" class="bit"> The hardware consists of a simple open hardware design for the Arduino board with an Atmel AVR processor and on-board input/output support. The software consists of a standard programming language compiler and the boot loader that runs on the board.</div>
+ <div class="bit" style="width: 500px; font-family: serif; font-size: 32px; line-height: 39px;">The Arduino project received an honorary mention in the Digital Communities category at the 2006 Prix Ars Electronica.</div>
+ <div style="width: 480px; padding-left: 10px; padding-right: 10px;" class="bit">The Arduino hardware reference designs are distributed under a Creative Commons Attribution Share-Alike 2.5 license and are available on the Arduino Web site. Layout and production files for some versions of the Arduino hardware are also available. The source code for the IDE and the on-board library are available and released under the GPLv2 license.</div>
+ <div class="bit" style="width: 330px;">Arduino and Arduino-compatible boards make use of shields, which are printed circuit boards that sit atop an Arduino, and plug into the normally supplied pin-headers. These are expansions to the base Arduino. There are many functions of shields, from motor controls, to breadboarding (prototyping).</div>
+ </div>
+ </div>
+
+ <pre class="html">&lt;div style=&quot;width: 600px; height: 200px;&quot;&gt;
+ &lt;div id=&quot;content&quot; style=&quot;width: 1200px; height: 600px;&quot;&gt;
+ [...]
+ &lt;/div&gt;
+&lt;/div&gt;</pre>
+ <pre class="javascript">$('content').panner();</pre>
+
+ <p><b>Large image</b> example (the <i>center</i> option is used to place the image in the center initially):</p>
+
+ <div class="example" style="width: 600px; height: 200px;">
+ <img id="photo" width="1280" height="960" src="Graphics/Examples/arduino.jpg">
+ </div>
+
+ <pre class="html">&lt;div style=&quot;width: 600px; height: 200px;&quot;&gt;
+ &lt;img id=&quot;photo&quot; width=&quot;1200&quot; height=&quot;600&quot; src=&quot;Graphics/Examples/arduino.jpg&quot;&gt;
+&lt;/div&gt;</pre>
+ <pre class="javascript">$('photo').panner({ center: true });</pre>
+
+ <div>
+ <p>
+ Sample text from <a href="http://en.wikipedia.org/wiki/Arduino" target="_blank">Wikipedia</a>.
+ All photos are released into the public domain.
+ </p>
+ </div>
+
+</body>
+</html>
BIN  Graphics/Examples/arduino.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  Graphics/Examples/arduino_connected.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  Graphics/Examples/arduino_macro.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  Graphics/Examples/arduino_small.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  Graphics/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 README.md
@@ -0,0 +1,66 @@
+Panner
+======
+
+Content panning based mouse movement, a cool way to replace scrolling for large images or full pages.
+Requires Mootools Core 1.4.1 or later.
+
+![Screenshot](https://github.com/lorenzos/Panner/raw/master/Graphics/logo.png)
+
+
+How to use
+----------
+
+First of all, include in your page Mootools 1.4.1 or later, and *Panner.js* source.
+
+ <script type="text/javascript" src="Mootools.js"></script>
+ <script type="text/javascript" src="Panner.js"></script>
+
+Place the content you want to pan inside a smaller container (can be the main body too), like this:
+
+ <!-- Small container -->
+ <div style="width: 600px; height: 200px;">
+
+ <!-- Big content -->
+ <div id="content" style="width: 1200px; height: 600px;">
+ Lorem Ipsum dolor sit amet.
+ </div>
+
+ </div>
+
+Then, in your Javascript:
+
+ $('content').panner();
+
+
+Docs
+----
+
+**Syntax:**
+
+ var myPanner = new Panner(content, options);
+
+- **content**: A DOM element or ID, the content you want to scroll.
+- **options**: (object) Options for the class. They are all listed below.
+
+**Options:**
+
+- **limit**: If `TRUE` (default) limits content panning at its normal scroll bounds.
+- **center**: If `TRUE` moves the content to the center initially.
+
+**Methods:**
+
+- **center()**: Moves the content to the center immediatly.
+- **topLeft()**: Moves the content to the top-left corner immediatly.
+- **select()**: Select a value.
+- **attach()**: Enable panner, this method is called in costructor.
+- **detach()**: Disable panner, call it when you want to suspend panning.
+- **refresh()**: Refresh panner (detach + attach), call this when container or content size changes.
+
+**Element and Elements methods:**
+
+You can use some shortcut methods on **Element** and **Elements** for creating the Panner quickly.
+
+ $$('img').panner(options); // Attach Panner to all images
+
+- **Element.panner(options)**: Creates a new instance of Panner on a single element.
+- **Elements.panner(options)**: Creates a new instance of Panner on elements.
151 Source/Panner.js
@@ -0,0 +1,151 @@
+/*
+---
+description: Content panning based mouse movement, a cool way to replace scrolling for large images or full pages.
+
+license: MIT-style
+
+authors:
+- Lorenzo Stanco
+
+requires:
+- core/1.4.1: '*'
+
+provides: [Panner]
+
+...
+*/
+
+var Panner = new Class({
+
+ Implements: [Options],
+
+ options: {
+ limit: true, // Limits content movements at its normal scroll bounds
+ center: false, // Move to center initially
+ },
+
+ initialize: function(content, options) {
+
+ // Setup
+ this.setOptions(options);
+ this.content = document.id(content);
+ this.container = this.content.getParent();
+
+ // Force content position and container overflow
+ if (!(['relative', 'absolute'].contains(this.content.getStyle('position')))) this.content.setStyle('position', 'relative');
+ this.container.setStyle('overflow', 'hidden');
+
+ // Attach
+ this.attach();
+
+ // Manage window resizing
+ window.addEvent('resize', function() { if (this.attached) this.refresh(); }.bind(this));
+
+ // Center?
+ if (this.options.center) this.center();
+
+ },
+
+ // Scroll content to center
+ center: function() {
+ this.content.setStyles({
+ left: (this.containerSize.x - this.contentSize.x) / 2,
+ top : (this.containerSize.y - this.contentSize.y) / 2
+ });
+ return this;
+ },
+
+ // Scroll content to top left corner
+ topLeft: function() {
+ this.content.setStyles({ 'left': 0, 'top': 0 });
+ return this;
+ },
+
+ // Attach events, enabling panner
+ attach: function() {
+ if (!this.attached) {
+
+ // Calculate elements size
+ this.contentSize = this.content.getSize(); // Padding and borders too
+ this.containerSize = { x: this.container.getStyle('width').toInt(), y: this.container.getStyle('height').toInt() }; // Without padding and borders
+ this.containerPosition = this.container.getPosition();
+ this.ratio = { x: this.contentSize.x / this.containerSize.x, y: this.contentSize.y / this.containerSize.y }; // Content/container ratio
+
+ // Setup initial position in a way that content is never completely outside container
+ var currentPosition = {
+ x: this.content.getStyle('left').toInt(),
+ y: this.content.getStyle( 'top')
+ };
+ if (currentPosition.x > this.containerSize.x || currentPosition.y > this.containerSize.y || currentPosition.x < -this.contentSize.x || currentPosition.y < -this.contentSize.y) {
+ if (this.options.center) this.center();
+ else this.topLeft();
+ }
+
+ // Attach events
+ if (!this.bound) this.bound = this._scroll.bind(this);
+ this.container.addEvent('mousemove', this.bound);
+
+ this.attached = true;
+
+ }
+ return this;
+ },
+
+ // Detach events, disabling panner
+ detach: function() {
+ if (this.attached) {
+ this.container.removeEvent('mousemove', this.bound);
+ this.attached = false;
+ }
+ return this;
+ },
+
+ // Refresh panner (detach + attach)
+ refresh: function() {
+ this.detach().attach();
+ return this;
+ },
+
+ _scroll: function(e) {
+ if (this.attached) {
+
+ // Calculate coordinates
+ var mouse = { x: e.page.x - this.containerPosition.x, y: e.page.y - this.containerPosition.y }; // Mouse position relative to container
+ var position = { x: this.containerSize.x / 2 - mouse.x * this.ratio.x, y: this.containerSize.y / 2 - mouse.y * this.ratio.y }; // New position for content
+
+ // Limit coordinates
+ if (this.options.limit) position = {
+ x: position.x.limit(this.containerSize.x - this.contentSize.x, 0),
+ y: position.y.limit(this.containerSize.y - this.contentSize.y, 0)
+ };
+
+ // Force when container is bigger than content
+ if (this.options.limit && this.containerSize.x > this.contentSize.x) position.x = this.options.center ? (this.containerSize.x - this.contentSize.x) / 2 : 0;
+ if (this.options.limit && this.containerSize.y > this.contentSize.y) position.y = this.options.center ? (this.containerSize.y - this.contentSize.y) / 2 : 0;
+
+ // Apply position
+ this.content.setStyles({ 'left': position.x, 'top': position.y });
+
+ }
+ return this;
+ }
+
+});
+
+Element.implement({
+
+ panner: function(options) {
+ new Panner(document.id(this), options);
+ return this;
+ }
+
+});
+
+Elements.implement({
+
+ panner: function(options) {
+ this.each(function(el) { new Panner(el, options); });
+ return this;
+ }
+
+});
9 package.yml
@@ -0,0 +1,9 @@
+name: Panner
+author: lorenzo.stanco
+category: Interface
+tags: [pan, panning, image, parallax, scrolling]
+demo: http://www.lorenzostanco.com/demos/Panner/Demo.html
+docs: https://github.com/lorenzos/Panner#docs
+current: 0.1
+sources:
+ - "Source/Panner.js"
Please sign in to comment.
Something went wrong with that request. Please try again.