├── CHANGELOG.md
├── LICENSE.txt
├── README.md
├── demo
    ├── css
    │   └── style.css
    ├── img
    │   ├── Thumbs.db
    │   ├── imac.png
    │   └── iphone.png
    ├── index.html
    └── js
    │   └── jquery.scrollslide.js
├── jquery.scrollSlide.js
└── scrollSlide.jquery.json


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ### 1.0.0 / 10-02-2014###
 2 | 
 3 | **Development**
 4 | 
 5 | * Created project folder structure
 6 | * Created README.md and CHANGELOG.md files
 7 | * Basic HTML template for dev and demo
 8 | * CSS styling of template
 9 | * Include jQuery UI
10 | * jQuery plugin boilerplate
11 | * Set default options - direction, speed,scrollstart, slideback
12 | * Window scroll and slide in/out functionality


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 codeSkillet
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ScrollSlide #
 2 | 
 3 | **ScrollSlide** is a jQuery plugin that will set off a slide in and slide out animation depending on the y position of the browser's scrollbar.
 4 | 
 5 | 
 6 | ## Version ##
 7 | **1.0.0**
 8 | 
 9 | ## Demo ##
10 | To view a live demo, please go to - [http://codedemos.com/scrollslide](http://www.codedemos.com/scrollslide)
11 | 
12 | ##Plugin Options##
13 | 
14 | * **direction** - Which direction the object should slide in (left, right, up, down)
15 | * **speed** - Speed of the slide animation
16 | * **scrollstart** - The position of the scrollbar's y axis
17 | * **slideback** - If the objects should slide back out of view when scroll back up (true, false)
18 | 
19 | ##Dependencies##
20 | You must include the **jQuery UI Library**
21 | ```<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>```
22 | 
23 | ##Usage##
24 | Include **jQuery, jQuery UI** and **jquery.scrollslide.js**
25 | 
26 |     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
27 |     <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
28 |     <script src="js/jquery.scrollslide.js"></script>
29 | 
30 | 
31 | After the document is ready, attatch **.scrollSlide()** to any HTML element
32 | 
33 |     $('#someElement').scrollSlide({
34 | 	    direction   : 'left',
35 | 	    speed       : 1000,
36 |         scrollstart : 200,
37 | 	    slideback   : false
38 |     });
39 | 
40 | If you run into any issues with how far you can scroll, try adding a height or min-height to the parent element
41 | 
42 | ## Vendors ##
43 | **ScrollSlide** uses the following open source projects
44 | 
45 | * JQuery - [http://jquery.com](www.jquery.com)
46 | 
47 | ##Supported Browsers##
48 | * Chrome (stable and canary channel)
49 | * Firefox
50 | * IE 9 and 10
51 | * Opera
52 | * Safari
53 | 
54 | ##License##
55 | GNU/GPL
56 | 
57 | ##Support##
58 | If you are having issues getting this software to work, you can email support@codeskillet.com
59 | 
60 | ##Authors##
61 | Brad Traversy
62 | 
63 | * [http://twitter.com/bradtraversy](http://twitter.com/bradtraversy)
64 | * [http://www.linkedin.com/in/bradtraversy](http://www.linkedin.com/in/bradtraversy)


--------------------------------------------------------------------------------
/demo/css/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 | 	margin:0;
  3 | 	padding:0;
  4 | 	font-family: 'Arial', sans-serif;
  5 | 	font-size:15px;
  6 | 	color:#666;
  7 | 	line-height:1.6em;
  8 | }
  9 | 
 10 | a{
 11 | 	color:#666;
 12 | 	text-decoration: none;
 13 | }
 14 | 
 15 | .container{
 16 | 	width:1024px;
 17 | 	margin:auto;
 18 | 	overflow:auto;
 19 | }
 20 | 
 21 | header{
 22 | 	background:#333;
 23 | 	height:55px;
 24 | 	color:#fff;
 25 | }
 26 | 
 27 | header a{
 28 | 	color:#fff;
 29 | 	text-decoration: none;
 30 | }
 31 | 
 32 | .logo{
 33 | 	float:left;
 34 | 	width:300px;
 35 | 	margin-top:15px;
 36 | }
 37 | 
 38 | nav{
 39 | 	float:right;
 40 | 	width:650px;
 41 | }
 42 | 
 43 | nav ul{
 44 | 	float:right;
 45 | }
 46 | 
 47 | nav li{
 48 | 	list-style: none;
 49 | 	float:left;
 50 | 	padding:0 10px 0 10px;
 51 | }
 52 | 
 53 | section{
 54 | 	padding:60px 0;
 55 | 	overflow:hidden;
 56 | 	min-height:300px;
 57 | }
 58 | 
 59 | section.showcase{
 60 | 	background:#f4f4f4;
 61 | 	height:500px;
 62 | 	border-bottom:#eee solid 5px;
 63 | }
 64 | 
 65 | section.showcase h1{
 66 | 	font-size:70px;
 67 | 	text-align: center;
 68 | 	padding-top:150px;
 69 | 	color:#333;
 70 | }
 71 | 
 72 | section h2{
 73 | 	font-size:32px;
 74 | }
 75 | 
 76 | section.dark{
 77 | 	background:#333;
 78 | 	color:#fff;
 79 | }
 80 | 
 81 | .section-left{
 82 | 	float:left;
 83 | 	width:50%;
 84 | 
 85 | }
 86 | 
 87 | .section-right{
 88 | 	float:left;
 89 | 	width:50%;
 90 | }
 91 | 
 92 | .section-right img{
 93 | 	margin-left:100px;
 94 | }
 95 | 
 96 | .btn{
 97 | 	background:#f4f4f4;
 98 | 	border:0;
 99 | 	padding:10px 15px;
100 | 	display: block;
101 | 	text-align: center;
102 | }


--------------------------------------------------------------------------------
/demo/img/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/jquery.scrollSlide/a416ebdb62127882de6c9f123990d947a7263eda/demo/img/Thumbs.db


--------------------------------------------------------------------------------
/demo/img/imac.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/jquery.scrollSlide/a416ebdb62127882de6c9f123990d947a7263eda/demo/img/imac.png


--------------------------------------------------------------------------------
/demo/img/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/jquery.scrollSlide/a416ebdb62127882de6c9f123990d947a7263eda/demo/img/iphone.png


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<title>ScrollSlide Demo</title>
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 |     	<!--  Stylesheets -->
 9 |     	<link rel='stylesheet' href='css/style.css' type='text/css'>
10 | 
11 |     	<!-- JavaScripts -->
12 |     	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
13 |     	<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
14 |     	<script src="js/jquery.scrollslide.js"></script>
15 |     	<script>
16 |     		$(document).ready(function(){
17 |     			$('.slide-left-200').scrollSlide({
18 | 				    direction   : 'left',
19 | 				    scrollstart : 200
20 | 				});
21 | 
22 | 				$('.slide-right-200').scrollSlide({
23 | 				    direction   : 'right',
24 | 				    scrollstart : 200
25 | 				});
26 | 
27 | 				$('.slide-left-400').scrollSlide({
28 | 				    direction   : 'left',
29 | 				    scrollstart : 400
30 | 				});
31 | 
32 | 				$('.slide-right-400').scrollSlide({
33 | 				    direction   : 'right',
34 | 				    scrollstart : 400
35 | 				});
36 |     		});
37 |     	</script>
38 | 	</head>
39 | 	<body>
40 | 		<header>
41 | 			<div class="container">
42 | 				<h1 class="logo">ScrollSlide Demo</h1>
43 | 				<nav>
44 | 					<ul>
45 | 						<li><a href="#">Home</a></li>
46 | 						<li><a href="#">About</a></li>
47 | 						<li><a href="#">Services</a></li>
48 | 						<li><a href="#">Contact</a></li>
49 | 					</ul>
50 | 				</nav>
51 | 			</div>
52 | 		</header>
53 | 
54 | 		<section class="showcase">
55 | 			<div class="container">
56 | 				<h1>Main Showcase Area</h1>
57 | 			</div>
58 | 		</section>
59 | 
60 | 		<section>
61 | 			<div class="container">
62 | 				<div class="section-left">
63 | 					<div class="slide-left-200">
64 | 						<h2>Lorem ipsum dolor</h2>
65 | 						<p>Praesent accumsan lacinia purus, eu aliquam mauris malesuada et. Ut vitae libero quis augue viverra lacinia vel quis leo. In interdum vehicula mi sit amet consectetur. Proin in ante accumsan. </p>
66 | 						<a class="btn" href="#">Read More</a>
67 | 					</div>
68 | 				</div>
69 | 				<div class="section-right">
70 | 					<div class="slide-right-200">
71 | 						<img src="img/iphone.png">
72 | 					</div>
73 | 				</div>
74 | 			</div>
75 | 		</section>
76 | 
77 | 		<section class="dark">
78 | 			<div class="container">
79 | 				<div class="section-left">
80 | 					<div class="slide-left-400">
81 | 						<img src="img/imac.png">
82 | 					</div>
83 | 				</div>
84 | 				<div class="section-right">
85 | 					<div class="slide-right-400">
86 | 						<h2>Lorem ipsum dolor</h2>
87 | 						<p>Praesent accumsan lacinia purus, eu aliquam mauris malesuada et. Ut vitae libero quis augue viverra lacinia vel quis leo. In interdum vehicula mi sit amet consectetur. Proin in ante accumsan. </p>
88 | 						<a class="btn" href="#">Read More</a>
89 | 					</div>
90 | 				</div>
91 | 			</div>
92 | 		</section>
93 | 	</body>
94 | </html>


--------------------------------------------------------------------------------
/demo/js/jquery.scrollslide.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * @author {https://github.com/bradtraversy/jquery.scrollSlide}
 4 |  * @license {http://opensource.org/licenses/MIT|MIT}
 5 |  * @version 0.1.0
 6 |  */
 7 | 
 8 | (function($) {
 9 | 
10 |     $.fn.scrollSlide = function(options) {
11 |     	// Default Settings
12 | 		var settings = $.extend({
13 | 			direction   : 'right', 	// Direction (Slide From)
14 | 			speed       : 1000,  	// Speed of animation
15 | 			scrollstart : 200,  	// Scroll position to start slide in
16 | 			slideback   : false 	// Should object slide back on scroll up?
17 | 		}, options);
18 | 
19 | 		return this.each( function() {
20 | 			var object = $(this);
21 | 			
22 | 			// Hide object initially
23 | 			object.css('display','none');
24 | 
25 | 			// On scroll
26 | 			$(window).scroll(function(e){
27 | 				var y = $(this).scrollTop();
28 | 
29 | 				// Check scroll start value
30 | 				if(y >= settings.scrollstart){
31 | 					object.show('slide', {direction: settings.direction}, settings.speed);
32 | 				}
33 | 
34 | 				// If object should slide back out on scroll up
35 | 				if(y < settings.scrollstart && settings.slideback == true){				
36 | 					object.hide('slide', {direction: settings.direction}, settings.speed);
37 | 				}
38 | 
39 | 				
40 | 			});
41 | 		});
42 | 
43 | 	};
44 | 
45 | }(jQuery));
46 | 


--------------------------------------------------------------------------------
/jquery.scrollSlide.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * @author {https://github.com/bradtraversy/jquery.scrollSlide}
 4 |  * @license {http://opensource.org/licenses/MIT|MIT}
 5 |  * @version 0.1.0
 6 |  */
 7 | 
 8 | (function($) {
 9 | 
10 |     $.fn.scrollSlide = function(options) {
11 |     	// Default Settings
12 | 		var settings = $.extend({
13 | 			direction   : 'right', 	// Direction (Slide From)
14 | 			speed       : 1000,  	// Speed of animation
15 | 			scrollstart : 200,  	// Scroll position to start slide in
16 | 			slideback   : false 	// Should object slide back on scroll up?
17 | 		}, options);
18 | 
19 | 		return this.each( function() {
20 | 			var object = $(this);
21 | 			
22 | 			// Hide object initially
23 | 			object.css('display','none');
24 | 
25 | 			// On scroll
26 | 			$(window).scroll(function(e){
27 | 				var y = $(this).scrollTop();
28 | 
29 | 				// Check scroll start value
30 | 				if(y >= settings.scrollstart){
31 | 					object.show('slide', {direction: settings.direction}, settings.speed);
32 | 				}
33 | 
34 | 				// If object should slide back out on scroll up
35 | 				if(y < settings.scrollstart && settings.slideback == true){				
36 | 					object.hide('slide', {direction: settings.direction}, settings.speed);
37 | 				}
38 | 
39 | 				
40 | 			});
41 | 		});
42 | 
43 | 	};
44 | 
45 | }(jQuery));
46 | 


--------------------------------------------------------------------------------
/scrollSlide.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "scrollSlide",
 3 |     "title": "jQuery ScrollSlide",
 4 |     "version": "0.2.0",
 5 |     "description": "A plugin to run a slide animation at a specified scroll position.",
 6 |     "keywords": [
 7 |         "animation",
 8 |         "slider",
 9 |         "scroller"
10 |     ],
11 |     "author": {
12 |         "name": "Brad Traversy"
13 |     },
14 |     "licenses": [
15 |         {
16 |             "type": "MIT",
17 |             "url": "https://github.com/bradtraversy/jquery.scrollSlide/blob/master/LICENSE.txt"
18 |         }
19 |     ],
20 |     "dependencies": {
21 |         "jquery": ">=1.9.0"
22 |     },
23 |     "homepage": "https://github.com/bradtraversy/jquery.scrollSlide",
24 |     "demo": "http://codedemos.com/scrollslide",
25 |     "docs": "https://github.com/bradtraversy/jquery.scrollSlide"
26 | }


--------------------------------------------------------------------------------