Category Archive

Viewing all posts in the Code category.

 

Simple Parallax with jQuery

Posted September 4th, 2010 17:43 by

Shinyface Parallax

A quick demo of using jQuery for par­al­lax. This example just cre­ates a nice visual effect but it could eas­ily be con­ver­ted for more con­struct­ive pur­poses but I’ll leave that up to you.

Par­al­lax (for the sake of this post) is the effect whereby things at dif­fer­ent dis­tances move at dif­fer­ent rates, for example look­ing out of a train win­dow the closer items are the faster they move past you. This is as hor­ribly sim­pli­fied and inac­cur­ate descrip­tion but will suf­fice for the sake of this example.

I’ve used three trans­par­ent PNGs for this but you can use as many lay­ers as you like or eas­ily replace the PNGs with div tags con­tain­ing whatever con­tent you need.

View the demo.
View the javas­cript source.

The HTML

This is very simple. The html you need is as follows:

  1. <div id=“Par­al­lax”>
  2.         <img src=“images/Bottom.png” />
  3.         <img src=“images/Middle.png” />
  4.         <img src=“images/Top.png” />
  5. </div>

See, told you it was simple. The div is the outer con­tainer into which the lay­ers belong. Add the images in order of the bot­tom one (smal­lest) first. Job done.

The Images (or layers)

The images (or lay­ers) you use should each be a dif­fer­ent size, the big­ger the image the more move­ment. Each image must be at least as big as the viewer, if you set one side of it to be the same size as the viewer and another to be lar­ger it will only move on that axis, which is a nice effect in itself. So if your image is the same height as the viewer but wider it will only move horizontally.

This may be stat­ing the obvi­ous, but I’ve used trans­par­ent pngs, you must be able to see the lower images through the upper ones. To cre­ate them I used a pho­toshop file with a group for each image. This meant I could check how they would look before I out­put them. You can view the three images here:

The CSS

You can view the entire CSS file here. The import­ant parts are as follows.

  1. #Par­al­lax {
  2.         background-color: #880088;
  3.         height: 500px;
  4.         over­flow: hid­den;
  5.         pos­i­tion: rel­at­ive;
  6.         width: 750px;
  7. }

The back­ground color can be whatever you fancy. Bear in mind that if all your lay­ers are trans­par­en­cies the back­ground color will show through. Of course you could make the bot­tom layer fully colored, pat­terned or whatever you fancy. You could also give the #Par­al­lax div a back­ground image if you wanted.

The width and height are import­ant, remem­ber your images should all the same dimen­sions or big­ger than this div. Over­flow must be set to hid­den to ensure that tags within this div will not cause it to change it’s size and will not poke out of the sides.

The rel­at­ive pos­i­tion is required as we will be set­ting the tags within the div to abso­lute and we want them to be posi­tioned rel­at­ively to this div, not to the document.

  1. #Par­al­lax img {
  2.         pos­i­tion: abso­lute;
  3.         top: 0;
  4.         left: 0;
  5. }

Each of the images within the div (or whatever you use for lay­ers) must be set to use abso­lute pos­i­tion­ing so that we can move them around with jQuery. I’ve set their ini­tial pos­i­tions to the top left corner but you can set them to wherever suits.

The Javas­cript

This uses jQuery for the heavy lift­ing. It could be con­ver­ted into a handy little jQuery plu­gin but I wanted to keep it as simple as pos­sible for the sake of the example, plus oth­ers have already done that.

  1. jQuery(doc­u­ment).ready(func­tion($){
  2.         $(’#Par­al­lax’).mouse­move(
  3.                 func­tion(e){
  4.                 /* Work out mouse position */
  5.                 var off­set = $(this).off­set();
  6.                 var xPos = e.pageX - off­set.left;
  7.                 var yPos = e.pageY - off­set.top;
  8.  
  9.                 /* Get per­cent­age positions */
  10.                 var mou­s­eX­Per­cent = Math.round(xPos / $(this).width() * 100);
  11.                 var mou­seY­Per­cent = Math.round(yPos / $(this).height() * 100);
  12.  
  13.                 /* Pos­i­tion Each Layer */
  14.                 $(this).chil­dren(‘img’).each(
  15.                         func­tion(){
  16.                                 var diffX = $(’#Par­al­lax’).width() - $(this).width();
  17.                                 var diffY = $(’#Par­al­lax’).height() - $(this).height();
  18.        
  19.                                 var myX = diffX * (mou­s­eX­Per­cent / 100);
  20.                                 var myY = diffY * (mou­seY­Per­cent / 100);
  21.                                 var cssObj = {
  22.                                         ‘left’: myX + ‘px’,
  23.                                         ‘top’: myY + ‘px’
  24.                                 }
  25.                                 $(this).anim­ate({left: myX, top: myY},{dur­a­tion: 50, queue: false, eas­ing: ‘lin­ear’});
  26.  
  27.                         }
  28.                 );
  29.  
  30.                 }
  31.         );
  32. });

What this does is whenever the mouse is moved over the viewer (#Par­al­lax div) it cal­cu­lates it’s pos­i­tion over the div (as per­cent­ages) then moves each of the inner images by that same per­cent of their overflow.

Firstly work out the xPos and yPos. To do this we sub­tract the view­ers x and y off­set from the x and y mouse pos­i­tion. This is because the mouse pos­i­tions returned are rel­at­ive to the doc­u­ment not to the viewer. The off­set val­ues give us the view­ers pos­i­tion rel­at­ive to the document.

Next, work out the hori­zontal and ver­tical pos­i­tion of the mouse pointer as a per­cent­age (0 = the top of the viewer, 100 = the bottom).

Loop through each image, for each one work out the dif­fer­ence in width and height between the image and the viewer. The image’s new pos­i­tion for each axis is the per­cent­age cal­cu­lated earlier for that axis of the dif­fer­ence for that axis. So if the mouse is dead cen­ter on the viewer the hori­zontal pos­i­tion is 50% of the dif­fer­ence between the image width and the viewer width.

Finally, we cre­ate an object con­tain­ing the new CSS set­tings and apply it via a very short anim­a­tion which gives the effect a nice smooth fin­ish. You can just jump to the new pos­i­tion but it looks a little too rough for my tastes.

Links

Posted in Code | Comments Off
Tags: , , , ,

Adding Facebook Like buttons to your website

Posted August 16th, 2010 20:49 by

We’ve just launched the new Shinytastic web­site which gave me a chance to exper­i­ment with some new tech­niques. The most inter­est­ing has to be the addi­tion of Face­book like but­tons to the web­site (down in the footer). The abil­ity to dir­ectly integ­rate your web­site with a social media site is going to really change how we use the web, hope­fully in a good way. Mak­ing it much easier for users to com­ment on your web­site and your busi­ness will give you a great instant response when they have an enquiry or some­thing pos­it­ive to say and will gen­er­ally improve your com­mu­nic­a­tion with cus­tom­ers and poten­tial customers.

There are two types (at the time of writ­ing) of Face­book ‘Like’ but­tons you can add to your web­site, the dif­fer­ence caused a little con­fu­sion at first but it’s simple enough. The first type is a gen­eral pur­pose Like but­ton which you can stick on any page any­where to allow users to like that page, when they do it cre­ates a link on their face­book feed which links back to the page they liked. This is great for a blog or any web­site where you might want users to be able to like spe­cific pages or pieces of inform­a­tion. The other type (which we have used) is a like box which is linked to a Face­book Page (for a busi­ness, enter­tainer, etc). When a user clicks a like box but­ton it adds an entry to their feed which links back to the Face­book Page the but­ton is asso­ci­ated with. This is bet­ter if you want to point people at your organ­isa­tions Face­book Page and not at spe­cific art­icles or pieces of inform­a­tion. The imple­ment­a­tion is pretty much identical.

There are two ways you can add a like but­ton (either of them) to your web­site, the easy way using an iframe which I’m not going to cover as face­book gen­er­ates all the code you need for you and the more com­plic­ated but much more flex­ible man­ner using XFBML. I wanted to use XFBML because you have a lot more con­trol over how it looks and integ­rates with your site, plus it was a chal­lenge. Although all the doc­u­ment­a­tion needed is out there (mostly on the Face­book Developers site) it’s a little scattered so here’s the steps involved in as straight-forward a man­ner as I can put them. I’ll try not to be too verb­ose with the sup­port­ing notes.

Namespaces, Doc­types and Validity

The first thing you need to do to your page to run XFBML is add the Face­book and Open Graph namespaces. Find your root html tag which will look some­thing like this:

  1. <html xmlns=“http://www.w3.org/1999/xhtml”>

Add the Open Graph and Face­book namespaces as follows

  1. <html xmlns=“http://www.w3.org/1999/xhtml”
  2.         xmlns:og=“http://opengraphprotocol.org/schema/”
  3.    xmlns:fb=“http://www.facebook.com/2008/fbml”>

The Face­book namespace is so that you can use the XFBML tags the Open Graph is so that you can use the Open Graph meta tags which I’ll come to in a moment. First off though there’s a bit of a prob­lem to over­come. As a rule I stick to XHTML 1.0 Trans­itional but HORROR if you use XFBML tags with that Doc­type your page will not val­id­ate, now this is not an issue for every­one but it’s a ser­i­ous prob­lem for me. The solu­tion is you need to use the RDFa ver­sion instead, which I’m afraid kids means you need to write strict xhtml (unless you’re using HTML5 already in which case check out this handy link). This is not the time for a full explan­a­tion, the short of it is you’ll need to change your doc­type to this (assum­ing you are using XHTML 1.0 oth­er­wise just have a little google for whichever HTML ver­sion you are using + RDFa):

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN”
  2.                             “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd”>

Our site still doesn’t actu­ally val­id­ate 100%, we have some errors ref­er­en­cing the XFBML tags, but I can deal with that (for now) as the code was sup­plied by Face­book. That’s the hard part out of the way.

Adding the Javas­cript SDK

Use of the XFBML tags for like but­tons requires the Face­book Javas­cript SDK. This is simply a case of going here to the Face­book SDK page, cut­ting and past­ing the sup­plied code into your page. Stick it just above the clos­ing body tag. Job done.

Add the XFBML tag

Face­book sup­plies handy gen­er­at­ors for you here. You’ll need a dif­fer­ent tag depend­ing on your preference.

Like But­tons (art­icles, spe­cific web-pages, etc)

Click here to go to the Face­book page to gen­er­ate the tag. You can pretty much leave the form as it is. You should be given some code a bit like this:

  1. <fb:like></fb:like>

Yup, that’s it. That’s all you need. You can add attrib­utes for spe­cific lay­out and con­trol fea­tures like this if you fancy, see the Face­book doc­u­ment­a­tion for spe­cific info:

  1. <fb:like show_faces=“false” width=“300” action=“recom­mend”></fb:like>

Like Boxes

Like boxes are the slightly more advanced sib­lings to the Like but­tons. They are tied to a Face­book page. Quick­est way to get the code is to visit your Face­book page (you must be logged in), click Get Star­ted then click Add Like Box. This will take you to the gen­er­ator page with all your details pre-filled. Set the set­tings how you fancy them and click Get Code and you shall receive some­thing like this:

  1. <fb:like-box profile_id=“185550966885”></fb:like-box>

Stick your sup­plied tag wherever in the page you want it to go then con­fig­ure your Open Graph Meta tags…

Open Graph Meta Tags

You can read all about the Open Graph Pro­tocol here. For the sake of this art­icle the Open Graph tags are addi­tional meta tags you can add to your doc­u­ment to add spe­cific inform­a­tion about the doc­u­ment which will be used by Face­book. There’s some inform­a­tion on the Face­book Like page on how to use them. Add the meta tags to the head sec­tion of your doc­u­ment, they should look a little like this (with your inform­a­tion in, not ours obviosuly):

  1. <meta prop­erty=“og:title” con­tent=“Shinytastic Web Design”/>
  2. <meta prop­erty=“og:type” con­tent=“web­site”/>
  3. <meta prop­erty=“og:email” con­tent=“bob@shinytastic.com”/>
  4. <meta prop­erty=“og:image” con­tent=“http://www.shinytastic.com/files/ShinyFB.jpg”/>
  5. <meta prop­erty=“og:phone_number” con­tent=“01628 627289″/>
  6. <meta prop­erty=“og:site_name” con­tent=“Shinytastic Web Design”/>
  7. <meta prop­erty=“og:url” con­tent=“http://www.shinytastic.com”/>
  8. <meta prop­erty=“fb:admins” con­tent=“100001073515935”/>

title, email, phone_number, url and site_name are pretty obvi­ous. type must be one of a very spe­cific list avail­able on the Open Graph web­site. image image is more import­ant than you expect, I intially didn’t spe­cify it assum­ing Face­book would either not use an image or would use the first image on the page. Nope, it used one of our cli­ents logos so any­one who liked our page ended up with a con­fus­ing link to our web­site using our client’s logo. Face­book explain the image as follows:

The URL to an image that rep­res­ents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

Final item of import­ance is the fb:admins entry. This must con­tain a comma seper­ated list of user id’s who are respons­ible for this page. To get your Face­book id go to your pro­file and look at the url, your id is the part after the ?id=. My pro­file is http://www.facebook.com/profile.php?id=100001073515935 so my id is 100001073515935.

To get the like but­ton work­ing one of the users lis­ted in fb:admins must visit the page and click the like button.

That’s it. It’s pretty simple really. I’ve only covered very basic integ­ra­tion here, there’s loads more you can do with a bit of research. Let me know how you get on.

Those Links Again

Posted in Code | 1 Comment »
Tags: , , , ,

 

© 2013 Shinytastic. All Rights Reserved.