Show div expanding out from middle out in jquery - javascript

I want to show my div when the user generates the trigger. The animation which I want to use showing the div is such that the div is rendered starting from its centre and then gaining its height by expanding in both directions(up and down) gradually. Here is the snippet of what I have tried. The div starts rendering from left. What I want is it starts rendering from middle of its height.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

You could animate the margin as well to achieve this effect.
Set the initial margin-top and margin-bottom half of the final height; and margin-left and margin-right half of the final width. Then when you increase the width and height, decrease the margin as well.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
margin: '0'
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0px;
margin: 100px 365px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

I divided the width and height by four to and added that to the left and top to obtain the center animation requested.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
left: "0px",
top: "0px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
left: 182px;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

You need to position the element in the middle from the beginning. I'm setting the left absolute position to 50%, then moving the element back -50% of itself so that it is in the middle.
Check out CSS transform:
http://css-tricks.com/almanac/properties/t/transform/
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
******UPDATE******
Here is the css to run the animation from the middle of the window's height:
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
top: 50%;
transform: translateY(-50%);
}

Related

How do I move an element diagonally and after another animation in jQuery?

I have an HTML/CSS element:
<div id="box">
<p> BOX </p>
</div>
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 200px;
text-align: center;
font-family: Times New Roman;
}
I need it to move from its position in the middle of the page diagonally down and to the left (to the left corner). I've tried this:
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 200
bottom: $(window).width() - 200
}
});
});
How do I do this with jQuery and have it done after it's been on the page a few seconds (for a different animation to occur first)?
Consider the following.
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 100,
top: $(window).height() - 200
});
});
});
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 40px;
text-align: center;
font-family: Times New Roman;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<p>BOX</p>
</div>
<button>Go</button>
You were using width property for both. You must use width and height. Also it's better to use top versus bottom in this case. You can use bottom, yet I would suggest something like:
bottom: $("#box").height()
In this way, the property of the top will be N Pixels from the "Bottom".
See More: https://www.w3schools.com/cssref/pr_pos_bottom.asp

how to move elements around web page using jQuery?

I've created three shapes(circles) on my webpage that are positioned in the background of other elements on the page using z-index in CSS and the position is absolute.
I'm trying to move them around my page as soon as my page loads.
The following is the code I wrote attempting to do the above. I'm not sure what I'm getting wrong. Assistance will be greatly appreciated.
$(function() {
$("shape-1").animate({
"margin-top": "+= 200px"
}, 2000);
$("shape-2").animate({
"margin-right": "+= 200px"
}, 2000);
$("shape-3").animate({
"margin-bottom": "+= 200px"
}, 2000);
});
.shape-1,
.shape-2,
.shape-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37));
z-index: 1;
}
.shape-1 {
top: 1%;
left: 13%;
height: 3rem;
width: 3rem;
}
.shape-2 {
top: 21%;
right: 17%;
height: 6rem;
width: 6rem;
}
.shape-3 {
width: 10rem;
height: 10rem;
bottom: 25%;
left: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>
You need to select the elements with a proper CSS selector. $("shape-1") does not select anything. $(".shape-1") does.
You need to animate the properties that determine the position of the element. Animating margin-bottom will do nothing for you. The elements are pinned into place by top, bottom, left, and right. You need to animate those.
You need to decide whether you want to use percentages (as your CSS defines) or pixels (as your JS code attempts) to position an element. You can't combine both.
You need to animate percentages as absolute values, you can't do += 50%. You can animate an element from its original absolute position (e.g. 1%) to a new absolute position (e.g. 50%).
$(function() {
$(".shape-1").animate({top: "50%", left: "50%"}, 2000);
$(".shape-2").animate({right: "50%"}, 2000);
$(".shape-3").animate({bottom: "10%"}, 2000);
});
.shape-1,
.shape-2,
.shape-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37));
z-index: 1;
}
.shape-1 {
top: 1%;
left: 13%;
height: 3rem;
width: 3rem;
}
.shape-2 {
top: 21%;
right: 17%;
height: 6rem;
width: 6rem;
}
.shape-3 {
width: 10rem;
height: 10rem;
bottom: 25%;
left: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>

MouseEvent.clientX and MouseEvent.clientY Unexpected Results With CSS Scale Transform

$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
I was just wondering why the scaled div returns x and y MouseEvent coordinates in the range from 0 to 150 instead of from 0 to 200? The scale property is set to 2, so I thought it would be the second range instead of the first. Could someone explain? Here's a link to the js fiddle page.
I noticed a lot of similar questions on Stackoverflow, so this might be a duplicate. However, I couldn't find anything that specifically asked this question about pixels, coordinates, and the scale transformation in CSS. I may have missed something, though...
Thanks!
because transform-origin is center by default so half the div is outside the screen from the top/left.
Either update the transform-origin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
transform-origin:0 0;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
Or add some margin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
margin:50px;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
The div is scaled relative to its center, so part of it ends up being off screen. (One way to notice this: add a border to the div and see that it doesn't go all the way around.)
Try using transform-origin: top left; on the div - I think that will do what you expect.

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.

Change position top/left of children independently of the parent scrollTop position

I have several divs positioned absolutely within its parent.
The parent overflows the screen and can be scrolled.
On click those divs are supposed to be positioned occupying the height of the screen (as if they had position fixed). So each div is assigned a certain width and height and a top value. The problem is this only works as expected if the parent is not scrolled (scrollTop = 0).
I want this to be done smoothly with CSS transitions. I could assign a top value related to the scroll position of the parent in the click moment. But I am looking for a CSS way to do this. I thought of changing position fixed to the divs but this doesn't transition.
Is there any way I could make it work using CSS?
Edit: I am asking if anyone has some suggestion on how to achieve this using CSS, or some thought on how to approach it differently.
Edit2: This GIF includes just the position change (the width or height is no changing) as it is where I am having the issue. This is the desired solution:
JSFiddle.
var $container = $('#container');
var $elements = $container.find('.element');
$container
.height(function() {
return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight());
})
.on('click', function() {
$elements.add($container).toggleClass('on');
});
#container {
width: 100%;
background: grey;
position: absolute;
}
.element {
border: 1px solid black;
position: absolute;
width: 100px;
height: 100px;
background: white;
left: 100px;
transition: all 1s ease;
}
.element:nth-child(2) {
top: 130px;
}
.element:nth-child(3) {
top: 340px;
}
.element:nth-child(4) {
top: 550px;
}
.element:nth-child(5) {
top: 660px;
}
.on.element {
left: 0;
height: 20vh;
width: 20vh;
}
.on.element:nth-child(2) {
top: 20vh;
}
.on.element:nth-child(3) {
top: 40vh;
}
.on.element:nth-child(4) {
top: 60vh;
}
.on.element:nth-child(5) {
top: 80vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
As you've already mentioned changing position doesn't transition. This is because position is a non-animatable property, i.e. animations/transitions don't work for it and so changing position from absolute to relative or vice-versa will appear jumpy. Check here for a list of animatable properties.
You may also remove the position: absolute on .element from the beginning.
Either way, here's what you can do:
On clicking div, add class on on #container only and modify css with position: relative and top: 0 and remove the extra rules for top positions
Add a padding of scrollY on #container, so that Div#1 comes into current viewport if page is scrolled.
Checkout the below fiddles:
Using relative from beginning:
https://jsfiddle.net/4utdxr0t/2/
Switching b/w relative and position:
https://jsfiddle.net/4utdxr0t/1/
Adding a margin-top value equivalent to the scrollTop position, and transitioning it with the same duration and ease as the children did the trick:
JSFiddle
var $container = $('#container');
var $elements = $container.find('.element');
$container
.height(function() {
return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight());
})
.on('click', function() {
$elements.add($container).toggleClass('on');
$container.css('margin-top', $('body').scrollTop());
});
#container {
width: 100%;
background: grey;
position: absolute;
transition: all 1s ease;
}
.element {
border: 1px solid black;
position: absolute;
width: 100px;
height: 100px;
background: white;
left: 100px;
transition: all 1s ease;
}
.element:nth-child(2) {
top: 130px;
}
.element:nth-child(3) {
top: 340px;
}
.element:nth-child(4) {
top: 550px;
}
.element:nth-child(5) {
top: 660px;
}
.on.element {
left: 0;
height: 20vh;
width: 20vh;
}
.on.element:nth-child(2) {
top: 20vh;
}
.on.element:nth-child(3) {
top: 40vh;
}
.on.element:nth-child(4) {
top: 60vh;
}
.on.element:nth-child(5) {
top: 80vh;
}
.on.element:nth-child(6) {
top: 25vh;
}
body {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>

Categories