I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it becomes too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: all 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: all 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>
Since you're using transform: scale() for the zoom effect it's faster and more correct to modify transform-origin to change the center point of the zoom effect on mousemove:
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
$('.image').on('mousemove', function(event) {
// This gives you the position of the image on the page
var bbox = event.target.getBoundingClientRect();
// Then we measure how far into the image the mouse is in both x and y directions
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
// Then work out how far through the image as a percentage the mouse is
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
// Then we change the `transform-origin` css property on the image to center the zoom effect on the mouse position
//event.target.style.transformOrigin = xPercent + '% ' + yPercent + '%';
// It's a bit clearer in jQuery:
$(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
// We add the '%' units to make sure the string looks exactly like the css declaration it becomes.
});
// If you want it to automatically trigger on hover
$('.image').on('mouseenter', function() {
$(this).addClass('zoom-in');
$(this).removeClass('normal-zoom');
});
// and stop when not hovering
$('.image').on('mouseleave', function() {
$(this).addClass('normal-zoom');
$(this).removeClass('zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: transform 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: transform 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>
You can use the mousemove event listener on the image with class .zoom-in to change the left and top CSS params. Make sure to set position:relative; on the image.
Example:
$(document).on('mousemove', '.zoom-in', function( event ) {
$(".text").text(event.pageX + ", " + event.pageY);
var positionLeft = event.pageX - $(this).width()/2;
var positionTop = event.pageY - $(this).height()/2;
$(this).css({'left': positionLeft, 'top': positionTop});
});
Here is a fiddle.
Related
You are my last hope.
I decided to implement an update to the Page of my brothers store. One of the new features I wanted was a (simple^^) parallax background with two layers to create a kind of 3d-feeling while scrolling.
First I got it to work with a little bit of JS, adjusting the position on scroll events with a multiplicator. Then I noticed that the performance of the background is sticky, laggy, stuttering and doesn't really look well in Firefox. As far I could see this was because of the "Asynchronous Panning"-Feature of the browser.
Link to the JS-Version of the page update
So after a little time with the search engine of my choice I saw no option to disable or work around that feature and decided to start working on a CSS-only implementation on that site.
And guess which browser is not able to display everything as wanted? Firefox!
First I stuffed all my content into divs, so that - so my hope - a mutual parent div would enable me to use "height: 100%;" to scale the div's together. That didn't work as the the background was overflowing over my content. The problem was: Because I wanted the background images to repeat on the y-axis AND to move with a slower speed as the content I had to define a specific height of the background divs which is larger than the content height.
I even tried to set the height of the background divs with jQuery by
$(#background).height($(.main_content_container).height());
but the background always just turned out to be too large or too short.
After my idea with the parent div didn't work I started to work with the body and my content container itself to generate perspective. Could this have worked when i would've set all height to 100%? When I set height: 100%; I always got my viewport's height...
What I got now:
Creating the perspective and applying transform with body causing the overflow-y:
body {
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
position: fixed;
height: 100vh;
transform-style: preserve-3d;
align-items: center;
align-content: center;
align-self: center;
text-align: left;
width: 100vw;
}
#background {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-2px) scale(3);
width: 100vw;
background-size: 100vw;
background-image: url(websiteimage.png);
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
}
#background2 {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-3px) scale(4);
background-image: url(websiteimage2.png);
background-size: 100vw;
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
opacity: 80%;
}
div.main_content_container {
transform: translateZ(0);
height: 100%;
background-color: transparent;
color: Silver;
max-width: 100vw;
width: 70%;
min-height: 100%;
}
In-vivo page (only startpage and only in dark mode is "working" at the moment)
Why does Chrome cut off the bottom of the background divs just as wanted and Firefox just create visible overflow?
Is there any chance to get one of my solutions to work fluent and formatted in Firefox?
I'm puzzling around for days now and thankful for every kind of idea/suggestion.
PS: This is my first post on StackOverflow. I hope I provided enough info and didn't break any rules as this site often helped me out of the hell of amateur webdesign.
PPS: I know my code is kind of a mess after all that puzzling but I'm playing around for days now
For all having the same problem:
I decided to try out several tweaks on my JS-implementation again and reached an improvement by adding
position: fixed;
background-attachment: fixed;
background-position: top;
to the background layers.
I also added a script by keith clark but I'm not sure if it takes any effect:
/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
var root = doc.documentElement,
scrollbarWidth, scrollEvent;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
Still no improvement on iOS Safari and mobile Firefox afaics.
Edit:
Thats the jQuery-function causing the effect here:
$(function() {
$(window).on('scroll', function() {
$('#background').css('background-position-y', $(window).scrollTop() * -.15);
});
});
$(function() {
$(window).on('scroll', function() {
$('#background2').css('background-position-y', $(window).scrollTop() * -.09);
});
});
I'm trying to find a nicer solution for the following situation:
I have a parent element with dynamic dimensions, positioning and hidden overflow, it contains a scrollable child inside it.
When the user scrolls down to end of the child, the parent is reducing height and the child follows the change with animated scrolling. In the other way (scrolling up), the parent expanding height and scrolling of child follows it.
Here is a Fiddle that demonstrates what I've tried:
$(".scroller").on("scroll", function() {
var sh = this.scrollHeight;
var oh = this.offsetHeight;
$("span").html(this.scrollTop);
if (sh - oh - this.scrollTop < 40 && !$(".element").hasClass("reduce")) {
$(".element").removeClass("expand");
$(".element").addClass("reduce");
} else if (sh - oh - this.scrollTop < 40 &&
$(".element").hasClass("reduce") && !$(".element").hasClass("calm")) {
$(".element").one("animationstart webkitAnimationStart oAnimationStart MSAnimationStart", function() {
$(".scroller").animate({
scrollTop: sh - oh + 40
}, 300, "linear");
$(".element").addClass("calm");
});
} else if (sh - oh - this.scrollTop > 40 &&
$(".element").hasClass("reduce") && $(".element").hasClass("calm")) {
$(".element").removeClass("reduce");
$(".element").addClass("expand");
$(".element").one("animationstart webkitAnimationStart oAnimationStart MSAnimationStart", function() {
$(".scroller").animate({
scrollTop: sh - oh - 150
}, 300, "linear");
$(".element").removeClass("calm");
});
}
});
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: blue;
}
.element {
font-size: 20px;
line-height: 2em;
width: calc(100% - 4em);
height: calc(100% - 2em);
transform: translate( -50%, calc(-50% + 1em));
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background: white;
}
.scroller {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 1rem;
overflow: auto;
}
.reduce {
animation: reduceSize 300ms 1 ease forwards;
}
.expand {
animation: expandSize 300ms 1 linear forwards;
}
#keyframes reduceSize {
0% {
transform: translate( -50%, calc(-50% + 1em));
height: calc(100% - 2em);
}
100% {
transform: translate( -50%, -50%);
height: calc(100% - 4em);
}
}
#keyframes expandSize {
0% {
transform: translate( -50%, -50%);
height: calc(100% - 4em);
}
100% {
transform: translate( -50%, calc(-50% + 1em));
height: calc(100% - 2em);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span></span>
<div class="element">
<div class="scroller">
Mr. Worf, you do remember how to fire phasers? Could someone survive inside a transporter buffer for 75 years? Computer, belay that order. The look in your eyes, I recognize it. You used to have it for me. For an android with no feelings, he sure managed
to evoke them in others. The game's not big enough unless it scares you a little. Did you come here for something in particular or just general Riker-bashing? My oath is between Captain Kargan and myself. Your only concern is with how you obey my
orders. Or do you prefer the rank of prisoner to that of lieutenant? The Federation's gone; the Borg is everywhere! Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close
to us, human history would be far less bloody. Travel time to the nearest starbase? The Enterprise computer system is controlled by three primary main processor cores, cross-linked with a redundant melacortz ramistat, fourteen kiloquad interface
modules. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Worf, It's better than music. It's jazz. They were just sucked into space. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed
the phaser and pointed it at you instead of them. Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise,
I will die with this crew. But I will not break my oath of loyalty to Starfleet. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. In all trust, there is the possibility for betrayal. When
has justice ever been as simple as a rule book? Wait a minute - you've been declared dead. You can't give orders around here. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. Your shields were failing,
sir. How long can two people talk about nothing? Your head is not an artifact! Well, I'll say this for him - he's sure of himself. Wouldn't that bring about chaos? When has justice ever been as simple as a rule book? We finished our first sensor
sweep of the neutral zone. I'll alert the crew. What's a knock-out like you doing in a computer-generated gin joint like this? Mr. Crusher, ready a collision course with the Borg ship. Shields up! Rrrrred alert! Yesterday I did not know how to eat
gagh. Ensign Babyface! Not if I weaken first. I'd like to think that I haven't changed those things, sir
</div>
</div>
</div>
The problem with it that its quite clunky when scrolling up and can be bugged by scrolling fast top and bottom. I'm looking for a smoother and more bulletproof way to handle this situation and i'm missing something.
PS: Although now it has fixed values on some places for scroll and size, it will use dynamic variables overall and work on different screen and element sizes, so there is no way to know the exact sizes before rendering.
Thank you for your time
EDIT: As Anthony pointed out, the code is not working everywhere, it works on the latest Firefox but not on older versions and not on Chrome (not tested on Safari). It should work on browsers that supporting the css provided.
I've a small bit of parallax on a site I'm working on, it's working almost fine but the foreground divs are a bit jumpy when I scroll down the page.
Near the top of the page I have a div called #top-banner, it has a fixed background image, sitting within this div are two more within a row, the fisrt div / column has an image of a model & the second div has just text.
Below the #top-banner div is a div with a background image of a waterline, the desired effext is to have the waterline to cover the #top-banner as the user scrolls down, to make it seem as if the model, text & background are being covered by water.
I've got it working by using jQuery to change the css bottom property to make it seem that the two columns divs are moving down the page beneath the waterline at a similar speed to the scroll when the user scrolls down the page. I've set the speeds/increments to be slightly different to create a parallax effect.
It's working pretty well but is a bit jumpy, I've also tried to use the jQuery animate function but that is even more jumpy.
HTML
<section id="top-banner">
<div class="row">
<div class="col-2 prlx-1">
<img src="model.png"/>
</div>
<div class="r-col-2 prlx-2">
<h3>Lorem Ipsum</h1>
<p>More Ipsum</p>
</div>
</section>
<section id="hp-water-line"></section>
CSS
#hp-top-banner {
background: url(bg.png);
height: 600px;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
overflow: hidden;
width: 100%;
position: relative;
}
#hp-water-line {
background: url(water-line.png) no-repeat transparent;
min-height: 92px;
margin: 0 auto;
width: 100%;
position: relative;
top: -15px;
background-size: cover;
}
JS
$(document).ready(function(){
function parallax(){
var prlx_effect_1= -((window.pageYOffset / 4) *2.25 );
$('.prlx-1').css({"position": "relative","bottom":prlx_effect_1, "transition": "0s ease-in-out"});
// jQ('.prlx-1').css({"position": "relative"});
// jQ('.prlx-1').animate({"bottom":prlx_effect_1},"fast");
var prlx_effect_2= -(window.pageYOffset / 5 );
$('.prlx-2').css({"position": "relative","bottom":prlx_effect_2, "transition": "0s ease-in-out"});
}
window.addEventListener("scroll", parallax, false);
});
Updated JS based on Prinzhorn Comment
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
function onScroll() {
requestAnimationFrame(parallax);
}
function parallax(){
var prlx_effect_1= +(window.pageYOffset *.7).toFixed(2); // .55 is a good speed but slow
var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
jQ('.prlx-1').css({
"transform":prlx_str_1,
"-ms-transform":prlx_str_1,
"-webkit-transform":prlx_str_1
});
var prlx_effect_2= +(window.pageYOffset * 1 ).toFixed(2); // .33 is a good speed but slow
var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
jQ('.prlx-2').css({
"transform":prlx_str_2,
"-ms-transform":prlx_str_2,
"-webkit-transform":prlx_str_2
});
requestAnimationFrame(parallax);
}
window.addEventListener("scroll", onScroll, false);
I used to build parallax sites in a similar way,by using jquery to adjust the background-position or margins, however, i read this article a few months back which really changed the way I approach them.
He suggest using CSS translateZ and perspective to move containers or imagery forward and backwards into the 3 dimensional space to create 'real' parralax. This creates more fluid animations, and also renders better on mobile devices. I also personally find this much easier to execute.
I.E.
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
The only issue is, that using real 3Dimensional layers, means you have to be smart with your Z-Index to make sure your layers are not overlapping at the wrong places.
The article has an excellent demo, which you can view the side profile of the 3D space to see how the layers are distributed in the z-axis. Just click the 'debug' button in the top left corner.
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I have a client who wants to have an X-Ray effect that reveals clickable data points. A slider would be used to move a viewing window over an image, that would reveal an x-ray, or secondary image as the slider is moved. I've adapted Eli Kirk's X-Ray effect (http://elikirk.com/2013/12/02/draggable-x-ray-effect-using-css-javascript/) to get what I have so far: http://jsfiddle.net/xfxLx/3/. The jQuery UI portion of it is easy enough:
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({'background-position': (newLeft * -1) + 'px 0px', "left": newLeft + "px" });
}
});
});
The problem I'm having is making clickable data points that would be revealed by the window as it is slid across the main image. The data points would be fairly simple shapes (like, say, a black circle), that the user could click on once revealed by the x-ray window, to reveal a popup with more info. I've beat my head against the wall trying to come up with a workable solution (if this wasn't bad enough, it all has to work in IE7, so I've ruled out canvas as well).
If this effect won't work under the confines listed (which I've told them might be the case, since I have yet to come up with a viable solution), that's fine, but I just want to make sure I'm not missing anything.
I have changed yoput HTML, setting an inner element to the xray, that will hold the points
<div class="artifact-hold">
<div class="artifact">
<div class="xrayUpper"></div>
<div class="xrayWindow">
<div class="innerXray">
<div class="point" id="brain"></div>
<div class="point" id="heart"></div>
</div>
</div>
<br />
<div class="xraySlider"></div>
</div>
</div>
Then, the JavaScript changes slightly
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({"left": newLeft + "px" });
$('.innerXray').css({"left": -newLeft + "px" });
}
});
});
And CSS is changed to make the xray clip the contents (with overflow hidden), and the inner has the background image instead of the xraywindow. also, some styling to the points.
.innerXray {
width: 300px;
height: 490px;
position: absolute;
background: url(http://s21.postimg.org/tpg6me1vb/bones.jpg) no-repeat;
background-position: 0px 0px;
}
.point {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: red;
}
#heart {
left: 150px;
top: 130px;
}
#brain {
left: 150px;
top: 30px;
}
.xrayWindow {
width: 100px;
height: 490px;
border: 2px solid rgba(255,255,255,0.5);
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
result
I want to use HTML to create an "opening" effect of one on top of another one.
After some research i figured out a way (see JSFiddle).
I now have the problem that the background image moves a little bit when the circle is resizing.
Can anyone help me figure out how to get the background image to stand still.
The image in the circle needs to keep same zoom level when opening.
The circle needs to be centered and the bottom half needs to be out of the window.
Circle css is this:
.circle {
width: 0px;
height: 0px;
z-index: 10;
position: absolute;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
left: 50%;
-moz-transform: translate(-50%, 50%);
-webkit-transform: translate(-50%, 50%);
bottom: 0;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
JSFiddle: http://jsfiddle.net/GmvUQ/2/
Update,
Let me explain a little more. i notice that my question is not clear enough.
I have a few screenshot for the effect i want to create:
1st frame:
2nd frame
The entire effect is already working but when the transition is in progress (The circle with the image is getting bigger or smaller) the image inside the circle moves a little bit.
This is probably because of the calculations that need to be done by Javascript / CSS positioning.
I would like some help how to let this image stand entirely still during resize transition.
Thanks!
DEMO: http://jsfiddle.net/GmvUQ/5/
Updated HTML
<div>
<div class="buttons">
<button onclick="changeboleto(0)">Click here</button>
<button onclick="changeboleto(500)">Click here</button>
<button onclick="changeboleto(1000)">Click here</button>
</div>
<div class="circle girl">
</div>
<div class="circle lamborghini">
</div>
</div>
Note that I've removed the nested </div> elements within each .circle. Instead I've added an extra class for each, which sets the background-image (and some positioning for them, if necessary).
Updated CSS
.circle {
width: 250px;
height: 250px;
z-index: 10;
position: absolute;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
background-repeat: no-repeat;
background-size: cover;
background-origin: content-box;
background-position: center center;
}
.lamborghini {
background-image: url(http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg);
}
.girl {
background-image: url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);
top: 50%;
}
.buttons {
position: relative;
z-index: 5;
}
I've moved most of the CSS in to the .circle class as it is common to both image sets. Pay special attention to the values for the background-* attributes.
Updated JQuery
function changeboleto(pix) {
circleHeight = pix;
circleWidth = pix;
$('.circle').animate({
'width' : circleWidth,
'height': circleHeight
}, 1500, 'linear');
//css('width', circleWidth).css('height', circleHeight);
changeCircleBackgroundToWindow();
}
function changeCircleBackgroundToWindow() {
windowWidth = $(window).width();
windowHeight = $(window).height();
$(".circle > div").animate({
'width' : windowWidth,
'height': windowHeight
}, 1500, 'linear');
$(".circle > div").animate({
'width' : windowWidth,
'height': windowHeight
}, 1500, 'linear');
//$(".circle-background").css("width", windowWidth).css("height", windowHeight);
//$(".circle-background2").css("width", windowWidth).css("height", windowHeight);
}
Rather than mix JQuery and CSS transitions I've lumped all the animation together in the JQuery.
I've used the animate() function and specified the easing method. The default easing is swing but I've used linear as this progresses the animation at a constant pace.
Edit
The solution above includes CSS that allows the image to scale with the animation. However you are requesting that the image stays at the same "zoom level" throughout.
To achieve this simply remove a line from the CSS, namely this one:
.circle {
...
background-size: cover;
...
}
I know this is 5 years too late, but I found this thread via a search engine and thought I'd provide my own thoughts.
This effect can also be achieved with clip-path, which is a bit more forgiving than jquery's animate (which can still result in image shakiness if you're animating certain/enough properties).
clip-path has the additional benefit of not needing javascript at all if you're doing, say, hovers rather than button clicks. It also results in a simpler HTML file.
I've made an updated version of the original question's jsfiddle, http://jsfiddle.net/GmvUQ/13/ which demonstrates doing this with clip-path. It's still using jquery to handle the button clicks, but the "magic" all happens via CSS transitions, rather than javascript animations.
JQuery:
function changeboleto(pix) {
...
$('.circle-background').css('clip-path', 'circle(' + pix/2 + 'px at 50% 100%)');
}
CSS (including original CSS from original fiddle):
.circle-background {
position: absolute;
z-index: 10;
clip-path: circle(0% at 50% 100%);
background:url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);
background-size: cover;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
bottom: 0%;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
What this does is simply cause the CSS to transition on the clip-path property, animating the circle expansion. Because the image itself never moves, just the boundaries between which it displays, it never shakes.
Full screen demo
JSFiddle: http://jsfiddle.net/7bP7Z/4/ (Click around to see things grow)
Okay, so now that the question has more clarification I have revisited the drawing board and have come up with a better solution.
HTML
<div class="circle">
<div class="circle-overlay"></div>
<img src="http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg" />
</div>
<div class="circle">
<div class="circle-overlay"></div>
<img src="http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg" />
</div>
Note the changes to the structure:
A containing element
An "overlay" element
An </img>
CSS
.circle {
position: relative;
overflow: hidden;
}
.circle-overlay {
position: absolute;
left: 50%;
margin-left: -150px;
bottom: -150px;
border-radius: 50%;
width: 300px;
height: 300px;
box-shadow: 0px 0px 0px 3000px white;
}
Nice and simple CSS!
The majority of the code is used to position our .circle-overlay class. This class provides a transparent circle (using border-radius) and utilises one of my favourite new CSS features - box-shadow - to apply a solid, white "outline" of an arbitrarily large value that covers the image below it. Have a play with the colour and size (adjust the 300px value) of the box-shadow to see how this works.
JQuery
$('.circle').click(function() {
var c = $(this).children('.circle-overlay');
var w = c.width() + 100;
c.animate({
'width' : w,
'height': w,
'bottom': (w*-0.5),
'margin-left': (w*-0.5)
}, 500, 'linear');
});
Once again, keeping things nice and simple!
The above JQuery performs a very simple task. It increases the size of the circle-overlay whilst maintaining its bottom, centre positioning on every click.
This should be a very smooth animation and the image should not "judder" or "shake" as the image is not being manipulated.