See the effect in the photos in the article here:
http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation
Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?
It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above)
Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show!
This functionallity can be found in a jQuery plugin called "Before/After"
Link: jQuery BEFORE / AFTER
You could of course just write your own that isn't dependant on jQuery UI.
;(function($){
$.fn.slidingThingamajig = function () {
return this.each(function(){
var $this = $(this);
$this.find('.handle')
.css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
.on('mousedown', function(e) {
$this.addClass('resizable');
$this.parents().on('mousemove', function (e) {
$('.resizable').css({width:e.pageX - $('.resizable').offset().left});
}).on('mouseup', function(e) {
$('.resizable').removeClass('resizable');
});
e.preventDefault();
});
});
}
})(jQuery);
You would probably need to tweak this a little, but it's mostly all there.
Related
I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.
You can see my work so far here:
http://mantasmilka.com/map/pries-smurta.html
The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.
I've tried working with Javascript and jQuery solutions:
Javascript:
mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"
jQuery:
$('.hide').hide();
setTimeout(function(){
$("#area-kaunas").mouseenter(function(){
$('#Kaunas').show();
});
$("#area-kaunas").mouseleave(function(){
$('#Kaunas').hide();
});
}, 500);
Why not just use hover() inside of jQuery? I'm also unsure why you bind the events after a 500 millisecond timeout?
$('.hide').hide();
$("#area-kaunas").hover(function() {
$('#Kaunas').show();
}, function() {
$('#Kaunas').hide();
});
There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
The problem will always be the compatibility of browsers.
This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)
Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
I have written this function to create a "reveal more" functionality for a card style layout. I originally wrote it to all be within a click function but then the scope changed and I needed to move the commands into their own function, and now the animation is very stuttery to more to ignore. I have a feeling that it has to do with the variable updating while animating and causing a conflict but I'm not sure how to bypass that or to set the variable as a constant after taking one height.
//This function removes the reveal more trigger and slides "new-deals" down to auto height
function revealMore() {
var containerHt = $("#new-deals").children().height; //set animation height for "reveal more" function
//Reveal More function which handles animating container height to that of contained elements and removes the reveal more trigger element
if (($("#new-deals").height) >= containerHt) {
$("#new-deals").animate({height: containerHt}, 400, function() {
$("#new-deals").css({height: 'auto'});
});
$("#new-deals").siblings('.reveal-more').remove();
}
}
$(".reveal-more a").click( function() {
revealMore();
return false;
});
There are a number of things:
Save your $("#new-deals") in a variable.
Use CSS Animations rather than jquery's animate
Use the tranzlateZ(0) hack (if you aren't using a lot of VRAM already).
Check out html5rocks for enlightenment.
I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot:
here is the link : http://www.soleilnoir.net/believein/
Any ideas how to achieve the similar effect?
Thanks
This effect is called parallax.
Here are some links related to this effect:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
You could achieve that through a combination of watching the scroll offset position and then animating different elements based on that scroll position. You would set an event listener and at certain positions fire functions to animate an element onto the page.
If using jQuery, something like this:
$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() {
var scrollPos = $(window).scrollTop();
switch (scrollPos) {
case (500):
doSomething();
break;
case (1000):
doSomethingElse();
break;
}
}
function() doSomething {
// use animate to animate element(s) at 500
}
function() doSomethingElse {
// use animate to animate element(s) at 1000
}
I'm sure that could be optimized better than that, but that should be enough to get started.
I've been developing an Image panning tool, and after a kind member directed me to the draggable plugin for jQuery, I have most of it completed. Right now if the user drags the image (contained inside a div of about 300px by 300px), the image will first flicker, then pan. This problems seems to occur after a mouse down event, on the mouse move event. The image will shift into one of the four corners on mouse move, and moving to certain areas will cause another shift. I haven't been able to find anything through google, and I'm relatively new to jQuery still.
I've uploaded the code here, in case my description is too vague:
http://www.studentgroups.ucla.edu/csa/test/zoom.htm
Any ideas or advice is greatly appreciated!
For one, you've made the image draggable both via the jQuery plugin, and your own code. Your code is changing the background-position of the div, and the jQuery plugin is changing the div's actual position. That's bound to cause some problems.
Also, Draggable's containment parameter seems to be designed for draggable items who are smaller than their parent container, not ones who are bigger, like you're trying to do.
Anyways, here's the working code:
$(document).ready(function() {
$(".draggable").draggable().bind('dragstop', function(e, ui) {
if (ui.position.top > 0) {
$(this).css('top', 0);
}
if (ui.position.left > 0) {
$(this).css('left', 0);
}
var bottom = -($(this).height() - $(this).parent().height()),
right = -($(this).width() - $(this).parent().width());
if (ui.position.top < bottom) {
$(this).css('top', bottom);
}
if (ui.position.left < right) {
$(this).css('left', right);
}
});
});
If you don't need edge-snapping, you can get rid of the .bind() function, and just call .draggable().
$(document).ready(function() {
$(".draggable").draggable();
});