javascript - Can you fix a div and make it change opacity, size and position as you scroll with CSS3 -

javascript - Can you fix a div and make it change opacity, size and position as you scroll with CSS3 -

i'm not sure how search question. i'm trying figure out how website achieving fixed opacity/size changing effect on table: http://sqlzoo.net/wiki/select_within_select_tutorial . if scroll downwards you'll see effect on table. when hover on it pops out having info more visible.

the thing can think of using fixed div when scrolled past point triggers jquery ui event shrinks while decreasing opacity , on hover event reverses effect.

achieving animation in way described above seems inefficient , i'm not sure if more (or all) can done css3. can accomplish effect shown on page provided or in css3.

also looked @ source of page , couldn't fish out of css , scripts include.

here's fiddle of have far. haven't started on scrolling yet:

html

<div id="stuff">blahblah</div>

css

div { width:250px; height:250px; border:2px solid #a1a1a1; }

javascript

$( "#stuff" ).click(function() { $( "#stuff" ).animate({ width: "20%", height:"20px", opacity: 0.4 }, 1500 ); });

http://jsfiddle.net/thed0ctor/1kx5jg1e/

you combination of css3 transform , bit of javascript / jquery:

demo fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/

relevant css:

#hanger { width: 200px; height: 200px; background-color: #00f; position: fixed; /* position fixed of import */ top: 10px; right: 10px; opacity: 1; transition: 0.5s all; /* animate transitions */ } #hanger.dim { /* style create appear dimmed */ transform: scale(.75); /* create smaller */ opacity: 0.5; /* create dimmer */ } #hanger.dim:hover { /* alter on hover when dimmed */ transform: scale(1); /* original size */ opacity: 1; /* original opacity */ }

relevant jquery code:

$(window).on("scroll", function() { /* when window scrolls, */ if ($(window).scrolltop() > 50) { /* check if scrolls more 50 pixels */ $("#hanger").addclass("dim"); /* apply class dim */ } else { $("#hanger").removeclass("dim"); /* otherwise remove class dim */ } });

hope helps.

.

javascript jquery html5 css3 jquery-ui