How is JS used to create the effect here?

Discussion in 'JavaScript' started by serialentre, Feb 8, 2015.

  1. #1
    Hi all,

    I am learning to recreate this about us page.

    When user hovers over the profile of a member, the rest of the page turns black and white, and the active profile has a hidden box that displays.

    I turned off JS on chrome, and the effect stopped working.

    Does anyone know how the effect is created with JS, and probably a little bit of CSS?

    I can't seem to the link the page but it's Khan Academy's About Us Page. Sorry about that.

    Appreciate your help.
     
    serialentre, Feb 8, 2015 IP
  2. edduvs

    edduvs Well-Known Member

    Messages:
    394
    Likes Received:
    31
    Best Answers:
    3
    Trophy Points:
    160
    #2
    Do you have any link / demo you can give us so we know what are we dealing with ?
     
    edduvs, Feb 18, 2015 IP
  3. Dominic Ceraso

    Dominic Ceraso Member

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #3
    please submit a link to the site so we can help.
     
    Dominic Ceraso, Feb 21, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    He's talking about this page here:
    
    http://www.khanacademy.org/about/the-team
    
    Code (markup):
    - it's a nifty approach, and mostly done in CSS, not javascript. Have a look at transitions and filters in CSS.
     
    PoPSiCLe, Feb 21, 2015 IP
  5. edduvs

    edduvs Well-Known Member

    Messages:
    394
    Likes Received:
    31
    Best Answers:
    3
    Trophy Points:
    160
    #5
    @PoPSiCLe, there's no CSS approach for siblings selectors. So there must be some JS.

    The idea is like this:
    $('div').on('hover').removeClass('disabled').siblings().attr('class','disabled');
    Code (markup):
    As for the CSS:
    .disabled { -vendor-filter: grayscale(100%); /* with */ -vendor-transition: .2s filter ease; }
    Code (markup):
    There is an situation in which you could set all divs initially grayscaled and, on .member:hover you could switch it's grayscale to 0% with a transition of .2s or w/e you're looking for.
     
    edduvs, Feb 21, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Uhm, what? Granted, no sibling selectors, but you use inheritance. Some js is probably involved, that is true, but most of the actual looks is css, minor class swaps with js on hover would do the trick.
     
    PoPSiCLe, Feb 22, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    No, you had it right -- there is NO reason for THAT to need JavaScript other than developer ineptitude; hover the parent wrapper to set all the children to their grayed-out state, hover on the individual item to show it's coloured version and show an absolute positioned child containing the text.

    NOT rocket science, and NOT a job for scripttardery. You don't need class swaps to do THAT. The only reason you'd need scripting is if you still give a flying purple fish about IE6/earlier, in which case that's a .htc file's job.
    This is a bit rough and untested, but you should get the gist of it:

    <div class="peopleGallery">
    	<div style="background-image:url(images/joe_mono.png)">
    		<img src="images/joe_color.png" alt="Joe Sixpack" />
    		<div>
    			<h2>
    				Joe Sixpack<br />
    				<small>Resident Redneck</small>
    			</h2>
    			<p>Run your mouth about Joe here</p>
    		</div>
    	</div>
    	<div style="background-image:url(images/susie_mono.png)">
    		<img src="images/susie_color.png" alt="Susie Sunshine" />
    		<div>
    			<h2>
    				Susie Sunshine<br />
    				<small>Inflate cranium to one standard pressure</small>
    			</h2>
    			<p>She is my sunshine, my only sunshine</p>
    		</div>
    	</div>
    </div>
    Code (markup):
    /* assumes images are 160x224 */
    
    .peopleGallery {
    	padding:16px 0 0 16px;
    }
    
    .peopleGallery div {
    	float:left;
    	overflow:hidden;
    	padding:16px;
    	margin:0 16px 16px 0;
    	background-position:16px 16px;
    }
    
    .peopleGallery div:hover {
    	overflow:visible;
    }
    
    .peopleGallery img {
    	webkit-transition:opacity 0.3s;
    	transition:opacity 0.3s;
    	opacity:1;
    }
    
    .peopleGallery:hover img {
    	opacity:0;
    }
    
    .peopleGallery img:hover {
    	opacity:1;
    }
    
    .peopleGallery div div {
    	position:absolute;
    	top:256px;
    	left:16px;
    	width:160px;
    	padding-bottom:16px;
    	background:.FFF;
    }
    Code (markup):
    Again, untested, but should do the job. Of course, there's no keyboard navigation and it's the type of "gee ain't it neat" BS that really has no business on a website in the first place, but hey: your funeral not mine.

    JS for nothing and your scripts for free; that ain't working, that's NOT how you do it. Lemme tell ya, these guys ARE dumb.
     
    deathshadow, Feb 22, 2015 IP
  8. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #8
    Thanks all! Will give the codes a try in abit!
     
    serialentre, Mar 9, 2015 IP