SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Gold Coast, Queensland, Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pricing Table - how do they achieve this fade in/out effect?

    I like the way Shopify's pricing table (http://www.shopify.com/pricing) has the fade in/out effect.

    When you hover over a column in the pricing table, the other columns fade out.

    I was wondering if anyone knew how they achieved this effect? I had a look at their source code and they don't seem to be using javascript?

    Thanks in advance!

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It is JavaScript by the looks of things most likely one of the pre-made script libraries they have linked to.

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Gold Coast, Queensland, Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right okay, thank you. Can I get a hold of this script to use it on my pricing table?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Go for it. It appears they just link the Jquery library and then go to this http://www.modernizr.com/download/#-...mprefixes-load and use that.
    Last edited by TheRaptor; May 3, 2012 at 04:46. Reason: fixed malformed url
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can achieve the effect with CSS3 transitions.

    To get something like the example you linked to, you'd do something like this:

    Code CSS:
    table {
        color: rgb(60,60,60);
    }
     
    table thead {
                background: green;
    }
     
    table:hover {
        color: rgb(10,10,10);
    }
     
     table:hover thead {
      background: yellow;
      -webkit-transition:background 500ms ease-in;  
      -moz-transition:background 500ms ease-in;  
      -o-transition:background 500ms ease-in;  
      transition:background 500ms ease-in;  
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6

  7. #7

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Someone asked for something similar in the forums a few months ago and I put up a couple of rough demos.

    The first one uses transitions as mentioned by kohoutec above.

    http://www.pmob.co.uk/temp/one-on-all-off2.htm

    The next one use some jquery for similar effect.

    http://www.pmob.co.uk/temp/one-on-all-off5.htm

  9. #9
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Gold Coast, Queensland, Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B - I'm trying to get your first example working using CSS3 transitions. My HTML's a little different to yours (see below) and I'm trying to make it work. Any ideas on the CSS I'd use?

    HTML Code:
    <div id="pricing">
    
    		<div class="pricing-columns">
    			
    			<!-- individual -->
    			<div class="column-1 pricing-col column-normal">
    				<ul>
    					<li>
    						<div class="plan-head individual">
    							<ul>
    								<li class="plan-name">Individual</li>
    								<li class="plan-price"><span class="dollar-sign">$</span>49<span class="per-month">/ MO</span></li>
    							</ul>
    						</div>
    						<ul class="features">
    							<li><strong><span class="light-green">Free</span></strong> Setup</li>
    							<li class="alt"><strong><span class="light-green">1</span></strong> Staff Member</li>
    							<li><strong><span class="light-green">Unlimited</span></strong> Users</li>
    							<li class="alt"><strong><span class="light-green">Unlimited</span></strong> Locations</li>
    							<li><strong><span class="light-green">Unlimited</span></strong> Services</li>
    							<li class="alt"><strong><span class="light-green">Unlimited</span></strong> Appointments</li>
    							<li><strong><span class="light-green">20</span></strong> SMS Credits</li>
    							<li class="alt"><strong><span class="light-green">Free</span></strong> Website</li>
    							<li>Online Booking Widget</li>
    							<li class="alt">SSL Secure</li>
    							<li>Unlimited Support</li>
    							<li class="alt">-</li>
    						</ul>
    					</li>
    				</ul>
    			</div>
    			<!-- end individual -->
    		
    			<!-- small business -->
    			<div class="column-2 pricing-col column-normal">
    				<ul>
    					<li>
    						<div class="plan-head small-business">
    							<ul>
    								<li class="plan-name">Small Business</li>
    								<li class="plan-price"><span class="dollar-sign">$</span>99<span class="per-month">/ MO</span></li>
    							</ul>
    						</div>
    						<ul class="features">
    							<li><strong><span class="dark-green">Free</span></strong> Setup</li>
    							<li class="alt"><strong><span class="dark-green">10</span></strong> Staff Members</li>
    							<li><strong><span class="dark-green">Unlimited</span></strong> Users</li>
    							<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Locations</li>
    							<li><strong><span class="dark-green">Unlimited</span></strong> Services</li>
    							<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Appointments</li>
    							<li><strong><span class="dark-green">40</span></strong> SMS Credits</li>
    							<li class="alt"><strong><span class="dark-green">Free</span></strong> Website</li>
    							<li>Online Booking Widget</li>
    							<li class="alt">Individual Staff Access</li>
    							<li>SSL Secure</li>
    							<li class="alt">Unlimited Support</li>
    
    						</ul>
    					</li>
    				</ul>
    			</div>
    			<!-- end small business -->
    			
    			<!-- medium business -->
    			<div class="column-3 pricing-col column-normal">
    				<ul>
    					<li>
    						<div class="plan-head medium-business">
    							<ul>
    								<li class="plan-name">Medium Business</li>
    								<li class="plan-price"><span class="dollar-sign">$</span>199<span class="per-month">/ MO</span></li>
    							</ul>
    						</div>
    						<ul class="features">
    							<li><strong><span class="light-blue">Free</span></strong> Setup</li>
    							<li class="alt"><strong><span class="light-blue">40</span></strong> Staff Members</li>
    							<li><strong><span class="light-blue">Unlimited</span></strong> Users</li>
    							<li class="alt"><strong><span class="light-blue">Unlimited</span></strong> Locations</li>
    							<li><strong><span class="light-blue">Unlimited</span></strong> Services</li>
    							<li class="alt"><strong><span class="light-blue">Unlimited</span></strong> Appointments</li>
    							<li><strong><span class="light-blue">80</span></strong> SMS Credits</li>
    							<li class="alt"><strong><span class="light-blue">Free</span></strong> Website</li>
    							<li>Online Booking Widget</li>
    							<li class="alt">Individual Staff Access</li>
    							<li>SSL Secure</li>
    							<li class="alt">Unlimited Support</li>
    						</ul>
    					</li>
    				</ul>
    			</div>
    			<!-- end medium business -->
    			
    			<!-- enterprise -->
    			<div class="column-4 pricing-col column-normal">
    				<ul>
    					<li>
    						<div class="plan-head enterprise">
    							<ul>
    								<li class="plan-name">Enterprise</li>
    								<li class="plan-price"><span class="dollar-sign">$</span>499<span class="per-month">/ MO</span></li>
    							</ul>
    						</div>
    						<ul class="features">
    							<li><strong><span class="dark-blue">Free</span></strong> Setup</li>
    							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Staff Members</li>
    							<li><strong><span class="dark-blue">Unlimited</span></strong> Users</li>
    							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Locations</li>
    							<li><strong><span class="dark-blue">Unlimited</span></strong> Services</li>
    							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Appointments</li>
    							<li><strong><span class="dark-blue">100</span></strong> SMS Credits</li>
    							<li class="alt"><strong><span class="dark-blue">Free</span></strong> Website</li>
    							<li>Online Booking Widget</li>
    							<li class="alt">Individual Staff Access</li>
    							<li>SSL Secure</li>
    							<li class="alt">Unlimited Support</li>
    						</ul>
    					</li>
    				</ul>
    			</div>

    The CSS I'm using, this is just making the column fade out when I hover over it.

    Code:
    #pricing .column-normal {
        -webkit-transition: opacity 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: opacity 1s ease; 
    }
    
    #pricing .column-normal:hover,
    #pricing .column-normal.over {
        opacity:0.5;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    }
    
    #pricing .column-normal:hover li:hover,
    #pricing .column-normal.over li.over {
        opacity:1.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    }

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I gave you an example and it works when you hover over it.

    You're using the transition property on the normal state, you only declared :hover for IE filters...
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Chnage the code to this:

    Code:
    #pricing:hover .pricing-col {
        opacity:0.5;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    }
    
    #pricing:hover .pricing-col:hover{
        opacity:1.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    }
    I think we can forget about IE6 now but if you want to support it you will need the js that I had in my original and then add the .over rules in place of :hover.

    The way it works is that when you hover over the parent div #pricing it fades out all the elements called .pricing-col (which is all of them). Then when you hover over one specific column it removes the fade from that one element only. The effect you get is that as you hover over one element all the other elements fade out.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I gave you an example and it works when you hover over it.
    I believe the OP wanted the reverse effect where the one you hover doesn't change but all the others blocks fade out

    You're using the transition property on the normal state.
    Transitions work when the element changes so you don't need to declare the transitions on hover specifically and will work fine on the normal state.

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I believe the OP wanted the reverse effect where the one you hover doesn't change but all the others blocks fade out

    Woops! My apologies, I misread.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Gold Coast, Queensland, Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thanks Paul O'B! It's working now and looking great. I appreciate your time in helping me!

  15. #15
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Gold Coast, Queensland, Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One last question, Paul O'B! I would like to add tooltips to each .li within features .ul

    For example, when you hover over each of the following, I would like a tooltip to appear:

    Code:
    <li><strong><span class="dark-green">Free</span></strong> Setup</li>
    <li class="alt"><strong><span class="dark-green">10</span></strong> Staff Members</li>
    <li><strong><span class="dark-green">Unlimited</span></strong> Users</li>
    <li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Locations</li>
    <li><strong><span class="dark-green">Unlimited</span></strong> Services</li>
    <li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Appointments</li>
    <li><strong><span class="dark-green">40</span></strong> SMS Credits</li>
    <li class="alt"><strong><span class="dark-green">Free</span></strong> Website</li>
    <li>Online Booking Widget</li>
    <li class="alt">Individual Staff Access</li>
    <li>SSL Secure</li>
    <li class="alt">Unlimited Support</li>
    What would be the best way of doing this? I can't seem to figure it out with your example. Thank you!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Assuming the spans were the tooltips just do something like this:

    Code:
    .features{width:15em}
    .features li{
    	position:relative;
    	zoom:1.0;/*ie hack */
    	cursor:pointer;
    }
    .features li span{
    	position:absolute;
    	left:-999em;
    	border:1px solid #0o0;
    	background:red;
    	color:#fff;
    	padding:5px;
    	width:100px;
    }
    .features li:hover span{left:100%}
    (not IE6 compatible - you would need to hover an anchor instead of a list for ie6 to work)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •