I have searched for a couple hours now and cant seem to find the correct solution to this. I need to fade in a background image after its loaded. The loading and fadeIn() works with the code i have pasted but it is choppy. So i want to use easeInOutQuad with fadeIn() to see if its smoother. (the reason it is choppy is because there is other script at work doing other things at the same time).I tried this:
$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){});
But it did not work .
var backgroundImage = $(currentWing).data("background-url");
var bgimage = new Image();
bgimage.src = backgroundImage;
$(bgimage).load(function(){
$(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadeIn(1000);
});
It seems you are looking to load an image with fade-in effect.
You may do this either with javascript or with CSS
Javascript:
Simply hide the image once loaded and use fadeIn() to make it appear again with a fade effect.
$(".jsfade").hide(0).delay(500).fadeIn(3000)
Where .jsfade is the class attached to an image
CSS:
You can also use CSS animations to change the opacity of the image to create a fadeIn effect. For an image with .fade class,
<img src="image.jpg" class="fade" />
You can define the css classes as follows
.fade {
opacity: 1;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.fade:hover {
opacity: 0.5;
}
UPDATE:
jQuery UI specifies the following signature for show/hide/fadeIn functions
.show( [duration,] [easing,] [callback] )
Having said that, following is the code with different easing options
$(".jsfade").fadeIn(3000, 'linear') //WITH LINEAR AS EASING OPTION
$(".jsfadeEaseinOutQuad").fadeIn(3000,'easeInOutQuad') //with easeInOutQuad as the easing option.
So, the reason why $(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){}); doesnt seem to work is because your content is probably already visible and hence fadeIn() will essentially do nothing. To See the effect, you need to hide the elements first and then apply the fadeIn().
Use the css property display:none to hide .wings-wrapper
Here's the UPDATED plunkr with both approaches.
Related
I'm currently designing a CSS text fade-in so it fades the next line of text after a few seconds - basically a regular CSS-only opacity transition, but one that also includes an embedded iframe.
At the moment, it appears that CSS 3 opacity does not apply to the 'iframe' property, i.e., you can't add an iframe before the closing 'div' or add 'iframe' to the opacity (or any combination).
Is there a way to allow the text to fade in then time the appearance of the 'iframe' youtube video followed by the third piece of text on a page?
I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.
I was able to do this with JQuery but that requires a special function just for the iframe video. Anything else just failed miserably.
I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.
<style>
#fade p iframe {
margin-top: 25px;
text-align: center;
animation: fadein 20s;
-moz-animation: fadein 20s; /* Firefox */
-webkit-animation: fadein 20s; /* Safari and Chrome */
-o-animation: fadein 20s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
</style>
<div id="fade">
<p>lorem ipsum factorum
<iframe src="..."></iframe>
</p>
</div>
The code above works fine for TEXT ONLY. The opacity fades in over time, but the desired effect would be that the text fades in first, followed by the video (or at the same time) below the fading text.
I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool.
I tried to imitate that effect with styled-component to pass each picture's index as a way to separate them when they are all fading in.
-webkit-animation: ${props =>
`fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1
However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. On the original page(https://pepecph.com/), every picture is showing up fast and delayed differently for some time. And I inspect the image element of the original page, it has this line of css
transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)
I am not good at css so I don't know if this has something to do with that visual effect.
I edited your code a little bit, let me explain what I've done:
First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image.
<Image
pose={pose}
{...props}
style={{
opacity: this.state.opacity,
transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${props.index * 0.5}s`
}}
/>
We also need to add a setter function to change the opacity state via refs:
toggleOpacity = o => {
this.setState({ opacity: o });
};
The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary:
const Gallery = () => {
const [isSelected, setIsSelected] = useState(null);
const refs = {};
let images = [];
for (let i = 0; i < 10; i++) {
refs[i] = useRef(null);
let height = Math.floor(Math.random() * 400 + 400);
let width = Math.floor(Math.random() * 400 + 400);
images.push(
<PicContainer index={i} key={i} selected={isSelected}>
<ZoomImg
src={`https://source.unsplash.com/random/${height}x${width}`}
onLoad={() => {
// Calling ref function
refs[i].current.toggleOpacity(1);
}}
// Setting ref
ref={refs[i]}
index={i}
setIsSelected={setIsSelected}
/>
</PicContainer>
);
}
return (
<Mansory gap={"15em"} minWidth={600}>
{images.map(image => image)}
</Mansory>
);
};
Here is the full example.
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;
}
I am creating a dialog window for a program. It will be a simple popup that can display whatever message we pass, as well as an image for success or error.
I can make the WebDialogWindow fade in by simply adding the CSS class "FadeIn3" to the window itself. (Code is below) The window fades into view and works great. I have a button inside the window that will call a Javascript function to close the window. When that's clicked, instead of the window instantly disappearing I'd like to have the window fade away over the course of 1 or 2 seconds. Does anyone know how I can achieve this?
WebDialogWindow
<ig:WebDialogWindow ID="dialogMessage" runat="server" WindowState="Hidden"
Width="300px" Height="150px" Modal="true" InitialLocation="Centered"
CssClass="fadeIn3" StyleSetName="Default">
...
<asp:Button ID="btnCloseWindow" runat="server" Text="Close" OnClientClick="return hideWindow();" />
</ig:WebDialogWindow>
CSS
.fadeIn3 {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Javascript
function hideWindow() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
//I think I need something here to add a "fadeOut" CSS class to the window
// that would cause it to fade out. If I add it directly to the
// CSSClass property then the window fades in, fades out, then appears
// until the close button is clicked, at which point it instantly disappears.
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
Do you think jQuery "fadeOut" method would do the work for you?
It would look like something like this:
<script type="text/javascript">
function complete() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
function hideWindow() {
$("#dialogMessage").fadeOut(2000, complete);
return false;
}
</script>
You can set the animation's duration in the first argument (in the example - 2 seconds).
.fadeOut()
I just ended up making 2 fadeInOut CSS classes, one for 3 seconds, and one for 5. Then I apply that class to the dialog window, and call a function called timedHide() with the same number of seconds. That function will wait that many seconds and then call the original hideWindow() function at around the same time the fadeInOut script is finishing up.
CSS
#keyframes fadeinout {
0% {opacity: 0;}
10%{opacity: .2;}
20%{opacity: .4;}
30%{opacity: .6;}
40%{opacity: .8;}
50%{opacity: 1;}
60%{opacity: .8;}
70%{opacity: .6;}
80%{opacity: .4;}
90%{opacity: .2;}
100% {opacity: 0;}
}
Javascript
function timedHide(numSeconds) {
var timeout = 1000 * numSeconds;
setTimeout("hideWindow()", timeout);
}
I'm trying to create a CSS animation that when a user clicks an element it animates to the right then when they click it again it animates to the left. The problem I have is that it is introducing flickering. I know the reason, but I'm not sure the best way to fix it. I want the most elegant solution for this problem.
I setup a jsFiddle (WebKit only) here: http://jsfiddle.net/4Ad5c/2/
The CSS:
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
The JavaScript:
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box";
setTimeout(function(){
box.className = "box " + className;
},1);
};
When you click the Animate Right it works as expected, but when you click the Animate Left it will flicker to the left and then animate as expected. The reason is that you have to remove the class and add another in order to get the animate to run again, but I don't know the best way to get this working. I figure I could add a class when removing the previous animation that has it in its current state, but that seems wrong to me.
Thanks for the help!
Reason for flickering:
You are applying class box on click before setting the next animationClass which makes the box go to left abruptly. and then you are applying the animation to go reverse. So it causes flickering while it abrupty goes left (removal of class) and adding class in timeout causes revereses animation according to the fillmode and direction in animateLeft class and makes it even more worser as goRightLeft again adds margin pulls it to right due to the margin in the rule and webkit-animation-fill-mode: backwards; pushes to to the left. So one approach i mentioned here is to do the reverse (adding/reducing) the margin.
Here is one solution for this:
For real reverse animation you need to apply margin decresing from 100px to 0 as you do while forward animation. So just add keyframes for LeftToRight and apply that in animation.
Css
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goLeftRight 1s; /* Note the goLeftRight animation */
-webkit-animation-fill-mode: backwards;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
#-webkit-keyframes goLeftRight { /* Note the new keyframes rule for reverse animation*/
0%{margin-left: 100px;}
100%{margin-left: 0px;}
}
Script
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box " + className;
};
Demo
I am really new at JS. I am using this script to create tooltips:
<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover'."onMouseOut="javascript:this.className='SimpleTip'">
It works perfectly but I'd like to add a fade in effect when the tooltip appears.
Thanks
Here is a link to the jquery docs http://api.jquery.com/category/effects/fading/
You want to do something like this:
$('.SimpleTip').on('mouseOver', function (){
$('.SimpleTipHover').fadeIn();
}
You can do it in plain javascript with timer and changing opacity but easier would be to just use jQuery to hide/show tips
or you can use CSS3 transitions
This example uses CSS Transitions
http://jsfiddle.net/nickaknudson/mZmuQ/
JS
<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover';"onMouseOut="javascript:this.className='SimpleTip';">test</span>
CSS
.SimpleTip {
background-color:green;
}
.SimpleTipHover {
background-color:red;
}
span {
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 1s;
/* Firefox 4 */
-moz-transition-property:background;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:1s;
/* Safari and Chrome */
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
/* Opera */
-o-transition-property:background;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:1s;
}
RESOURCES
http://www.w3schools.com/css3/css3_transitions.asp