Categories
Coding

How To Easily Create jQuery Parallax Script

I recently had to work on creating a simple parallax function for some background images on a full-width page. I had seen the parallax at work at sites like Nike’s Better World (which doesn’t seem to be there anymore) and thought it would be way too over the top to implement on any site I’d be a part of, however, with improving technology and forms of parallax becoming more renowned people are expecting to see a little of its magic on websites these days.

(I think it’s increase in awareness may also have boomed with the iOS7 update – for those who have images placed into their phone’s background.)

Anyway, thankfully inserting Parallax code into an existing site isn’t too difficult. I’m appreciative of the crew over at NetTuts with sharing some simple Parallax code as all I did was refactor this so that it didn’t really rely on the data attributes.

So to use my code simply:

  1. Create a div with a class tag for whatever you want to use for your Parallax images on your site
  2. Change the name of the class’ code I have from .CLASS-OF-PARALLAX-IMAGE-HERE to whatever you have inserted into your HTML
  3. Set your div’s CSS height property
  4. …and that’s it!

The script will Parallax the image from top to bottom as you scroll through the window’s viewport. If you want the Parallax to be less intense when you scroll make the div height bigger, if you want the Parallax effect to be more intense make the div height smaller… you get the picture.

The code will similarly work for multiple images containing the same class tag and will also ensure images that appear near the end of the document go from 0% to 100% even though the window viewport has not scrolled to the end of the image.

Anyway, thanks again to Mohiuddin Parekh for the awesome tutorial which helped me to get started, and here’s my resulting code:

$(document).ready(function() {
var $window = $(window);
var wH = $window.height();
var docH = $(document).height();
$('.CLASS-OF-PARALLAX-IMAGE-HERE').each(function(){ // edit the class name of the div containing the parallax image.
var $bgobj = $(this);
$(window).scroll(function() {
var coords, yCoord;
var bgoff = $bgobj.offset().top;
var bgH = $bgobj.height();
var ws = $window.scrollTop();
if ( bgoff > ws + wH ) {
yCoord = 0;
} else if ( ws > bgoff + bgH ) {
yCoord = 100;
} else {
if ( wH + ws > bgoff && docH - bgoff - bgH < wH ) {
yCoord = (ws + wH - bgoff) / (docH - bgoff);
} else {
yCoord = ws / (bgoff + bgH);
}
yCoord *= 100;
}
coords = '50% '+ yCoord + '%';
$bgobj.css({ backgroundPosition: coords });
});
});
});
view raw parallax.js hosted with ❤ by GitHub
Categories
Cloud Apps Software

How To Manage WordPress CSS Using Brackets & Dropbox

Unfortunately Dropbox changed their policy on accessing documents publicly, so this process no longer works. Left for posterity.

A more effective way of managing the stylesheets within WordPress is by using the new Brackets editor and Dropbox.

If you want to be able to manage your CSS styles with git and yet also want to automatically manage the minification of your CSS files as well as the transfer of your stylesheets to your WordPress installations, then read on as to how we manage this.

STEP ONE

First, if you haven’t already got a free copy of Brackets, go and get it. I’ll wait.

STEP TWO

After installing Brackets, click on File > Extension Manager and then select the Available tab. In the search box enter the word Minify and then click the Install button next to the Minifier extension.

Install Minifier Extension Brackets
Install Minifier extension in Brackets

STEP THREE

Copy your existing style.css file from your theme’s WordPress editor and copy its contents into a new Brackets file. When we return to this file we will eliminate the majority of its content, bar the theme’s comment box.

STEP FOUR

Save the new CSS file in Brackets to a location on your computer. I use a location within my Sites folder on my Mac OSX (eg. ~/Sites/location/CSS/)

You should also upload any CSS dependant images into this same directory. My WordPress theme has a couple of little icons which are referenced in its CSS, so I need to create and upload those files into the same area where I have stored my CSS file (eg. ~/Sites/location/CSS/images/).

STEP FIVE

Once you have copied your CSS file, create a minified version of it. In Brackets simply click on Edit > Minify. For ease of automation you can also select Edit > Minify on Save which will save any edits to the initial minified file created.

(I will note that the minified file will need to be created first using Edit > Minify before you can use the Minify on Save command – it doesn’t seem to work if you select it first and then save your CSS file.)

STEP SIX

Ensure you have Dropbox installed and opened and that you have the Public folder synced onto your computer (you can always check by looking into your Dropbox’s settings and on the Advanced tab clicking on the “Selective Sync” button and seeing what is selectively synced from Dropbox to your computer).

We will now symlink the CSS files into this folder. Open up terminal and run the following command:

$ ln -s ~/Sites/location/CSS/* ~/Dropbox/Public/MySite/CSS/

Where ~/Sites/location/CSS/* is the location of your existing stylesheets and images, and ~/Dropbox/Public/MySite/CSS/ is the location of where you would like to have the stylesheets and images publicly accessed. Please note that the last folder in the Dropbox Public folder should not be created – the symlink command should create it for you.

STEP SEVEN

Get the public link from within Dropbox and wrap it in a style sheet link tag.

Public Link Dropbox
Get the public link in Dropbox by right-clicking on folder and selecting Copy public link
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/00000000/css/main.min.css">

Where https://dl.dropboxusercontent.com/u/00000000/css/main.min.css represents your public link from Dropbox.

STEP EIGHT

Copy the stylesheet link tag into an area within your WordPress where you can insert information into your theme’s header.

Check to make sure your stylesheet is loading from this source, by inspecting the header section of your website and identifying the link tag – if in Chrome even select the link to ensure the stylesheet is being loaded.

STEP NINE

Go back to your theme’s WordPress editor and remove all CSS details that have been inserted into your stylesheet from Dropbox. This should just leave you with the theme’s comments identifying the name, author and other details of the stylesheet.

Voila!

Now you can edit your stylesheet directly from your computer and any edits saved are automatically sent to your live WordPress sites! Be careful with this – you may want to implement a versioning control system such as git just to protect anything untoward that may happen.

Categories
Cloud Apps

How To Manage Common StyleSheets for Multiple WordPress Sites

One of the most frustrating aspects I’ve ever had to deal with when managing a site’s WordPress installation is that annoying Editor area. It’s a place where NOBODY should go. Some problems I’ve had over the many years has been accidentally pasting the wrong code into one of the editor files and losing all the information stored.

Perhaps the most common is the style.css file. I even remember for one of my personal sites going to a Google cached area of my site and grabbing my stylesheet from that to paste back into my style.css due to the massive mistake I had made pasting some other code over the CSS file!

Unfortunately while WordPress manages revision history with both Posts and Pages there is nothing native to manage the revision history of edits made to files in the Editor area. So you’ll either have to hunt for a plugin that could do this, or find ways to manage the files yourself.

One such method that I’ve recently had to employ on a client’s site that has multiple installations of several WordPress installations which predominantly all use the same style guide has been managing the style.css file. While each website has a few little differences, managing each style.css has been a nightmare.

So one of the techniques I have undertaken has been to obtain all the common CSS styles between all sites, place that file to a centralised sub-domain I’ve labelled assets and to then manage the minor CSS styles within each site’s own Editor style.css file.

So, for the client with the multiple WordPress installs, site A would have all its theme’s style.css removed (except for the comments as the theme still needs to think it has a stylesheet) and placed within the global header of the site an external stylesheet link to that common file, for example:

<link rel="stylesheet" type="text/css" href="//assets.clientsdomain.com/css/main.css">

Then, within site A’s style.css would be any site specific information, such as links to background images (etc). Site B would then have the same external link in their global header (etc).

It certainly has helped manage not only being able to control the complexity of each site’s differences, but has also helped make global changes should they need to for all sites.

If you’re looking to manage multiple WordPress installations you certainly may want to look at using a technique like this to manage your site’s front-end assets.