Dynamic Scrolling Shadow

Download   Demo

Scrolling Shadow Effect

I stumbled across the VoicesHavePower website which uses a nice grid layout to separate its contents. It showcases stories each with a content panel that gives off a nice looking flat shadow. As you scroll through the website, each individual panel dynamically shifts the shadow based on where it is in your window. I’ve recreated this effect with CSS3 transform effects and some jQuery.

HTML Structure

This is the basic structure for the content panel. The Grid-Container is what contains the colored background, panel and shadow. The Shadow-Box is actually what has the scrolling shadow effect.

1 2 3 4 5 6 7 8 9 10

<div class="grid-container blue">   <div class="shadow-box">     <div class="content">     </div>     <div class="shadows">       <div class="shadow top"></div>       <div class="shadow bottom"></div>     </div>   </div> </div>

Scrolling Shadow Styles

Here is the css for the shadow box. The scrolling shadow effect is created with 2 shadow elements, one positioned to the top right corner of the content box, and the other positioned at the bottom left corner. Together they are animated and they are bounded by the grid-container class.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

.shadow-box display: block; position: relative; z-index: 1; width: 300px; height: 400px; .shadow-box .content   position: relative;   z-index: 1;   width: inherit;   height: inherit;   background-color: #fff; .shadow-box .shadows   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";   filter: alpha(opacity=30);   -moz-opacity: 0.3;   -khtml-opacity: 0.3;   opacity: 0.3;   .shadow-box .shadow     position: absolute;     z-index: -1;     left: 0;     bottom: 0;     width: 100%;     height: 200%;     background-color: #444;     -webkit-transform: rotate(-45deg);     -moz-transform: rotate(-45deg);     -ms-transform: rotate(-45deg);     -o-transform: rotate(-45deg);     transform: rotate(-45deg);      .shadow-box .shadow.top     right: 0;     top: 0;     -webkit-transform-origin: 100% 0;     transform-origin: 100% 0;      .shadow-box .shadow.bottom     -webkit-transform-origin: 0 0;     transform-origin: 0 0;     right: 0;     top: 100%;

jQuery

This is where the scrolling shadow angle is calculated. Basically, for each shadow-box it will calculate a percentage for how far scrolled it is within the current view of the window. You can change how angled the shadow starts out as and where it will end once you’ve completely scrolled past it, by altering the startingRotate and endingRotate variables.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

// scrolling shadow effect function updateParallax()   $(".grid-container").each(function ()     var height = $(this).height();     var bottom = $(this).offset().top + height;     var top = $(this).offset().top;     var windowHeight = $(window).height();     var scrollTop = $(window).scrollTop() + windowHeight;     var fromTop = $(window).scrollTop() - top;     if ((bottom > $(window).scrollTop()) && (top < scrollTop))                    var percent = ((scrollTop - top) / (height + windowHeight));       var startingRotate = -80; // Starting angle of shadow       var endingRotate = -15; // Ending angle of shadow       var shadowRotate =  (startingRotate - endingRotate) * (1 - percent) + endingRotate;       if (shadowRotate < startingRotate)         shadowRotate = startingRotate              else if (shadowRotate > 0)         shadowRotate = 0;              $(this).find('.shadow-box .shadow').css('-webkit-transform': 'rotate(' + shadowRotate + 'deg)' );       $(this).find('.shadow-box .shadow').css('-moz-transform': 'rotate(' + shadowRotate + 'deg)' );       $(this).find('.shadow-box .shadow').css('-ms-transform': 'rotate(' + shadowRotate + 'deg)' );       $(this).find('.shadow-box .shadow').css('-o-transform': 'rotate(' + shadowRotate + 'deg)' );       $(this).find('.shadow-box .shadow').css('transform': 'rotate(' + shadowRotate + 'deg)' );        ); updateParallax(); $(window).scroll(function()   updateParallax(); );

Dynamic Scrolling Shadow

woolParalax - Realization parallax effect on CSS3

Download   Demo

woolParalax is a jQuery plugin for realization parallax effect on CSS3

1. INCLUDE JS FILES

<script src="js/libs/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="js/paralax.js" type="text/javascript"></script>

2. HTML

<div id="wool-paralax">
 <div class="wool-layer" data-shift="0.02">
 <img src="img/1.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.03">
 <img src="img/2.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.04">
 <img src="img/3.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.05">
 <img src="img/4.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.06">
 <img src="img/5.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.07">
 <img src="img/6.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.08">
 <img src="img/7.png" alt="" />
 </div>
</div>

Attribute data-shift - shift coefficient

Attribute data-type - shows that the element has to “Float” in the container, data-offsety - space from above for “floating” of an element.

3. JAVASCRIPT

window.onload = function () 
 $('#wool-paralax').woolParalax(
 'type': 'vertical'
 );

4. OPTIONS

• type - type effect (‘vertical’ – if the effect has to be observed during page rewind, ‘none’ – movement of layers concerning one stationary block);


• layerNav - Adds references for switching of layers (for ‘vertical’ type);


• layerClass - block class, in which the effect has to be realized;


• differentSides - if is true, that even and odd layers will move in different directions

woolParalax - Realization parallax effect on CSS3

Creditly.js - An intuitive credit card form

Download Demo

Creditly.js gives you everything you need in order to create a sleek, intuitive credit card form. Just copy the html, css, and javascript to get an intuitive credit card form in seconds.  You get credit card validation (using the Luhn algorithm) for free!

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="src/creditly.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="src/creditly.js"></script>

2. HTML

<form class="creditly-card-form">
	<section class="creditly-wrapper blue-theme">
	 <div class="credit-card-wrapper">
		<div class="first-row form-group">
		 <div class="col-sm-8 controls">
			<label class="control-label">Card Number</label>
			<input class="number credit-card-number form-control"
			 type="text" name="number"
			 pattern="(\d*\s)3\d*"
			 inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number"
			 placeholder="&#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149;">
		 </div>
		 <div class="col-sm-4 controls">
			<label class="control-label">CVV</label>
			<input class="security-code form-control"・
			 inputmode="numeric"
			 pattern="\d*"
			 type="text" name="security-code"
			 placeholder="&#149;&#149;&#149;">
		 </div>
		</div>
		<div class="second-row form-group">
		 <div class="col-sm-8 controls">
			<label class="control-label">Name on Card</label>
			<input class="billing-address-name form-control"
			 type="text" name="name"
			 placeholder="John Smith">
		 </div>
		 <div class="col-sm-4 controls">
			<label class="control-label">Expiration</label>
			<input class="expiration-month-and-year form-control"
			 type="text" name="expiration-month-and-year"
			 placeholder="MM / YY">
		 </div>
		</div>
		<div class="card-type">
		</div>
	 </div>
	</section>
	<button class="submit"><span>Submit</span></button>
</form>

3. JAVASCRIPT

$(function() 
 var creditly = Creditly.initialize(
	 '.creditly-wrapper .expiration-month-and-year',
	 '.creditly-wrapper .credit-card-number',
	 '.creditly-wrapper .security-code',
	 '.creditly-wrapper .card-type');

 $(".creditly-card-form .submit").click(function(e) 
	e.preventDefault();
	var output = creditly.validate();
	if (output) 
	 // Your validated credit card output
	 console.log(output);
	
 );
);

4. THEMES

Creditly supports multiple themes. Each can be used with the same CSS and javascript (src/creditly.css and src/creditly.js). However, the HTML for each theme can have slight differences. You can find the HTML for each of the themes under the src/themes folder.

Currently, Creditly.js supports the following themes:

• blue_theme


• gray_theme

5. SUBMITTING A FORM

When a user wants to submit a form, Creditly.js can be used to perform validation on the fields, and return an output of the results if the validation succeeded. An example usage would be the following:

var creditly = Creditly.initialize(
 '.creditly-wrapper .expiration-month-and-year',
 '.creditly-wrapper .credit-card-number',
 '.creditly-wrapper .security-code',
 '.creditly-wrapper .card-type');

$(".creditly-card-form .submit").click(function(e) 
 e.preventDefault();
 var output = creditly.validate();
 if (output) 
 // Do something with your credit card output.
 console.log(output["number"]);
 console.log(output["security_code"]);
 console.log(output["expiration_month"]);
 console.log(output["expiration_year"]);
 
);

The first part of the above example instantiates the creditly object in the creditly variable. Then, whenever the .creditly-card-form .submit button is clicked, we perform a validation by using creditly.validate().

The creditly.validate method will return one of two things:

• If the validation on either the credit card number, security code, or expiration date fails, then false will be returned. A creditly_client_validation_error event will be triggered on the HTML’s body element, and the has-error class will be added to the input with the failing validation.


• If the validation on all the inputs succeeds, then an associative array with the properties will be returned:
  
  • number: The validated credit card number
  
  
  • security_code: The validated security code of the credit card (also known as the CVV)-expiration_month`: The validated expiration month (integer between 1 and 12)
  
  
  • expiration_year: The validated expiration year (integer between 2000 and 2099)
  
  

6. ERRORS IN VALIDATION

Whenever an error occurs after you call the validate method on a Creditly object, an event will be triggered on the HTML body element. This event, named creditly_client_validation_error, will contain a data object with the selectors of the inputs that failed validation and also the messages of the failed validation. The data has a selectors and a messages property.

If jQuery exists on the page, then a jQuery event will be triggered on the body element and can be accessed like so:

$("body").on("creditly_client_validation_error", function(e, data) 
 alert(data["messages"].join(", "));
);

If jQuery does not exist on the page, then a MessageEvent will be fired on the body element and can be accessed like so:

document.body.addEventListener("creditly_client_validation_error", function(e) 
 alert(e.data["messages"].join(", "));
, false);

You can change the error messages by specifying the error messages upon Creditly object initialization. The initialize function can take a fourth options argument. The possible options are:

• security_code_message The message to display for an invalid security code


• number_message The message to display for invalid credit card numbers


• expiration_message The message to display for an invalid expiration date

For example, we could initialize the Creditly object with different error messages like so:

var options = 
 "security_code_message": "Your security code was really wrong!",
 "expiration_message": "Check yo' expiration date yo!"
;
var creditly = Creditly.initialize(
 '.creditly-wrapper .expiration-month-and-year',
 '.creditly-wrapper .credit-card-number',
 '.creditly-wrapper .security-code',
 '.creditly-wrapper .card-type',
 options);

 

Creditly.js - An intuitive credit card form

Jquery UI Slider Pips

Download   Demo

Jquery UI Slider Pips - Making jQuery Sliders a little bit nicer

Features

• Adds small “pips” and “labels” to the slider


• Extends the jQuery UI Slider widget


• Easily Configurable

• Works for both Horizontal and Vertical sliders


• Doesn’t change default slider behaviour


• Purely a visual plugin

Requirements:

• jQuery (1.9+)


• jQuery UI (1.10+)


• A Reason to use it

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/jquery-ui-slider-pips.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery-ui-slider-pips.min.js"></script>

2. HTML

<div id="slider2"></div>

3. JAVASCRIPT

$('#slider2').slider().slider('pips').slider('float');

4. OPTIONS

Advanced usage with options:

// First of all attach a slider to an element.
$('.element').slider();

// Then you can give it pips and labels! 
$('.element').slider('pips', 
 first: 'label', 
 last: 'label', 
 rest: 'pip', 
 labels: ['label1', 'label2', ...], 
 prefix: "", 
 suffix: "" 
);

// And finally can add floaty numbers (if desired) 
$('.element').slider('float', 
 handle: true, 
 pips: true, 
 labels: ['label1', 'label2', ...], 
 prefix: "", 
 suffix: "" 
);

Options for pips:

first: ‘pip’ or ‘label’ or false
last: ‘pip’ or ‘label’ or false
rest: ‘pip’ or ‘label’ or false
labels: ['array','of','labels'] or false
prefix: “string”
suffix: “string”
formatLabel: function(val) return this.prefix + val + this.suffix

Options for float:

handle: true or false
pips: true or false
labels: ['array','of','labels'] or false
prefix: “string”
suffix: “string”
formatLabel: function(val) return this.prefix + val + this.suffix

Jquery UI Slider Pips

jQuery FBlogin - Adding Facebook Login To Your Web App

Download   Demo

jQuery FBlogin - Adding a Login with Facebook option to your web app is a pain! The process requires multiple requests to the Facebook API, and usually results in a messy callback soup that you get stuck managing.

A typical Facebook login flow usually requires the following sequence:

1. Listen for Facebook SDK load with window.fbAsyncInit


2. Initiate the Facebook App with FB.init


3. Request Facebook permissions with FB.login


4. Request Facebook fields with FB.me(/user)

With the fblogin plugin this is all taken care of with one simple call $.fblogin(options)

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/ryandrewjohnson/jquery-fblogin/master/dist/jquery.fblogin.min.js"></script>

2. HTML

<a href="#" id="login"> Login with Facebook </a>

3. JAVASCRIPT

You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin.

• Setting up Facebook App


• Add Facebook SDK

If you have used the jQuery.ajax() method before then using fblogin should seem familiar. Simply call $.fblogin(options) where options is an object with the desired settings.

Minimal login (no permissions):

$(function () 
	$('#login').click(function () 
		// This will login a user with Facebook and return user's public data
		$.fblogin(
			fbId: 'FB app id',
			success: function (data) 
				console.log('Basic public user data returned by Facebook', data);
			,
			error: function (error) 
				console.log('An error occurred.', error);
			
		);
	);
);

Login requesting Facebook permissions:

// the permissions option is a comma separated list of extended FB permissions
$.fblogin(
 fbId: 'FB app id',
 permissions: 'email,user_birthday',
 success: function (data) 
 console.log('User birthday' + data.birthday + 'and email ' + data.email);
 
);

Return only the requested fields:

// the fields option is a comma separated list of valid FB fields
$.fblogin(
 fbId: 'FB app id',
 permissions: 'email,user_birthday',
 fields: 'email,first_name',
 success: function (data) 
 // data will only contain the requested fields plus the user FB id
 // which is always included by default
 console.log(data.first_name, data.birthday);
 
);

Login using deffereds instead of callbacks:

var $dfd = $.fblogin(fbId: 'FB app id');

$dfd.done(function (data) 
 console.log('User first name' + data.first_name);
);

$dfd.fail(function (error) 
 console.log('An error occurred.', error);
);

Listen for progress callbacks:

// There are two progress events that happen during login
// 1. When the FB SDK is initialized
// 2. When the user has successfully authenticated with FB
var $dfd = $.fblogin(fbId: 'FB app id');

$dfd.progress(function (response) 
 // reponse object has two properties 'status' and 'data'
 switch (response.status) 
 case 'init.fblogin':
 console.log('facebook sdk initialized.'); 
 break;

 case 'authenticate.fblogin':
 console.log('user authenticated with facebook.', response.data);
 break;
 

});

$dfd.done(function (data) 
 console.log('User first name' + data.first_name);
);

4. OPTIONS

When calling $.fblogin() you will be required to pass in a valid options object. Item(s) marked with * are required.

*fbId

fbId: '156114864459351'

A valid Facebook App Id that must be configured to work on the domain that you are using the plugin on.

permissions

permissions: 'email,user_birthday'

A comma seperated list of extended Facebook permissions that you wish to request from the users. By default Facebook grants permissions to a user’s public profile. If you only need access to access to the public permissions then you can omit the permissions option.

fields

fields: 'email,birthday'

A comma seperated list of Facebook fields that will limit which data is returned upon success. Make sure you have requested the appropriate permissions to access the fields provided. e.g. If you want thebirthday field make sure you have requested the user_birthday permission.

success

success: function (data) 

A callback funtion that will be called upon success. The function will receive a data object containing the data returned from Facebook.

error

error: function (error) 

A callback funtion that will be called upon error. The function will receive an error object containing info related to the error thrown.

 

jQuery FBlogin - Adding Facebook Login To Your Web App