The multiply effect is a lie

[Fun with code is a multi-part series. Read the rest.]

This year’s fabulous Big Omaha website is showcasing a little visual trick. Early on, when Nathan and I were discussing the intended visuals on the site, I failed to notice he was using the multiply effect in Photoshop to achieve the appearance of the red overlays – and he went forward working that into the design. To my dismay, when I went to add the red layers by simply overlaying a slightly transparent layer of red over the top of the cow-skin background, it wasn’t even close.

The transparent layers would have made using a simple parallax background really easy to implement, and now, none of that was going to work. So I had a brand-new problem to solve.

I certainly wasn’t going to go back and tell Nathan to start over because I couldn’t figure out how to get everything to look right and work properly. I had to rethink how I was handling the background effect. If I couldn’t get an actual multiply effect overlay, I figured I could certainly fake it, so I set out to do just that.

Overlay WinThe intended appearance of the overlay.
Overlay FailThe overlay effect when attempted with a simple transparent layer.

In Photoshop, I took the cow-skin background image I had already output and made an exact copy of it with the red overlay multiply effect on top of it. Since the basis of most parallax scrolling background effects is to first set the background scroll property to “fixed”, no matter where the element falls on screen, it lines up just right! All I needed to do was set the CSS class of the wrapper element to indicate whether I wanted each particular section to appear in full color, or as the red variant.

Now, to create the parallax, just a little javascript to get all of the elements and change all of their background positions in sync with one another while the user scrolls.

jQuery(document).ready(function($) {
	$cowskin = $('.rubylith,.saranwrap');
	$(window).scroll(function() {
		$cowskin.each(function ( i, v ) {
			scrolltop = $(window).scrollTop();
			scrollchange = Math.round( scrolltop * -0.5 );
			$( v ).css({'background-position': 'center ' + scrollchange + 'px'});

Simple; now for every pixel the user scrolls, the background appears to move only half of a pixel, giving the desired effect. Check it out in action at bigomaha.com

13 Oct 2019

‘Enter’ to submit

SVG is a thing now; you should use it.

With all this talk about resolution independence and responsive design, how many times have you built something for the internet and thought, hey, it sure would be nice if I could have a vector graphic here instead of a series of pre-saved bulky images switching in and out some way or another? For example: every single logo ever, social media buttons, line art of any type. If your concern is responsiveness and you’re using images, then you’re in for trouble.…

Fun with code at Meet The Pros

Last week I spoke at Meet The Pros and, not surprisingly, my presentation was titled Fun with code. When I had volunteered to speak way back when, I envisioned myself talking about a bunch of code stuff and making it really interesting and fun. If you’re a regular reader of the Fun with code series here, you probably don’t remember any of it being terribly interesting or fun. It may be really helpful and useful, but it’s certainly too specialized…

Detecting a retina display

A few weeks ago, we announced that oxidedesign.com was fully retina optimized. For those of you who do not know, a retina display is a monitor or device that has more pixels per inch of space than a normal display. This basically means it is harder to tell where the edges of pixels are, allowing for an extremely crisp and clean appearance. This works great on the web for things like text, but a problem arises when displaying images. Since…

Access Restriction for Live Staging Sites

We have a lot of active, ongoing projects here at Oxide, especially when it comes to the web. In order to build and make changes to sites which can still be viewable for internal or client review, we run live staging versions of them on subdomains of oxidedesign.com. Don’t bother digging around looking for a secret gem though, because you can’t get in. At least, not anymore.

Extend post types with custom taxonomies

For part two of this series, I want to show how I extended the default functionality of WordPress custom post types and taxonomies in order to build a user-friendly way to associate posts from one type to another. To recap, in part one, we set up a couple of custom post types. To start this tutorial we’ll be using a very similar function to set up the taxonomy which we will leverage for post-to-post association.

Using custom post types for WordPress

Over the past few years, I’ve written quite a bit of code and I’ve had a lot of fun doing it. I’ve got tons of useful snippets in my back pocket and I’m just itching to share them with the world. I’m going to take this opportunity to start a new series here on the Oxide blog, Fun with code. To get things started, let’s outline a problem and uncover a situation which creative code can solve.