jQuery/CSS animate div width from left to right - javascript

I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned.
I need to make this compatible with IE8 hence using jQuery.
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:
JSFiddle link
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
I need it going in a different direction, like the following image:
Hoping someone could point me in the right direction (no pun intended!). Thanks in advance.

You may use a wrapper and position the child div with right:0.
See this demo

If i can understand your question, solution is replace left with right :)
http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}

You can like this:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}

If you could wrap your elem with a wrapper which is relative positioned element and do the following:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
Try this fiddle

You can use Scale Effect in Jquery :
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/

Related

Is there a way to apply CSS-transform to an element which is inside an element that is being CSS-transformed on mousemove?

Basically I have a parallax scene using parallax.js library.
Inside the scene I have a couple of divs with unique parallax settings data tags.
And inside one of these divs I have an element which I want apply tilt effect to(when its getting mouseover'ed). But it doesnt work, the transformations from tilt lib arent being applied if an element is inside the scene however it works if I move it out of the parallax scene.
I think the problem lies somewhere around the management of OnMouseMove events or maybe it cannot work that way(when transform is being applied to an already transformed element's child).
Chrome EventListeners tab shows that both parallax and tilt mousemove listeners exist.
I would appreciate any help. If you need any code snippets I can provide it, since right now I actually don't know what particular parts to show and dont want to copy paste the whole libs.
UPD.
here's a snippet of what im trying to do:
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});
.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt#1.6.1/lib/vanilla-tilt.min.js"></script>
</body>
Found out that parallax scene disables pointer events.
So in order for that to work I needed to add style="pointer-events: all;" to an element that is being tilted.

How to use .animate() to expand width from a specific side

I am trying to animate an opening sequence for a project and am wondering how I can use .animate() to make my div "come in" from the right instead of the left which seems to be the default.
I am sure it is a simple solution, here is my code and fiddle:
JSFiddle
$("#clickMe").click(function() {
$(".login").animate({width: '0'});
}, function() {
$(".login").animate({width: '100'});
});
Thanks!
You could set a margin-left with a value equivalent to the element's width and animate it at the same time. In doing so, the width animation is essentially displaced by the margin.
$("#clickMe").click(function() {
$(".login").animate({
'width': '100',
'margin-left': '0'
});
});
.login {
height: 100px;
width: 0px;
background-color: #f00;
margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="login"></div>
Alternatively, another approach would be to float the element to the right inside of a parent element with the same dimensions:
$("#clickMe").click(function() {
$(".login").animate({width: '100%'});
});
.animation-wrapper {
width: 100px;
height: 100px;
}
.login {
height: 100%;
width: 0;
background-color: #f00;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
Similarly, you could also just animate the left property and hide the overflow:
$("#clickMe").click(function() {
$(".login").animate({'left': '0'});
});
.animation-wrapper {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
}
.login {
height: 100%;
width: 100%;
background-color: #f00;
position: absolute;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
its a simple solution but should be enough for simple cases:
Wrap your login with container with exact width and height:
<div class="wrap">
<div class="login"></div>
</div>
Than apply styles:
.login {margin-left: 100px; height: 100px; width: 100px; background-color: red;}
.wrap{
width: 100px;
height: 100px;
overflow: hidden;
}
You move your .login to the right side of the .wrap (using margin-left:100px;) and add overflow:hidden to .wrap (.login will be not visibile)
than simply reset margin-left to 0 :
$("#clickMe").click(function() {
$(".login").animate({marginLeft: 0});
});

Draggable fixed element centered in body causing it to snap to left in IE and Chrome?

I have been having a problem centering a fixed div in IE and Chrome when using the JQuery draggable function with a 'containment'. It seems whenever I try to drag the element, it snaps to the left of the containing element until I let go of it and then start dragging again.
Here's an example:
CodePen
http://codepen.io/anon/pen/NqZjbX
HTML
<div class="draggable">
</div>
.CSS
.draggable {
background: salmon;
width: 50px;
height: 50px;
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
cursor: move;
}
body {
height: 500px;
}
JS:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
Thanks for your help!
The implementation of .draggable() is not intended to be used with two properties of the same axis(left and right in your case). You have to use some other technique to center the element.
Please see example below:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
.draggable {
background: salmon;
width: 50px;
height: 50px;
position: fixed;
cursor: move;
/* Initial position */
top: 0;
left: 50%;
margin-left: -25px;
}
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="draggable">
</div>

Left 50% with margin-left negative isn't working

I'm trying to apply this exactly css in a element:
.element {
position: absolute;
left: 50%;
margin-left: -285px // the element has width: 500px;
}
This element is inside other div with absolute position.
The browser is not applying the margin-left, and i don't know why!!!
I made a CODE PEN to help you guys help me -> http://codepen.io/anon/pen/KpKrmN
Thanks!
I am not sure what you are doing, but I have a solution that might fix it. Use something like this:
margin-left: calc(50%-285px);
Not following 100% but maybe this codepen helps: http://codepen.io/anon/pen/jPOQLM
Biggest change is to "block". I converted your p to a div and made it "right" positioned.
<div class="main">
<div class="interaction">
Some text
<br/>
<span>Other text</span>
</div>
</div>
.main {
position: absolute;
width: 100%;
height: 150px;
top: 180px;
text-align: center;
border: 1px solid red;
}
.interaction {
position: absolute;
right: 0;
left: 50%;
margin-left: -285px;
}

Draggable JQuery UI scroll issue when using within iframe

Jsfiddle is here: http://fiddle.jshell.net/Msd7v/29/
Here is my Javascript:
$('#app').contents().find('.dragOption').draggable({
iframeFix:true,
scroll: true
});
and then in the iFrame
#html
<div id='box'>
<div class='dragOption'></div>
</div>
#css
#box {
background: red;
height: 600px;
width: 100%;
left:10;
z-index: 10000;
position: relative;
top: 10;
}
.dragOption {
height: 80px;
width: 200px;
position: absolute;
z-index: 100001;
outline: 1px solid #000;
top: 400px;
}
When you try to move the draggable div when you are already scrolled down, the draggable library doesn't take into account the window height. Is there a way to offset this? or a monkey patch for the library so you can force it to recognize the correct scroll distance and not have the draggable div jump up to the top of the iframe above the fold?

Categories