Push-animate a floated div by animated div to left - javascript

Is it possible to CSS animate a div's left property resulting in a div that's floated next to it moving the same incremental amount automatically?
I've produced some jsfiddle code that demonstrates my question not working the way I would like it to. Click on the red square to see it animate, albeit over the top of the blue square.
I would like #block1 to be able to in effect push #block2 by animating the CSS property 'left' of block1.
CSS:
* {
margin:0;
padding:0;
}
.red {
float: left;
position: relative;
width:100px;
height:100px;
background-color: #F00;
}
.blue {
float: left;
width:100px;
height:100px;
background-color: #00F;
}
.animateMenu {
-webkit-animation: myfirst 0.5s forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {left: 0px;}
to {left: 100px;}
}
HTML
<div id="block1" class="red"></div>
<div id="block2" class="blue"></div>
Javascript
$("#block1").on( { "mousedown" : onInteraction } );
function onInteraction(e) {
$("#block1").removeClass("animateMenu").addClass("animateMenu");
}
http://jsfiddle.net/6edgsanb/
Many thanks for any help in advance.

Instead of animating left, animate margin-left. Here's a modified fiddle.

Related

Css animation does not occur when removing and adding class without setTimeout

When class .is-animated is added to the .box element it does a simple animation of changing background.
I want it to do this simple animation let's say every 2 seconds. The issue is that if it already has the .is-animated class and i remove and then add it again the animation does not happen except if i put the addition inside a setTimeout function. Why is this happening? Is the use of setTimeout mandatory in such situation?
JSFIDDLE
HTML
<div class="box box_one"></div>
<div class="box box_two"></div>
CSS
.box {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
.box.is-animated {animation: changebg 1s ease;}
.box_two { margin-left: 50px;}
#keyframes changebg {
0% {background: red;}
75% {background: green;}
100% {background: red;}
}
JS
var box_one = document.querySelector('.box_one');
setInterval(function() {
box_one.classList.remove('is-animated');
box_one.classList.add('is-animated');
}, 2000);
var box_two = document.querySelector('.box_two');
setInterval(function() {
box_two.classList.remove('is-animated');
setTimeout(function() {
box_two.classList.add('is-animated');
}, 100);
}, 2000);
You don't need js for this, just add "infinite" to the animation property.
As for the question itself, like Niet the Dark Absol pointed out, if you add and remove a class in the same iteration css never computes it, you would need to use a timeout indeed.
.box {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
.box.is-animated {animation: changebg 2s ease infinite;}
.box_two { margin-left: 50px;}
#keyframes changebg {
0% {background: red;}
50% {background: green;}
100% {background: red;}
}
<div class="box box_one"></div>
<div class="box box_two is-animated"></div>

How to make font icon be full of a block element?

I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little.
Here is the example:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
JSFiddle : https://jsfiddle.net/217z69sm/2/
It seems like font-awesome are aware of this, and there suggestion seems to be to switch to the svg version, or to use display: block:
Icon Animation + Wobbles
We’ve worked hard to keep icons perfectly
centered when they are spinning or pulsing. However, we’ve seen issues
with several browsers and the web fonts + CSS version of Font Awesome.
Through a lot of investigation this appears to be an issue with web
fonts in general and not something we can directly fix. We do have a
couple of ways you might be able to work around this:
Switch Frameworks - Switch to the SVG with JavaScript version, it’s
working a lot better for this. Set the display of the animating icon -
Use display: block; where you can. This seems to help a lot with this
issue.
Taken from https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
I can't say that I can see the difference which using display: block gives here, perhaps others can spot it or add an explanation of why it might help:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#block {
display: block;
}
.two {
left: 75px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>
I analysis that the icon has some unbalance margins, which is creating a little offset when we try to rotate it.
here, I remake the same icon,
check if it works for you.
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:300px;
}
.inner {
padding: 2px;
animation-timing-function: linear;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.rot{
border: 10px solid black;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to left,black 0%, black 50%, white 50%,white 100%);
}
<div class="container">
<div class="inner">
<div class="rot">
</div>
</div>
</div>

Best way to make a 2 column layout that works with multiple resolutions?

I've asked this a couple times but seems like I didn't word it quite right so will try do better here,
I'm trying to make a 2 column layout in HTML, CSS, & Java, what I want is the text on the left to center in the middle of both columns once the resolution is too low (by this I mean the columns look great in 1920x width and 1600x width, but when it gets down to 1200x800 the text breaks past the height of the right image).
I've seen a website that once the page width hits a certain point (around 1200x width) the text in the left column snaps to center in the middle of both, which results in the page looking good at all res. I have a feeling the text is overlayed on top of both columns with a java snippet that tells the text to move into the center at a certain width, only problem is I don't know how to achieve that,
I've attached my code at the bottom but in my version the text is inside the left column, am I right thinking that the text is probably on-top of both columns? and is there a javascript to tell the text to move center at a certain width? would really appreciate any help!
HTML:
<div class="content1">
<div class="column1 animation fadeInUp">
<div class="title1">
<h3>STATEMENT</h3> .
<h2>Title of Some Sort.</h2>
<div class="blue-line"></div>
</div>
<p1>Paragraph text.<br></p1>
<button class="svg1">FORUM</button>
<button class="svg2">SIGN UP</button>
</div>
<div class="column2">
<div class="column2pic"></div>
</div>
</div>
CSS:
.content1 {
display: flex;
margin-left:100px;
margin-right:0px;
}
.column1 {
display:inline-block;
flex: 31%;
padding-bottom: 0px;
padding-right:50px;
opacity: 0; animation-play-state: paused;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-play-state: running;
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2.5rem, 0);
transform: translate3d(0, 2.5rem, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
.column2 {
flex: 50%;
padding-bottom: 0px;
padding-left:100px;
padding-top:0px;
width:50vw;
}
.column2pic {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0,
0.0)), url(../Assets/Images/Content1pic);
background-size:cover;
z-index: 100;
width:50vw;
height:600px;
}
NOTE: the animation is just a simple effect for the left text to fade up, but don't mind if anyone excludes that part to keep it simple.
Let me know if you have any ideas! Thanks!
You will need to use css #media. In your case, you will have to create #media only screen and (max-width: 1200px) with the style that you would like at this size. See below an example of it. I put the width to 400px to fit with this snippet. When you resize the browser window under 400px #media only screen and (max-width: 400px), it lowers the text size font-size: 20px; and align it in the center text-align: center;.
#mypic {
width: 100%;
max-width: 560px;
height: 350px;
background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350");
font-size: 50px;
}
#media only screen and (max-width: 400px) {
#mypic {
font-size: 20px;
text-align: center;
}
}
<div id="mypic">My Title In Picture!</div>

Transition of added element with position absolute

So I have this problem: I append a div into a div at 50px top then try to animate to 0px but the animation never works, even if the div is moved to 0%.
Here is the very simple code
HTML
<div id="toto"></div>
JS
$('#toto').append('<div id="test" class="test">test</div>');
$('#test').css('top', '0px');
CSS
#toto{
display:block;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
FIDDLE
Link
Any idea how to have it move with CSS transitions? Thanks.
The CSS is being applied too fast for the top change to trigger the transition. You can wrap the class change in a fast setTimeout() https://jsfiddle.net/nb0fty1b/1/
$('#toto').append('<div id="test" class="test">test</div>');
setTimeout(function() {
$('#test').css('top', '0px');
},100);
#toto{
display:block;
min-height:200px;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto">
</div>
Don't change the top on page load like:
setTimeout(function(){
$('#test').css('top', 0);
},2000);
You can do that with CSS animation and #keyframes.
$('#toto').append('<div id="test" class="test">test</div>');
#toto {
min-height: 200px;
position: relative;
}
.test {
position: absolute;
top: 50px;
animation: move 3s forwards;
}
#keyframes move {
to {
top: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto"></div>

jQuery toggle animation failing only in Safari

JS:
$('.greenBox').hover(function(){
$(this).addClass('expanded');
$(this).removeClass('contracted');
}, function(){
$(this).removeClass('expanded');
$(this).addClass('contracted');
});
CSS:
.expanded {
height: auto;
min-height:200px;
max-height:750px;
margin-top:5px;
// to make the box move up add back the bottom 300px
// bottom: 300px;
background: linear-gradient(#812990, #9e248e);
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
Here is the 'contracted' class.
.contracted {
max-height: 137px;
overflow:hidden;
}
The jQuery is working. The background color is not changing in Safari because you need to use:
background: -webkit-linear-gradient(#812990, #9E248E);
http://jsfiddle.net/hsqgqojx/

Categories

Resources