CSS Text colour transition to multiple values - javascript

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.

Related

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>

How to create a dynamic placeholder for a login page?

The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>

jumbotron color manipulation with Javascript

i have a problem with javascript.I want to control the jumbotron color and set it every 3 seconds to a random one.The problem here is that i don't know how to manipulate CSS with JavaScript, as i am pretty new to javascript.
I saw some other solutions and some other threads but it did not work.(I don't know if i did anything wrong).
I have no js code written right now as i deleted everything that did not work.
.jumbotron {
background-color: #f14444 !important;
}
/*Without the !important rule it won't change color!*/
If you have any threads that you think i haven't checked i would be happy to check them but im confident enough to say that i've seen them already.
Thanks for your time anyways!
To change the background color, simply select the element and the set the property:
setTimeout(() => {
document.querySelector('.jumbotron').style.backgroundColor = '#f14444';
}, 1000);
.jumbotron {
height: 300px;
width: 300px;
background-color: black;
}
<div class="jumbotron"></div>
Note that above will select the first found element with the given class, so if you need to target a specific element, consider giving it an id and select it as #Phil shows above.
Html elements in the DOM have a style property.
document.getElementById('something').style.backgroundColor = '#ccc'
Note that hyphenated properties like background-color in CSS are typically camel-case (backgroundColor) in Javascript.
Also you can achieve it with keyframe animation
Here is a tutorial how to get random color
#-webkit-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-moz-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-ms-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
.jumbotron {
-webkit-animation: changeColors 3s infinite;
-moz-animation: changeColors 3s infinite;
-ms-animation: changeColors 3s infinite;
background-color: #f14444;
}
<div class="jumbotron">
Some text here
</div>

How to make a marquee cycle once at a button click?

What I am trying to achieve is so that a marquee plays once when I click the button. My problem is that if I set the loop to 1 then it only plays once and then does nothing. My other problem is that it stops midway with my current code if I let go of the left mouse button. Or it stops where it was. Is there any way to make it either play once when the button is pressed and then play again whenever the button is pressed again and allow it to complete the loop completely. Here is the code, I am open to using java script instead of html. Here is my current code:
<marquee behavior="scroll" direction="up" scrollamount="30" id="marquee" height="40">
<p>+1</p>
</marquee>
<input type="button" id="gather" class="build" Value="play" onmousedown="document.getElementById('marquee').start()." onmouseup="document.getElementById('marquee').stop()" onload="document.getElementById('marquee').stop()">
You can use CSS keyframes and JQuery (or Javascript) in order to accomplish that.
In the example below, I'm using CSS rules to achieve the animation effect, and applying it adding/removing the span element from te DOM using JQuery.
Code example:
var marquee = '<span class="anim">+1</span>';
$('.btn').click(function(){
$('.anim').remove(); //remove the node if its there
$('.marquee').append(marquee); //append the node
});
.marquee{
width: 20px;
height: 20px;
overflow:hidden;
}
.marquee > span {
position:relative;
top:-100%;
left:0;
}
.anim{
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0%,100% {
opacity:0;
top:100%;
}
50% {
opacity:1;
top:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee"></div>
<button class="btn">Click here!</button>
Are you willing to use pure CSS?
It seems like you want a "+1" counter on click. You can accomplish this using CSS transitions. I'm going to use an anchor rather than an input, because you have more control over styling it.
You'll probably want to add some movement to it, change the timing, maybe swap linear to ease-out, but this is a starting point. Please consider it a proof of concept.
HTML:
a.play {
padding:6px 8px;
border-radius:4px;
background:#ccc;
border:1px solid #bbb;
text-decoration:none;
color:#111;
position:relative;
}
a.play:focus:before,
a.play:active:before {
Content:"+1";
position:absolute;
top:-16px;
left:6px;
color:#006699;
font-weight:bold;
-webkit-animation: fadeinout 1.3s linear forwards;
animation: fadeinout 1.3s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
<div style="height:60px;"></div>
Play

How to override CSS3 animation with Javascript?

I change the background color of the table (from lightgrey to lightgreen and back) for X seconds with CSS3 animation:
#keyframes change {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
the HTML code:
<tr style='background-color: lightgrey; animation: change Xs linear 5s;'>
Now I need to override the CSS animation and change the background color of the table (at any moment) to red when I click on it (and come back to lightgrey when re-click stopping the animation).
I simply try to add this code but the CSS animation always overrides the Javascript onclick command:
onclick="this.style.animationPlayState='paused'; this.style.backgroundColor='red';"
Any suggestions? Do you think it's better to do all this in Javascript?
You might want to defer that to CSS classes and selectors:
/* Skipping the -webkit prefix needed by chrome for sake of brevity */
.animated:not(.clicked) {
animation: change linear 5s;
}
#keyframes change {
0% { background-color: lightgreen; }
99% { background-color: lightgreen; }
100% { background-color: lightgrey; }
}
.clicked {
background-color: red;
}
Then, just add the clicked class when the row is clicked:
// Using jQuery for simplicity
$("table").on("click", "tr", function() {
$(this).addClass("clicked");
});
Working example: http://jsbin.com/IQaRUZa/1/edit
The solution adopted (solved with "!important" CSS3 element):
HTML code:
<tr id="1" style='background-color: lightgrey; animation: change_visite 3s linear 3s;' onclick="change(document.getElementById('1'));">
CSS code:
#keyframes change_visite {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
.evidenziato {
background-color: coral !important;
}
JS code:
function change(classe){
if(classe.className === "evidenziato"){
classe.className='';
} else {
classe.className='evidenziato';
}
}
Working example here: http://jsbin.com/ENAqocUb/1/edit?html,css,js,output

Categories

Resources