06 Jul

Creating Scroll-based Animations using jQuery and CSS3

Creating movement is great way to provide an interesting and interactive experience for your viewers. With modern sites providing a greater deal of interactivity, it’s becoming increasingly expected that even simple websites will offer some level of animation / movement to engage their visitors.

Today I will be outlining a technique that you can adapt to your web projects - triggering animations when scrolling into a pre-defined region. These animations will be created using CSS transforms and CSS transitions. We will also use jQuery to detect when the elements are visible and to add/remove the appropriate classes.

For those who want to see examples of this in action, you can jump straight to the demos.

Why Trigger Animations on Scroll?

The main reason we would want to trigger animations on scroll, is so that they activate just as the user scrolls an element into view.

We might want to fade elements in, or provide an interesting transformation and these would only make sense when the user can actually view them.

Animating with CSS or with jQuery?

There are pros and cons to each approach. jQuery (read JavaScript) allows you to animate things that CSS doesn’t (such as the scroll position, or an element’s attributes), whilst CSS animations can be very attractive for developers who prefer putting all of their animation and presentation logic in the CSS layer.

I will be using transformations via CSS, however there are always variables to consider depending on your situation. I would take the following factors into account:

Browser Compatibility

Since our solution will be based on transformations, our browser compatibility will be limited to those that support either 2D transformations or 3D transformations.

All modern browsers will support 3D transforms and several of the older legacy browser such as Internet Explorer 9 and Opera 11.5 will support 2D transforms. Overall support for both desktop and mobile browsers is comprehensive.

jQuery’s animate method works in any (sane) browser, provided you are using the 1.X version of the library. jQuery 2.X removed support for IE8 and below, so only use this if you don’t need to support legacy browsers (lucky you!).

Speed

We want fast and smooth animations, especially when it comes to mobile devices. As such its always best to use transitions and transformations where possible.

The examples will use 3D transforms with 2D fall-backs for older browsers. We want to force hardware acceleration for speed, so a 3D transformation is a must (we will be using translate3d along with other functions that cause GPU accelerated rendering).

jQuery’s animate method is considerably slower than a GPU assisted transformation, so we will just be using jQuery for our event handling / calculations, not for our animation itself (as we want them to be as smooth as possible).

Side Note

We all know that jQuery !== JavaScript, right? Well, it turns out that using vanilla JS for animations might not be such a bad an idea after all. Whilst that is beyond the scope of this tutorial, here are two excellent articles on the subject for those who are interested in finding out more:

CSS vs. JS Animation: Which is Faster? Myth Busting: CSS Animations vs. JavaScript

Now back to the show …

Detecting Animation Elements in View

The overall point of this technique is to look through all of our elements we marked as animatable and then determine if they are currently within the viewport. Let’s step through how we will achieve this:

Selector Caching

Scrolling is an expensive business. If you attach an event listener to the scroll event, it will fire many times over whenever a user scrolls the page. As we will be calling our dimension / calculation functions whenever a user scrolls, it is a good idea to store the elements returned by our selectors in variables. This is known as selector caching and avoids us querying the DOM over and over again.

In our script we will be referencing both the window object and the collection of elements we want to animate.

[code language="js"] //Cache reference to window and animation items var $animation_elements = $('.animation-element'); var $window = $(window); [/code]

Notice the dollar sign in front of the variables. This is a convention to indicate that they hold a jQuery object, or collection of objects.

Hooking into the Scroll Event

Next, we create our event handler that listens for the scroll event. This will fire when we scroll the page. We pass it a reference to our check_if_in_view function (which we’ll get to in a minute). Every time the scroll event is fired, this function will be executed.

[code language="js"] $window.on('scroll', check_if_in_view); [/code]

Continue reading %Creating Scroll-based Animations using jQuery and CSS3%

06 Jul

What a CSS Code Review Might Look Like

Many programming languages go through a code review before deployment. Whether it's a quick once-over, in-depth peer review, or complete unit testing, code reviews help us release code into the wild with confidence.

I started to imagine what a CSS code review might look like. CSS can be written in a number of ways, and the best way is often subjective to the project. I'm definitely not trying to get dogmatic with a post like this, but instead lay the …

What a CSS Code Review Might Look Like is a post from CSS-Tricks

06 Jul

Building a VPS with WordPress on a LEMP Stack

With site performance a key metric in Google’s ranking algorithms, more WordPress users are turning to dedicated, managed WordPress hosting such as WP Engine, Media Temple or SiteGround.

However, these can be expensive solutions for some, with costs starting at ~$30/site per month.

If you’re comfortable with basic server administration and WordPress, it’s possible to setup your own, inexpensive hosting for small WordPress websites, that matches the performance of managed WordPress hosting providers using a LEMP Stack (Linux, nginx, MySQL, PHP).

Creating a DigitalOcean Virtual Private Server (VPS)

This article uses DigitalOcean, but you can equally use services such as Linode, Vultr or a number of other providers. The other sections of this guide will equally apply, regardless of who you're using.

Continue reading %Building a VPS with WordPress on a LEMP Stack%

06 Jul

Rapid Prototyping Compositions with Adobe Comp CC (iPad app)

Everything is moving towards speed and mobility. Many people, including designers are at least augmenting their desktop and laptop computers with mobile devices such as tablets. With this being said, more companies are focusing on apps you can use to increase your productivity.

Imagine sitting on the subway on the way back to your office and creating a mockup of a website along the way.

Imagine having an idea for a print poster, and getting the layout put together while you're in transit. When you get back, you can bring your idea into your more powerful devices for better design & development. In comes Adobe Comp CC, an app focused on creating quick prototyping on your iPad. Now, you can just right into your ideas and start fleshing them out.

Premade Layouts

The great thing about Adobe Comp CC is that it's free. Search for it on the App store, and download it without paying a penny. Then, install it and fire it up to get started immediately. When you start the app, you have three options to choose from. You can select Mobile, Print, or Web, and they have pre-made layouts set up for you.

Gestures

You can draw your layouts with simple gestures. Everything is simplified, to make it quick and easy to draw even complex shapes and useful design objects. For example, you can draw a square with a circle in one of the corners to create a rounded rectangle. A circle or a rectangle with an x over it creates an image box or a circular image box. You can see the list of gestures, shown in the screenshot above.

Options

The gear icon in the top right corner of the app gives you the option to choose from different document sizes. You don't have to simply remember common document sizes. Adobe has put together a lot of common options for you. You can start with a variety of iPhones, iPads, letters, and web sizes. It even lists the pt and pixel sizes below each option.

Editing Premade Layouts

Moving around the canvas is as simple as swiping, pinching to zoom, and spreading your fingers apart to zoom out, just like any other app. It's even more important in an app like this, because of the simple refines you'll need to make. You also may have small elements in your design that you need to edit. You can tap an element to edit it, and hitting the + symbol below a premade layout allows you to make a copy. I'd make a copy before making any edits.

Once you're into the layout, you have several different options. You can select elements simply by tapping. Also, you open up more options, such as shapes you can make, as well as text, and photos. These menus open up even more options to work with.

Shapes

You can choose from a collection of basic shapes such as circles, rectangles, and horizontal & vertical lines. You can also bring in any custom shapes libraries you have stored in the Creative Cloud.

Text

Just like a typical design program, you can have presets for type. You can control whether certain text is in headline format, sub headline and paragraph text.

Continue reading %Rapid Prototyping Compositions with Adobe Comp CC (iPad app)%

06 Jul

WebSockets in the Ruby Ecosystem

Ruby is learning to love WebSockets What the heck is a "WebSocket", exactly? Some of us have heard about the changes that are coming to Rails with regard to WebSockets (e.g. Actio...
06 Jul

CakePHP 3.0: Powerful PHP web app framework

CakePHP is a powerful framework for building web apps, simpler, faster, and with less code. It includes translations, database access, caching, validation, authentication, and more, requires no configuration, and has built-in tools for security.
06 Jul

250 Awesome Vintage Logos, Labels and Badges – only $10!

NOW ON: 250 Awesome Vintage Logos, Labels and Badges - only $10!Expires: July 13, 2015, 11:59 pm ESTIf you want your designs to feature a clear, professional "voice," you'll need some high-quality elements. This super bundle from DesignDistrict certai...