How to efficiently render iframe durig hover as shown here
so far i have this as example
HTML: <a class="iframe-link" href="https://saheed.codes/uses">Home Page<iframe src="https://saheed.codes/" loading="lazy" style={{width: "100%", height: "600px", border: "0px none"}}></iframe></a>
.
css:
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
display: block;
}
I am working with react, and tailwind for styling and would appreciate answers in that direction.
Thanks!
If you want to avoid using a wrapper for it, you could use opacity directly on the iframe. You would already have a reserved space for it and you wouldn't have to use a wrapper. It depends a bit on your use case, your solution is a valid alternative.
iframe {
opacity: 0;
transition: opacity 0.5s linear;
}
iframe:hover {
opacity: 1;
}
Ended Up doing it this way
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
-webkit-animation: slow 2s;
-moz-animation: slow 2s;
-ms-animation: slow 2s;
-o-animation: slow 2s;
animation: slow 2s;
display: block;
/* opacity: 1; */
}
#keyframes slow {
from { opacity: 0; }
to { opacity: 1; }
}
Related
I have an image on my page representing an up arrow and, which is used to jump to the top of the page thanks to a link). This image has an opacity of "0.2", and "1" when hovering over it with the mouse.
From a smartphone or tablet, when you press on this image, the opacity remains at "1".
I would like this opacity to return to "0.2" after pressing this one.
How to do please?
My HTML code :
<img src="./img/up.png" alt="up" title="up">
My CSS code :
a > img {
width: 60%;
height: 60%;
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
Thanks
A solution with Javascript/Jquery
I modified an answer of mine of few days ago
$('#clickMe').click(function () {
$(this).addClass('tothetop');
$(this).on("animationend", function(event) {
$(this).removeClass('tothetop')
});
});
img {
opacity:0.2;
}
.tothetop {
animation-fill-mode: forwards;
animation-name: test;
animation-duration: 2s;
}
#keyframes test {
50% {opacity:1;}
100% {opacity:0.2;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="clickMe" src="https://picsum.photos/200">
A solution using only CSS
#keyframes move {
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
img {
animation-fill-mode: forwards;
opacity:0.2;
}
img:hover {
animation: move 2s;
}
<img src="https://picsum.photos/200">
A Pure CSS Solution without JavaScript
The problem lies with how best to implement :hover on interfaces where the user is not using a cursor controlled by a mouse or trackpad or a keyboard.
There isn't (yet) a perfect way to do this.
It doesn't exist, but we could imagine that the touchscreen counterpart to:
my-div:hover
might be:
my-div:touch
where the :hover behaviour is displayed for a second or two and then no longer displayed.
In the absence of a hypothetical :touch pseudo-class however, we can nevertheless implement one - and in CSS alone, without using JavaScript.
We can do this by introducing an animation for touchscreens - something like this:
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
We can also ensure that this animation only fires on touchscreens with a #media query:
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
Working Example
Putting it all together:
a > img {
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
a > img.touchscreen-simulation:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
<a href="#top">
<img src="https://picsum.photos/120/120" alt="up" title="up">
<img class="touchscreen-simulation" src="https://picsum.photos/120/120" alt="up" title="up">
</a>
<p>The <code>#media query</code> won't be active on non-touch screens, so the <strong>image on the right</strong> is set up to simulate what <em>would</em> happen on a touchscreen in this setup.</p>
Working Example:
I have a number of questions:
<div id='q1'>question...</div>
<div id='q2'>question...</div>
<div id='q3'>question...</div>
etc...
Only one question div should be visible at any time.
I want each question to fade out and the new question fade in exactly where the previous question was.
I am using this CSS for the fade transitions:
.fade-out {
opacity: 0;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
transition-delay: 4s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOutOpacity {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
But when the second question has the fade-in css class applied, it makes the first question jump up before it's faded out.
Ideally, I'd like the first question to fade out and the become display: none;
But I am struggling to get it to work.
Questions
How can I get the first question to 'fade-out' and the second 'fade-in' in it's place?
N.B I'd rather a pure CSS solution than a Jquery solution if possible...
Like in most pure CSS solutions you might want to utilize input elements. Here I am using radio types with labels inside to reach the next question.
As you are only changing opacity you might want to use a transition instead of an animation. I am using the shorthand here which can be expanded like this:
transition: property-name duration easing delay;
Here is a working example:
/* wrapper to hold absolute positioned children */
.wrapper {
position: relative;
}
/* hide actual radio buttons */
.wrapper input {
display: none
}
.question {
/* float above each other */
position: absolute;
/* transparency by default */
opacity: 0;
/* fade out without delay */
transition: opacity 1s ease-out;
}
input:checked + .question {
/* always put current question first */
z-index: 1;
/* fade in with delay */
opacity: 1;
transition: opacity 2s ease-in 1s;
}
<div class="wrapper">
<input id="question-1" type="radio" name="question" checked>
<div class="question">
<p>Question 1</p>
<label for="question-2">next</label>
</div>
<input id="question-2" type="radio" name="question">
<div class="question">
<p>Question 2</p>
<label for="question-3">next</label>
</div>
<input id="question-3" type="radio" name="question">
<div class="question">
<p>Question 3</p>
<label for="question-1">start over</label>
</div>
</div>
You can do it easily without needing an animation Instead you only need transition.
Run this code snippet example:
function doNext() {
let el = document.querySelector('.questions [showing]');
el.removeAttribute('showing');
let temp = el.nextElementSibling;
if (temp === null) {
temp = el.parentElement.firstElementChild;
}
temp.setAttribute('showing', '');
}
const btn = document.querySelector('#next');
btn.addEventListener('click', doNext);
.questions {
height: 60px;
position: relative;
}
.fader {
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 1s ease;
}
.fader[showing] {
opacity: 1;
transition: all 1s ease 0.75s;
}
<div class="questions">
<div id='q1' class="fader" showing>question...1</div>
<div id='q2' class="fader">question...2</div>
<div id='q3' class="fader">question...3</div>
<div id='q4' class="fader">question...4</div>
</div>
<button id="next">Next</button>
When the attribute showing is removed then the opacity of the question goes from 1 to 0 over 1 seconds. When the attribute showing is added then the element waits for 0.75 seconds and then changes opacity from 0 to 1 over 1 seconds.
The JavaScript I have added simple allows the changing of which element has the attribute showing. Your code would need to do something similar to change which question is showing.
I set the position of each question to absolute with top set to 0 so that all questions show in the same place. BUT doing this requires that you know that maximum size of your questions so the container can be set to the correct height.
Try this sample:
.fade-out {
opacity: 0;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 2s;
height: 0;
width: 0;
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4s;
animation-delay: 0s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
height: auto;
width: auto;
}
100% {
opacity: 0;
}
}
<div id='q1' class="fade-out">question...1</div>
<div id='q2' class="fade-in">question...2</div>
Everything works good on Firefox but chrome shows the animated text blurry. I did everything like -webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0); and everything mentioned here before:
Webkit-based blurry/distorted text post-animation via translate3d
but the problem still exist.
I made very simple example to show you how it looks like. How can I fix this problem?
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
You can also see the example at CodePen
Update 2020-10: this issue appears to be resolved in Chrome/Chromium 85+ in my testing. But it is not entirely fixed. You may still encounter blur in places.
Check this comment in the bug report that outlines continuing work to improve how Chrome handles this: https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103
This misrendering often appears.
You can try transform: translate3d(0, 0, 0) or transform: translateZ(0) und the element with the animation, but it doesnt works always.
-webkit-font-smoothing: antialised is another option but that never worked for me.
When the animation is being moved using percentage the text will become blurred due to the the browser guessing its exact location during the repaint phases. Using a different unit to move in such as 'px' will allow the browser to be specific during it's repaint phase and allow the text to be clean and smooth.
After reading the below I realized that this same concept may also have a factor when it comes to the blurry effect on the text.
Percentages are relative values, which means they have to depend on some other value in order to produce result. So every time you assign a percentage value it has to get it's relative value to perform a calculation. When doing a translation with pixels you only have to change the translation values, but with percentages you have to get element's dimensions first and then apply the translation. And that has to be done for every animation frame.
You can read more about this here: https://stackoverflow.com/a/50416761/4518455
In my testings this seems to fix the issue fully for all of my animations in my application. (10+)
The best solution for text blurring when adding an animation is add "z-index: 1;" on the style where animation is placed.
.in {
-webkit-animation: comein 0.5s 1;
-moz-animation: comein 0.5s 1;
animation: comein 0.5s 1;
animation-fill-mode: both;
z-index: 1;
}
you can check this link its animation time issue pls check down link
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 0.5s 1;
-moz-animation: comein 0.5s 1;
animation: comein 0.5s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 0.5s 1;
-moz-animation: goout 0.5s 1;
animation: goout 0.5s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
http://codepen.io/anon/pen/kkpJaL
I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
I've tried it in Chrome and Safari and the animation runs every time when I press the Open link, but in Firefox the animation only runs the first time I press the link. After that, when I press the link it doesn't load the animation. Is there anything I can do to make the animation run every time I press the link?
Here's what I'm working with:
http://jsfiddle.net/p5hkyovs/4/
<div id="over">
<div class="animation">Fade in - Back</div>
</div>
<div id="start">
Open
</div>
CSS
#over {
display: none;
}
#over:target {
display: inline-block
}
#over:target ~ #start {
display: none;
}
div.animation {
-webkit-animation:fadeIn .5s ease-in-out;
-moz-animation:fadeIn .5s ease-in-out;
animation:fadeIn .5s ease-in-out;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I think the problem is the missing mozilla vendor prefix for the animation-name: fadeIn; value.
Try this JSFIDDLE