Why is it that even though I have this animation's duration set to 2 seconds, shrinking the window results in there being a greater delay at first, and a faster animation?
See Bootply.
JS:
function animateit() {
$('.wrapper .water').animate({
'height': '350px',
'top': 0
}, 2000, function () {
$('.wrapper .water').animate({
'height': 0,
'top': '350px'
}, 2000, animateit);
});
}
animateit();
CSS:
.wrapper {
position: relative;
height:auto;
width: 100%;
max-width: 350px;
overflow:hidden;
}
.img-responsive {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.glass {
position:absolute;
left:0px;
top:0px;
z-index:5;
}
.hide-image {
display: block;
opacity: 0;
width: 100%;
}
.water {
position:absolute;
left:0px;
right: 0;
top:350px;
background-color:#67d9ff;
height:0px;
display:block;
}
HTML:
<div class="wrapper">
<img class="hide-image" src="http://www.videsignz.com/testing/images/water-front2.png">
<img class="glass img-responsive" src="http://www.videsignz.com/testing/images/water-front2.png">
<div class="water"></div>
</div>
I noticed that for the second part of the animation's JS, changing 'top': '350px' to 'top': '100%' caused the it's duration to be relatively consistent regardless of window size, but applying that code to the filling of the glass doesn't yield the same result - and it also alters the animation in normal view nonetheless.
Related
I'm trying to make it when the users mouse enters the .container the #facial will slide to the left, pause for a second, and then increase it's width to fill the width of it's container.
Right now the #facial slides properly, but when i try to have #facial fill the entire width it pops out of it's container. Also i'd like it to pause for a moment to show the transition slower from when it enters the middle to when it increases it's width.
Here is my code.
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '122px'});
// #facial expands it's width to fit .container.
$('#facial').width(400);
});
});
Here is my Demo
$(document).ready(function() {
$('.container').mouseenter(function() {
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({
right: '122px',
position: 'absolute'
}).delay(500).animate({
right: '0px',
width: '478px'
});
// #facial expands it's width to fit .container.
$('#facial').width(250); // .width(400) causes it to pop-out
});
});
body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
img {
float: left;
width: 239px;
height: 200px;
}
.image {
position: absolute;
}
#facial {
position: relative;
float: right;
width: 239px;
height: 200px;
background-color: #008aaf;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" alt="Facial - Marketing Material" />
</div>
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
</div>
Changed to use percentages and to use absolute positioning.
https://jsfiddle.net/sy4pv8z3/
Javascript:
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
.delay(500)
.animate({right: 0, width: '100%'});
});
});
CSS:
body {
background-color:#d6d6d6;
}
.container {
position: relative;
margin: 200px auto;
background-color:red;
width:478px;
height:200px;
}
img {
float:left;
width:239px;
height:200px;
}
#facial {
position:absolute;
right: 0;
width:239px;
height:200px;
background-color:#008aaf;
}
#facial h1, #facial h2 {
text-align:center;
margin-top:30px;
color:#FFFFFF;
}
$('#facial').animate({right: '122px'}).delay(1000).animate({width: '400px'});
i have this stack of divs that changes z-index on click. When a new div gets the highest z-index being placed on top i want to animate the height of it. from 0 to 100p, so it looks like it "grows".
Anyone that can help on this?
jsFiddle: http://jsfiddle.net/nfp17etg/2/
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
position: relative;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0;
}
.holder div.current{
z-index:1;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
$("button").click(function(){
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
}
else {
$(".current").removeClass("current").next().addClass("current");
}
});
Try this one
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
check jsFiddle demo:
The idea for the website is that there is a video playing in the background that takes up the entire width and height of the browser when you go to it. Then you scroll down and get to rest of the content. So far I have the video part of it working. The part that is causing me trouble is a picture of an iphone that also needs to be included. About half of the phone is covering up a part of the video. The other half you need to scroll down to see (along with the rest of the content). I need the phone to 1. Always appear in that position, no matter the window size; and 2. Scale to be the same ratio of phone size to window size.
I've tried many things to get this functioning, it just hasn't seemed to work for me yet.
<script>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
</script>
</head>
<body>
<iframe id="video" src="http://www.youtube.com/embed/SLTVLIjvdnw?HD=1;autoplay=1;controls=0;showinfo=0;" frameBorder="0" allowfullscreen></iframe>
<div id="box">
<img id="iphone" src="img/phone.png" alt="iPhone" />
</div>
<div id="test"></div>
</body>
html, body {
border: 0px;
margin:0px;
padding:0px;
}
body {
overflow: hidden;
}
#test {
width:400px;
height:400px;
background-color:blue;
}
#box {
position:absolute;
max-width:280px;
left:10%;
top:380px;
}
#iphone {
max-width: 100%;
}
Here is a pure CSS solution, assuming I understood the problem correctly:
http://jsfiddle.net/5aVZa/1/
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.video {
background: black;
width: 100%;
height: 100%;
}
.iphone {
width: 50%;
margin: 0 auto;
display: block;
margin-top: -25%;
position: relative;
z-index: 2;
}
In the jsfiddle here http://jsfiddle.net/H3VW5/ I have 3 divs where the width is based on perencentage. Is there a simple way (without having an image in it) to get the height to match a certain aspect ratio so that when the window shrinks the height shrinks with the width to keep the same shape? IE. if the div size was 600px x 600px at 60% and the window shrunk to make the width 500px the height would also shrink to 500px?
/*CSS:*/
.div1 {width:60%; height:400px; background-color:#066; float:left}
.div2 {width:20%; height:400px; background-color:#09F; float:left;}
.div3 {width:20%; height:400px; background-color:#C00; float:left;}
<!--HTML:-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
There is a good trick described here which may solve it for you.
Basically, you let the width just be auto (don't specify a px height), and use padding-bottom with a percentage (%). Neat.
How about setting a height and width on your body and html, and then changing the height of your div to percentages? This allows you to then set relative liquid heights on your div because now they have something to size to.
body, html { height: 100%; width: 100%; }
.div1 {width:60%; height:40%; background-color:#066; float:left}
.div2 {width:20%; height:40%; background-color:#09F; float:left;}
.div3 {width:20%; height:40%; background-color:#C00; float:left;}
JSfiddle link
You can use jquery to control the height of the divs
$(".ratio" ).each(function () {
var height = $(this).width();
console.log(height);
$(this).css('height',height + 'px');
});
Link : http://jsfiddle.net/gwx6y/
Here is what I came with. The only thing which is not hacky and it gets nice aspect ratiou keeping is an image. So, if change the markup a bit to:
<div class="wrapper">
<img src="bigimage.jpg" />
<div class="div1">a</div>
<div class="div2">b</div>
<div class="div3">c</div>
</div>
and set max-width: 100%; to the image its height will be changed like that so it keeps the original aspect ratio. So, we can use that and position the divs absolutelly, set the proper width and height to 100%. The dimensions of the image are leading here. The wrapper takes the same size and because the divs are childs of the same wrapper their height is also the same.
CSS:
.wrapper {
width: 100%;
position: relative;
}
.wrapper img {
position: relative;
max-width: 100%;
z-index: 1;
display: block;
opacity: 0;
}
.div1 {
position: absolute;
left: 0;
top: 0;
height: 100%;
width:60%;
background-color:#066;
z-index: 2;
}
.div2 {
position: absolute;
height: 100%;
left: 0;
top: 0;
left: 60%;
width:20%;
background-color:#09F;
z-index: 3;
}
.div3 {
position: absolute;
height: 100%;
left: 0;
top: 0;
left: 80%;
width:20%;
background-color:#C00;
z-index: 4;
}
Example of my solution is available here:
http://jsfiddle.net/krasimir/H3VW5/3/
P.S. The good thing in this approach is that you can keep whatever ratio you want. All you have to do is to create an image with that ratio.
I am trying to change the size of the image for the ui slider handler to increase as you move the scroller to the right and to decrease in size as you scroll it to the left. I will be using a SVG of course so the scale remains accurate! any ideas? :(
Ye can check out the code here:
http://jsfiddle.net/userdude/3teR3/
or here:
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
<div id="slider"></div>
$(function() {
$("#slider").slider();
});
You can make the size of the .png dependent from width and height and change these with the slider-value:
HTML:
<div id="slider"></div>
CSS:
html,
body {
width: 100%;
}
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
background-size:100%; /*this is the importent thing!*/
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
Javascript:
$(function() {
$("#slider").slider({
min:0, max: 10,
slide: function(event,ui){
$(".ui-slider-handle").css('width',28*(1+(ui.value)));
$(".ui-slider-handle").css('height',28*(1+(ui.value)));
},
});
});
And here as jsFiddle: http://jsfiddle.net/1Blerk/3teR3/20/
Maybe it is still usefull for you.