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

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>

Related

Transition for transform scale on html is only animating when mouse is moving

This is my simple code, which I want it to scale my whole document (html) with a delay of 1s (with javascript) and it should animate slowly the scale of the whole website.
In this fiddle, it is not really working at all - but on my file it actually animates it, but only when the user moves the mouse constantly.
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6)
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.7)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6); background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
<html>
<body></body>
</html>
I could not make it work with your code so I modified it like this:
<script>
setTimeout(function(){
document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>
<style>
html {
height: 100%;
width:100%;
}
#test{
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
</style>
<html>
<body>
<div id="test"></div>
</body>
</html>
And it seems to work as expected for me, whether I move the mouse or not. The issue is that the background on html or body tag will fill the full size of the screen even if zooming in and out or resizing.
EDIT:
If you want the background to fit the full window while the content is growing: I just added a div in your body to see easier what is happening. Is this what you want to have?
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.8)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
body{
height: 100%;
width:100%;
}
div{
height: 100%;
width:100%;
background-color: #000;
}
<body>
<div></div>
</body>

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>

CSS Text colour transition to multiple values

So I am trying to implement a hover state animation for some text on my portfolio website. In short, the text needs to animate from black or white ( can change ), to white, to blue.
I've tried using something like the following
#keyframes textAnimation {
0% {
color: inherit
}
50% {
color: white
}
100% {
color: blue
}
}
However, because it's a hover animation - if I stop hovering, the animation cuts and it reverts to its previous value. I have an accompanying animation ( Purely CSS ) to go along with the hover, so I need it to basically reverse the animation back to the original value.
I've also tried adding classes to the <span> using setTimeout... however this is quite an intensive page as it is, and from past experiences, mixing JS + CSS this way - and have the timings be perfect - is super hard on lower-end machines.
P.S I'm using React.js
Any thoughts would be greatly appreciated.
You can try gradient coloration with transiton:
.text {
background-image:
linear-gradient(to bottom, currentcolor , white, blue);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
background-size:100% 1000%;
background-position:top;
background-repeat:no-repeat;
font-size: 70px;
transition:1s all;
}
.text:hover {
background-position:bottom;
}
body {
background:pink;
}
<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>
Here the color changes from white to blue to black but you can use any colors. It's very difficult to reverse animations only by CSS so a little js help goes a long way. Hope that helps you!
let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
node[0].addEventListener("mouseover",function(){
node[0].classList.add("forward");
node[0].classList.remove("backward");
});
node[0].addEventListener("mouseout",function(){
node[0].classList.add("backward");
node[0].classList.remove("forward");
});
.notesColor1{
color:white;
background-color:grey;
font-size:2rem;
}
.forward{
animation:anim 1s ease forwards;
}
.backward{
animation:anim-reverse 1s ease;
}
#keyframes anim{
0%{
color:white;
}
50%{
color:blue;
}
100%{
color:black;
}
}
#keyframes anim-reverse{
0%{
color:black;
}
50%{
color:blue;
}
100%{
color:white;
}
}
<div class='notesColor1'>notest1</div>
You can add a simple js that on hover event check: if it has a class a remove it and add
class b else remove class b and add class a.

how to make transition of stacked Divs. in JavaScript

i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div

Push-animate a floated div by animated div to left

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.

Categories

Resources