Font-family CSS transition - javascript

I want to get a hover animation that changes the font-size and font-family the same time. I didn't manage to change back the font family precisely when the font-size transition has finished. Is this even possible?
What I have:
a{
-webkit-transition: font-size .2s ease;
-moz-transition: font-size .2s ease;
-o-transition: font-size .2s ease;
-ms-transition:font-size .2s ease;
transition: font-size .2s ease;
}
a:hover{
font-family: "MyHoverFont";
font-size: 3em;
}
What I tried:
a{
...
-webkit-transition: font-family.2s ease;
-moz-transition: font-family .2s ease;
-o-transition: font-family .2s ease;
-ms-transition: font-family .2s ease;
transition: font-family .2s ease;
}
a:hover{
...
font-family: "MyHoverFont"
}

You can't use animations or transitions with font-family. This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another.
But I found a good workaround for this (here):
You could do the following: have two divs, each with the same text but
different font. The second div is absolute positioned below the first
div and hidden by default. When the times comes to "morph" the font,
animate the first visible div opacity to 0, and the second div to 1.
It should look like it's morphing at the expense of a little more
convoluted mark up.
Hint
It seems like you do something like the following:
a {
...
transition: font-size .2s ease;
...
transition: font-family .2s ease;
}
But in this case, the second rule overwrites the first rule, so the following is what you usually do:
transition: font-size .2s ease, font-family .2s ease;

Modern browser now support Variable fonts where you can control the available font's settings.
You could also go to this example for controlling the settings.
var changes = [
"'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
"'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2"
];
// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];
// Change variation every 2 sec
var index = 0;
setInterval(function(){
text.style.fontVariationSettings = changes[index];
index = index === 0 ? 1 : 0;
}, 2000);
#font-face{
font-family:"Recursive";
src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
font-weight:300 900;
font-display:swap
}
#text{
text-align: center;
height: 100px;
font-size: 50px;
line-height: 100px;
font-family: Recursive;
font-weight: 500;
transition: 0.5s font-variation-settings ease-in;
}
<div id="text">Hello World</div>
Not all font and options is supported, if you want to find some variable font's resource you could go to this link.

You can use a variant version font, because font-variant uses a mathematical formula for transitions that css transition understands:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

I answered this in another question that I raised in Stack Overflow.
The Javascript demo is at:
https://www.cqrl.in/dev/font-transition-js.html
The GitHub code is here:
https://github.com/Sukii/font-transition
The TUGBoat paper is here:
https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html

Related

Growing DIVs on page load?

I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...
This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>
It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}

Show icon font on image center on mouse hover

I´m trying to do an effect and show a search icon font when the mouse hover my "image1.png".
I already did the effect with jQuery but now I do not see how I can integrate the iconic font with jquery. Has anyone done something like that? Can you give a little help?
<article id="loop-news">
<span id="testIcon"><I class = "fa fa-search-plus" > <!--show just on mouse hover -->
<img src="image1.png" id="test" />
<h2>Title </h2>
<p>My Post</p>
</article>
My css to hide icon font at first:
#testIcon>i{display:none;}
My jquery to give an opacity effect:
$("#test").hover(function() {
$(this).animate({opacity: 0.5}, 500);
}, function() {
$(this).animate({opacity: 1.0}, 500);
});
I would use CSS3 transitions if I understand your issue. In this example, I would just replace the font-family with your icon font (assuming that's how it works - never used it).
h2 {
position: aboslute;
margin-top: -350px;
display: none;
text-align: center;
font-family: arial;
}
#loop-news:hover h2 {
display: block;
}
#loop-news:hover img {
opacity: .5;
}
img, h2 {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
JS Fiddle

jQuery toggleClass - can't animate or give it a transition

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.

Make CSS hover element permanent onclick

So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"

How to return a button to its inactive state in mobile browsers

On touch-screen devices how do I return an HTML button back to its non-active state, after it has been pressed? Hover and active pseudo selectors are currently styled the same:
button.largeButton {
font-size:15px;
padding:0 18px;
height:36px;
background:#fff;
border:none;
border:2px solid #1a1a1a;
box-shadow:0 0 6px rgba(0,0,0,0.18), inset 0 0 6px rgba(0,0,0,0.18);
letter-spacing:1px;
color:#1a1a1a;
border-radius:1px;
-webkit-transition: all 0.09s ease-out;
-moz-transition: all 0.09s ease-out;
-o-transition: all 0.09s ease-out;
transition: all 0.09s ease-out;
}
button.largeButton:hover,
button.largeButton:active {
background:#1a1a1a;
color:#fff;
box-shadow: inset 0 0 9px rgba(255,255,255,0.18);
-webkit-transition: all 0.09s ease-out;
-moz-transition: all 0.09s ease-out;
-o-transition: all 0.09s ease-out;
transition: all 0.09s ease-out;
border-color:#333;
}
A CSS only solution is preferable, but a JS/jQuery is fine.
jsFiddle Demo
Perhaps you should attempt this by segregating your class names for active/hover a little bit
button.largeButton:hover,
button.largeButton:active {...}
could become
button.activeButton:hover,
button.activeButton:active {...}
and then once the button had been clicked, this class would be removed.
sample html
<button class="activeButton largeButton">
jquery to remove class
$(".activeButton").click(function(){$(this).removeClass("activeButton");});
There is no pure css way to do this unfortunately. The best way would be to use :visited however, that is not possible because
Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.
- MDN :visited
Unfortunately, there's no way that I know of to be able to, post-click, return to inactive state. The way to do this in jQuery is very simple though.
$('.largeButton').click(function() { $(this).blur(); });

Categories

Resources