Simple Optimized Parallax

Parallax – you love it or you hate it, but web designers will incorporate it into new designs regardless. This web design trend has been all the rage over the past few years, with countless javascript libraries existing to help make things a bit easier. However, it can be difficult to customize them to your liking, and sometimes you just want something a bit more lightweight.

In a recent project I ran into something that I hadn’t done before. The designs provided were very precise, but they also were going to be content managed. They wanted parallax on a bunch of the items on screen, but didn’t want the parallax to break their precise designs. With all of the javascript libraries I tried, parallax was calculated by how far you have scrolled down the page, with the transition distance based on that height. This is great and can look cool, but if you have a site of variable height due to being content managed, this wont work. If the page is modified to be shorter or longer than it was when you designed it, by the time you scroll to that parallax element it may be a lot higher or lower than you had intended it to be. I needed a better solution, so I made my own little parallax function for my project utilizing a little jQuery function called isOnScreen, which returns true if a given element has at least 1 pixel within the viewport.

Here’s what I came up with:

$(window).scroll(function(){
  $('.parallax').each(function(){ 
    if ($(this).isOnScreen()) {
      var firstTop = $(this).offset().top;
      var winScrollTop = $(window).scrollTop();
      var shiftDistance = (firstTop - winScrollTop)*0.2;
      $(this).css({"transform": "translate3d(0px, " + shiftDistance + "px, 0px)"});
    }
  });
});

First, I set everything up to run on window scroll. I have attached a parallax class to the element I want to be affected by the parallax effect. Then, I check to see whether or not the element is within the viewport. This means I can be more precise with my parallax effect because I know exactly when it is engaged. I then get the distance of the element to the top of the page, the distance of scroll from the top of the page, and then calculate a distance to shift the element based off of those two variables combined with a multiplier, which determines scroll speed. I then simply apply a translate3d with that shift distance to move the object. This allows us to only run parallax on that element while it’s on screen, optimizing resources for the page and keeping the animations clean. I use transform3d in this case (as opposed to transformY) to tell the browser to engage the graphics card, if possible, resulting in a buttery transition.

This was a pretty easy approach to parallax that I hadn’t used before, and hopefully will help make your next project go a bit smoother.

Happy coding!

Can I add custom styles to my embedded Twitter timeline?

Want to customize your twitter timeline to the branding of your website?
Need to delete the media from showing in the embedded feed?
With this simple function, you can customize all kinds of styles to have it fit in seamlessly with your website.

The HTML for the Twitter Feed:

<div class="twitter-block">
<a class="twitter-timeline" data-width="270" data-height="300" data-link-color="#000" data-theme="light" href="https://twitter.com/YourTwitterHandle" data-chrome="noheader transparent nofooter nofooter noborders">Tweets by YourTwitterHandle</a>
</div>

The javascript/jquery for the Twitter Feed:

jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
  //function call to override the base twitter styles
  customizeTweetMedia();
 });

 var customizeTweetMedia = function() {

  //overrides font styles and removes the profile picture and media from twitter feed
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', 'Raleway');

  //also call the function on dynamic updates in addition to page load
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
   customizeTweetMedia(this);
});
}

Have questions? Comment below!

Why does IE6 Double My Margins?

If you compare your site in multiple browsers and find that the margins are twice as big in IE6, you’ve run into a big called the double margin IE6 issue. A known issue, it happens when you style a margin onto a floated element. Luckily it’s an easy fix: add the style attribute “display:inline” to the column with margin.

Then your IE6 version should obey your stylistic vision. Unless of course you have more style problems, but at least this won’t be one of them…

CSS: Anchor Tag and Hidden Overflow

Having an anchor within a div that has the overflow attribute set to ‘hidden’ via applying the equal height column method creates a unique problem.  When selecting an anchor, the columns get “chopped off” at the top as if the entire div moved up and is chopped because the overflow = hidden property of the container.
The culprit of this issue lies within the column that has the structure below:

padding-bottom: 2000em;     /* X + padding-bottom */
margin-bottom: -2000em;     /* X */

When the named anchor is clicked,  the overflow:hidden atrribute and the above CSS structure kills the layout.
So if you need anchor tags in your site, avoid the equal height column method, there are other ways to achieve the same thing.

If interested, here’s some documentation on the problem.  Click here