RSS

3D Button Parallax

08 Sep

The introduction of CSS3 resulted in the explosion of beautiful and interesting buttons, styled with gradients, shadows, and borders – often to achieve a 3D effect. The problem with such 3D buttons is a static perspective. The 3D is not always very convincing when you can only see its front and perhaps a bit from an edge or two – even when the page moves and the position of the button on the page moves.

Fortunately, we can achieve a realistic perspective effect with the help of 3D transforms to adjust the sides of the buttons. We can do this without modifying existing HTML, by using pseudo elements for the sides. Then bring forward the button itself withtranslateZ.

Before we start, we must first solve a problem. The perspective origin point is usually set at the vertical and horizontal center of the element. This means that when we set it based on the body we will get something like this:

By setting the height of the body to be 100%, we can fix the perspective origin point to the center of the viewport like this:

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow-y: scroll;
}

For a simple <button>, here’s the CSS:

button {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  border: 0;
  background-color: blue;
  background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.15) 50%, transparent);
  color: #222;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
}

button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: 0% 0%;
  transform: rotateY(90deg);
}

But how do we get 4 sides for each button with just 2 pseudo elements? JavaScript! if we want to avoid adding extra wrappers to each button (we do) we need scripting to move the top side down and the left side to the right depending on where the button is relative to the user’s viewport. The script for switching the top with the bottom side of the button is pretty straightforward – changing top/bottom or right/lest sides occurs only on load and on resize, and top/bottom only on scroll:

$(window).on("load resize", function() {
  topHalf();
  leftHalf();
});

$("body").scroll(function() {
  topHalf();
});

function topHalf() {
  $("button").each(function() {
    var self = $(this),
        offTop = self.offset().top,
        scrTop = $(window).scrollTop(),
        halfWindowHeight = ($(window).height())/2;

    self.toggleClass("top-half", (offTop - scrTop) < halfWindowHeight);
  });
}

function leftHalf() {
  $("button").each(function() {
    var self = $(this),
        offLeft = self.offset().left,
        halfWindowWidth = ($(window).width())/2;

    self.toggleClass("left-half", offLeft < halfWindowWidth);
  });
}

Editor’s note: This could certainly be refactored a bit to lend structure and gain some efficiency. Feel free to fork the Pen below and have a go!

Some new classes will help position the sides:

button.top-half::before {
  top: auto;
  bottom: 0;
  transform-origin: 100% 100%;
  transform: rotateX(90deg);
}

button.left-half::after {
  left: auto;
  right: 0;
  transform-origin: 100% 100%;
  transform: rotateY(-90deg);
}

Keep in mind that if you use classes to float the buttons (for example .pull-left and.pull-right like in Twitter Bootstrap) you will know where each button is positioned horizontally and thus be able to skip half of the JavaScript code.

Here’s a styled demo to play around with. It has an animated push-down effect for the buttons and includes some other 3D elements that don’t requre any JavaScript:

A similar technique can also be used to replicate the 3D Inset Parallax Effect in a very rough way. It’s a bit more complex, but doesn’t require any JavaScript:

Advertisements
 
4 Comments

Posted by on September 8, 2013 in CSS, HTML

 

4 responses to “3D Button Parallax

  1. top eleven hack online tools for football manager hack

    September 8, 2013 at 5:37 am

    Principal cheat top eleven but not just will provide hacks,
    cheat top eleven, robots not to mention tools. Dont you just look at the “dark part” as will a
    few of everyone tell you. All of us is also increasing anti-mapcheat top eleven with regard to computer games, anti-cheats, the best courses,
    frauds as well as intrusions. Typically the plan editting
    in addition to chart unprotecting facilitates
    many clients using abilities. Every single day there
    is newer clients inquiring what they desire.
    We all no need to job only for wonderful, everyone are employed
    by a persons. Smart to ask and even anti-top eleven football manager
    hack, then this group will always make the effor to develop it all making this consumer.
    Similar develops with visitors that wants cheat top eleven,
    power tips, programs and even programs.

     
  2. herbal highs list

    September 12, 2013 at 6:10 am

    Hey! This is my first comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your
    blog posts. Can you recommend any other blogs/websites/forums that cover the same topics?
    Thanks for your time!

     
  3. cheat top eleven

    September 13, 2013 at 6:30 pm

    Hopefully I’ve got served resolution anything you concerning the system.
    There was a lot of stresses once this software system
    has been respectable and also other put their hands up bad deal.
    Efficiently it’s not and its very hard to believe a computer software could
    do more or less everything. Have you learnt what quantity of cash we could trim
    expenses on Leisure fee’s solely. Bring to mind one
    simple software program you will save with numerous mmorpgs.
    The one price you will ever have to be concerned with
    might be obtaining ignore cds. Precisely what do you think?
    In case you feal that that you’re having to pay excessive sum relating to game titles then you need to
    consider the only alternate that could help you dozens.
    I actually was hoping clarified every one of your concerns plus served you are the suitable
    final choice.

     
  4. 情趣用品

    September 16, 2013 at 4:30 am

    Hey There. I discovered your weblog the use of msn. That is a really well written article. I’ll be sure to bookmark it and return to learn more of your helpful information. Thanks for the post. I will definitely return.

     

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: