Slideshow with content animated in CSS - javascript

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.
How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.
Can anyone give me a hint?
Thanks in advance.

You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.
For the CSS approach, you would use the animation property, like this
#keyframes {
from { color: #fff; } to { color: #000; }
}
#-webkit-keyframes {
from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
animation: myanimation 2s ease-in;
-webkit-animation: myanimation 2s ease-in;
}
For the jQuery approach, look up jQuery's animate feature. You will find all that you need.
https://api.jquery.com/animate/

Related

Intense GPU usage for animations playing over blurred background

Considering this paragraph from calibreapp.com:
Browsers make optimizations by creating separate layers for elements
with CSS transitions or animations on Position, Scale, Rotation and
Opacity. When you have an animated element on its own layer, moving it
around doesn’t affect the positions of surrounding elements, the only
thing that moves is that layer. This way the browser avoids repaints
and does only compositing.
Now imagine we want to blur the whole background, the blur animation starts progresses and finally it finishes, ok?
Now on this blurred background we want to add a simple scale animation like this: (note that this is a separate div with no connection with background we already blurred)
.beaton {
animation: beatonAnime .5s infinite alternate;
}
#keyframes beatonAnime {
0% { transform: scale(1); }
100% { transform: scale(0.96); }
}
The confusing issue is:
Without that blurred background I get 1-2% GPU usage.
With that blurred background (which is not animating now and has finished seconds ago) I get 68% GPU usage!!!
As the paragraph said we should not see any difference between theses two as the blurred animation of background is not running when we add the scaling animation and they are in separate layers.
Here is the link to live example: (Note the GPU not CPU usage)
https://langfox.ir/test/beat/index.html
By the way this is the blur animation on the background:
.overlay {
animation: overlayShow 0.25s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes overlayShow {
from {
backdrop-filter: blur(0);
background-color: rgba(35, 33, 36, 0);
}
to {
backdrop-filter: blur(80px);
background-color: rgba(35, 33, 36, 0.7);
}
}
Is there any solution for this?
NOTE: There is no such issue when I use filter: blur(80px) instead of backdrop-filter: blur(80px);. So what's wrong with backdrop-filter?
i get the same problem when play an animation above a blurred overlay.My final solution is to get a static blur image,it's formate cant be .png and shoule be .jpg.Then i set the overlay css property as 'background-image:url('../xxx.jpg)'.Since the background of the overlay is static,it wont take a lot gpu resource.Its a silly solution.

how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?

I know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that.
So is there a way to achieve smooth fade in and out animation on mobile with a combination of jquery and css3? or even just one? Thank you.
**EDIT**: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after ('#id').css('display','block') and before ('#id').css('opactity','1'). don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.
You should always try and use CSS3 transitions, instead of jQuery animations. Here I use a CSS3 transition to fade out the .square, and then I wait until the transition has ended to set the display to none.
If you animate an element in jQuery, for example, using fadeOut, you'll see what happens. It basically sets the opacity to 1, and then brings that value down to 0 in tiny increments. This is very inefficient. So it's better to always use CSS3 transitions and animations wherever possible.
Fade out: https://jsfiddle.net/danhaswings/znLL0ws5/1/
Fade in: https://jsfiddle.net/danhaswings/kjgmxa8x/
HTML
<div class="square"></div>
CSS
.square {
width: 100px;
height: 100px;
background-color: red;
transition: opacity 1s ease-in-out;
}
jQuery
var $square = $('.square');
$square.css('opacity', '0');
$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
$(this).css('display', 'none');
});
What sort of phone are you testing on to get such slow / jittery animations? Mine seems to work fine for all of the animations that are supported on mobile browsers.
In any case, you can always try to use css keyframes.
Annoyingly, you cannot animate certain attributes (such as display) but it does allow for quite a lot of things including opacity as shown below.
div {
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.to_hide {
-webkit-animation: hide 5s forwards;
animation: hide 2s forwards;
}
#-webkit-keyframes hide {
from {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
position: absolute;
opacity: 0;
}
}
<div class="to_hide"></div>
<div></div>
Keyframes on MDN
Ultimately, on mobiles you should try to avoid using animations as mobile browsers are not optimized for such things. Your website should degrade gracefully in both size, layout, content and also animations.
Should go smoothly if you use jQuery's fadeIn(), which will fade in an element with
display: none
$element.fadeIn();
function show() {
$("#el").fadeIn();
}
#el {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>
Have a look at this article
You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames.
You should be able to achieve a fade transition combining the opacity and transform properties

How to highlight a row in a table on certain occasions

I am not familiar with css or javascript and I am wondering how to have a notification highlight similar to the case when a person commented on a Facebook post, and upon clicking, you will be directed to the said comment with temporary highlight.
Thanks in advance
You can use the CSS3 animation property. Just make sure to add the -webkit- vendor prefix for it to work in all major browsers. The vendor prefixes you need for other CSS3 properties can be found at caniuse.com.
The trick is to add a special class to the element you want highlighted, and applying the animation to that class with CSS.
Try it:
.post{
padding: 1em;
margin: .2em;
background: #ffffff;
border: 1px solid #eceded;
}
.post.highlighted {
-webkit-animation: highlight 6s ease;
animation: highlight 6s ease;
}
#-webkit-keyframes highlight {
from { background: #ddddff }
to { background: #ffffff }
}
#keyframes highlight {
from { background: #ddddff }
to { background: #ffffff }
}
<p class="post">This is just a regular post</p>
<p class="post highlighted">But this one's new!</p>
It looks like you have a few problems you need to solve. I'll walk you through the logic behind each problem. Some of these problems already have solutions posted online, so in those cases I've linked you to the appropriate pages.
1) Respond to a click on an element
http://clubmate.fi/detect-click-with-pure-javascript/
2) Scroll to a specific part of the page
Smooth scroll to specific div on click
3) Highlight an element
This involves changing attributes of an html element, for example the background color. This can be done by changing the class with javascript, and using css to style the element differently when it has the right class
CSS:
.element {
background-color: #0000ff; /* A blue background by default */
}
.element.highlighted {
background-color: #ff0000; /* A red background when the element is highlighted */
}
JS:
document.getElementsByClassname('element')[0].setAttribute('class', 'element highlighted');
Now you just have to run that line of javascript at the appropriate time (after the scrolling has ended - step 2 should give insight on how to do this)
4) Remove the highlighting after a delay
Take advantage of javascript's setTimeout function to remove the highlight class after a delay:
JS:
setTimeout(function() {
document.getElementsByClassname('element')[0].setAttribute('class', 'element'); // Replace "element highlighted" with just "element"
}, 1000); // 1000 means a one-second delay

I want an animation to trigger on active and continue once the active state is gone

I want an animation to start when someone clicks a button but to continue/finish when they unclick.
&:active > .ripple {
-webkit-animation: ripple 3s infinite;
}
The animation only continues so long as the button is held down. Is there a way to achieve this with just css or will I need to use JS? I'm pretty green when it comes to JS so was hoping to achieve with just css.
Thanks!
Did you try the CSS property
&:focus > .ripple {
-webkit-animation: ripple 3s infinite;
}
It's basically the 'onclick' in JavaScript
Tell me if if works for you
Cheers !

jQuery + RGBA color animations

Does anyone know if jQuery can handle an animation like:
rgba(0,0,0,0.2) → rgba(0,255,0,0.4)
I know there is a plugin to handle color animations, but this might be too modern?
Using CSS3 animation (no javascript)
You can also achieve the same effect using CSS3 animation. See below,
Step 1: Create a keyframe for your animation
#keyframes color_up {
from {
background-color: rgba(0,0,0,0.2);
}
to {
background-color: rgba(0,255,0,0.4);
}
}
Step 2: Use the animation rules.
animation-name: color_up;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
DEMO: http://jsfiddle.net/2Dbrj/3/
Using jQuery
jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.
$(selector).animate({
backgroundColor: 'rgba(0,255,0,0.4)'
});
DEMO: http://jsfiddle.net/2Dbrj/2/
Uh, nevermind. Found an amazing modification to the jquery color plugin.
http://pioupioum.fr/sandbox/jquery-color/
use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)

Categories