I have a slider with images and videos which are fading in as soon as the elements are loaded. I am using a common lazy load library and as soon as the images/videos have the class "is-loaded", the opacity is animated from 0 to 1.
img.lazy,
video.lazy {
opacity: 0;
}
img.lazy,
video:not(.initial),
_::-webkit-full-page-media, _:future, :root video:not(.initial){
transition: opacity .3s;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
}
img.initial,
img.is-loaded,
img.error,
video.initial,
video.entered,
video.error{
opacity: 1;
}
img:not([src]),
video:not([src]){
visibility: hidden;
}
This works perfectly with images but videos are somehow blending in instantly. Even when I let the videos load in the background and go to the slide where the video is located, the video (which already has the class "is-loaded") is displaying instantly after a couple of milliseconds.
You can see this issue in my codepen: https://codepen.io/m42444/pen/PoOXxbG. Just click inside the blue dotted box to skip through the slides. The problem is just visible in the first loop where no element is loaded. Then, every slide is fade-animated on click (which has nothing to do with the loaded-fade-in).
It seems like the videos are firing "ready loaded" too soon and my fade in animation is happening with a video without any visible surface...
Thank you for any help! :)
Related
I am working on a project where users go back and forth between modals. I'm trying to do this by css transitioning opacity from 0 to 1. However, I noticed something is going very slow with my transitions.
I am getting about a 900ms to 2,000ms lag delay with some of my transitions, so I hooked up my phone to my laptop using chromes remote dev tools https://developer.chrome.com/devtools/docs/remote-debugging and started recording performance events https://developer.chrome.com/devtools/docs/timeline
This is an image of the recorded events fired from the phone. The yellow block is the jQuery click event handler firing, the yellow stripes belong to a jQuery.animate() function. However that green block at the bottom is almost 2 seconds long and it's labeled "Rasterize Paint". The purple slivers on the right are the actual animation taking place.
(EDIT: The jquery.animate() is different from the css animation taking place at the same time. I am adding a class in the event handler that changes opacity of an element that has transition: opacity 300ms set)
What does 'Rasterize Paint' mean? Why does this take so long? What can I do to avoid this?
EDIT:
Here is a fiddle of the page I'm running. I wasn't able to make a fiddle have the meta tag so it may have an extra 300ms delay on mobile devices. I recommend going through the steps "Got It! -> Fighter -> Accept -> Archery" After selecting "Archery" that is the slowest transition on the page. Why is that? I assume the layered opacities makes it very slow, but I still don't know for sure.
https://jsfiddle.net/2fLb1fd2/4/
.step {
position: absolute;
width: 100%;
max-width: 650px;
background: rgba(16, 16, 16, 0.8);
-webkit-transition: opacity 300ms linear, top 300ms linear;
-moz-transition: opacity 300ms linear, top 300ms linear;
-o-transition: opacity 300ms linear, top 300ms linear;
transition: opacity 300ms linear, top 300ms linear;
opacity: 0;
top: -100px;
left: 0;
right: 0;
margin: 30px auto 20px;
padding: 20px 20px;
color: white;
pointer-events: none;
text-align: center;
}
.step.showing {top:0;opacity:1;pointer-events:auto;}
Your problem here probably isn't opacity, opacity is a very cheap property (performance-wise) to animate with CSS. You are animating the top property however, this will trigger reflow each frame it is animated.
In order to make your animation smoother, you should animate transform: translateY(x); instead of the top property.
i made some several html files. at the main page i just wrote down some codes like this
<a href="new.html>
<img src="img/button" id="buttonid">
</a>
when i click the button, i see that the web starts new.html activity. I want to put some smooth page transitions when i open that "new.html". I searched through internet, and found out that most of the page transitions are done by putting other class into format. Whatever, are there any methods for page transitions that can be implemented when using ??
You have to hijack your <a> tag and handle its behaviour through javascript.
FadeOut part
Start with giving it an empty target :
...
So when you click it, nothing happens.
Then, use a custom attribute to store the URL you want to load when clicking this tag :
...
Then add some class that will allow javascript / jQuery to target your link :
...
In your javascript, target your smoothLinks and write a delayed action (using jQuery here) :
$("a.smoothLink").click( function(e){
$("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function
window.location = e.currentTarget.attributes['data-url'].value;
});
}
However, for performance reasons, I strongly advise you to prefer CSS3 opacity animations (opacity 1 --> 0 --> 1) because, unlike jQuery's fade functions, they're hardware accelerated.
Here's how to do :
(JS)
$("a.smoothLink").click( function(e){
$("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
(CSS)
.fadeOut {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
FadeIn part
Once your new page is loaded, it has to be blank, then fade in. Start with making the whole body transparent :
(CSS)
body{
opacity :0;
}
Then, fade it in.
Using the jQuery method :
$("body").fadeIn()
Using the CSS3 method :
In your HTML, give the body a "fadeIn" class :
(HTML)
<body class="fadeIn">
Back to your CSS, write an instruction for fading in anything with the "fadeIn" class :
(CSS)
.fadeIn {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
So, on page load, your body will gradually get visible in 1 second.
I have to say this in untested, but should be a nice hint :)
EDIT - **
**Simpler solution with a white overlay
Just cover your whole page with a full white overlay, that you can make transparent or opaque at will :
(HTML)
<div id="overlay"></div>
(CSS)
div#overlay{
position: absolute;
z-index:999;
top:0;
left:0;
width: 100%;
height: 100%;
background:white;
pointer-events:none; // so you can click through
opacity : 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
(JS)
$("div#overlay").css("opacity",0); // will fade out the overlay on page load
$("a.smoothLink").click( function(e){
$("div#overlay").css("opacity",1);
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
The only way to make some transition is to use ajax as Jquery Mobile does in example (have a look at http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html).
There is one way to sort of spoof it, I use Jquery for ease of use here.
in your css set the body tag to display none then with jquery on document load set it to fade in, I've done it at 3 seconds for effect and done an alert etc. muck around with it..
$( "body" ).fadeIn( 3000, function() {
alert('Billys spoofed slow sort of fade in');
$('body').css('color','red');
});
body{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>
I use javascript function for each menu and call that function onClick event. What i face is the image is not changing smoothly, Some times its loading slowly.
Lets consider 2 links each link calls a function for changing the background of the body
This is how i change now
function events(){
$("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');
}
function projects(){
$("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
return false;
}
HTML
<li id="projectsm">Projects</li>
<li id="eventsm">Events</li>
So when i click the menu it must transform like fade out or something smoothly not like flashing
If I understand your problem, you can change body background image with jQuery on click on a link, but it's not smooth / fast enough.
I think it's mainly because when you change your background, the new background isn't loaded yet. So it have to load, then to change when it's loaded.
Solutions :
you can load all the backgrounds on document load
you can load the new background and then call your switch function
In both case, you can use ImagesLoaded plugin to load your images when you want (https://github.com/desandro/imagesloaded).
Then if you want a smooth transition, you can use CSS3 Transition on your body selector :
transition: background-image 1s ease-in-out;
But I'm not sure transition works on background-image property...
Try this code, if that's what you want:
You need load image first, then use javascript.
HTML:
<img src="http://lorempixel.com/400/200/city" alt="" width="0" height="0" />
<img src="http://lorempixel.com/400/200/people" alt="" width="0" height="0" />
<ul>
<li id="projectsm">Projects</li>
<li id="eventsm">Events</li>
</ul>
JS:
$(function(){
$('#projectsm').click(function(){
$('body').css('background-image','url(http://lorempixel.com/400/200/city)')
});
$('#eventsm').click(function(){
$('body').css('background-image','url(http://lorempixel.com/400/200/people)')
});
});
and for smooth transition, use css3 transition property
CSS:
body{
background-image:url(http://lorempixel.com/400/200/animals);
background-repeat:no-repeat;
background-size:cover;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
http://jsfiddle.net/sL8q7nbb/1/
When my webpage loads, I want there to be links. Once all the links are clicked, I want an image to fade in on the bottom of the page (the image says 'complete' which basically means the user has completed clicking all the links). I first hide the image when the webpage loads, like so;
<html>
<body>
<!-- links which need to be clicked go here -->
<img id='complete' src='../images/complete.png' alt='' />
</body>
</html>
<style>
#complete {
visibility: hidden;
}
</style>
<script>
// once all links are clicked
$('#complete').fadeIn();
</script>
With this code, #complete does not fade in (probably because visiblity is set to hidden). I tried making visiblity set to visible right before the fade in command but that still didn't make it fade in. I also tried making the css
#complete {
filter: alpha(opacity = 0);
}
and the script
$('#complete').fadeTo('slow', '100');
and that doesn't work, #complete just appears really fast rather than fading in slowly.
I am using IE8 with CSS, any idea on how to fix this?
on css
#complete {
display: none;
}
and on javascript
$('#complete').fadeIn();
And try to use latest jquery
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
See it on action: http://jsfiddle.net/KUqJL/ your problem is what I said about css
#complete {
visibility: hidden;
} replace with: display:none
Change your css to:
#complete {
display:none;
}
and if you'd like to use .fadeTo(), the second parameter must be an integer between 0 and 1.
$('#complete').fadeTo("slow", 1);
"slow" could also be replaced with a millisecond value such as 3000 (3 seconds), for an even slower fade.
$('#complete').fadeTo(3000, 1);
Here is a fiddle that may help.
visibility cannot be animated. Something is either visible or hidden, there are no middle stages.
But you can achieve this effect by using opacity instead of visibility, since visible elements have an opacity between 0 and 1.
#complete {
visibility: visible; /* this is the default so this line is not required */
opacity: 0;
}
And use the .animate() method.
$('#complete').animate({
opacity: 1.0
}, 'slow');
jQuery has methods like .fadeIn() .fadeTo() and .fadeOut() which animates opacity with the addition of setting the display property to none on 0 opacity and vica-versa when animating.
Since display: none not only makes elements invisible, but collapses them (width and height are 0 and the element is not part of the layout), I think the opacity property is more suitable for you.
This can also be done with CSS transitions:
#complete {
opacity: 0;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-webkit-transition: opacity 0.8s linear;
transition: opacity 0.8s linear;
}
#complete.fadedIn {
opacity: 1;
}
And the JavaScript than changes to:
$('#complete').addClass('fadedIn');
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.