Jump to content

Some cool CSS animations you can add to your web interface :)


Recommended Posts

Some of these might be annoying some are not!

 

I don't pretend to be an expert here, but I do like some of the subtle effects added through CSS.

 

 

 

Let's have all the user login images grey scale, and when a cursor hovers over them, use a shine animation to show them in color!

#loginPage .card{
       -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{
  
-webkit-filter: grayscale(0);
	filter: grayscale(0);

}

/*cancels the pulse in animation attached to cardImageContainers HACK */
#loginPage .cardImageContainer{
animation-name:pulsein;
animation-duration:4s;
}

.cardImageContainer.coveredImage:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    
}

.cardImageContainer.coveredImage:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
} 

Let's change the logo on the login page and fade it in:

#loginPage .header:before{
content: "YOUR_NEW_HEADER" !important;
visibility: visible !important;
font-size: 350%;
font-weight:lighter;
background-color: rgba(0,0,0,0.5);
border-left: 3px solid rgba(82,181,75,225);
padding-left:10px;
animation-name: fadein;
	animation-duration: 2s;
}

Fade in:

@keyframes fadein {
    from {  visibility:visible; 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; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

 

 
 
 

 

Although Luke uses "Lazy load' on the details screen to make things look smooth,

 

we can add these 'fadein' animation to help it along, use the 'fadein' effects from the post above:

.cardText{
animation-duration: 4s;
 animation-name:fadein;
}

.textlink{
animation-duration: 3s;
 animation-name:fadein;
}

.itemGenres{
animation-duration: 4s;
 animation-name:fadein;
}
.itemMiscInfo{
animation-duration: 2s;
 animation-name:fadein;
}
.itemName{
animation-duration: 2.5s;
 animation-name:omgwtfbbq;
}

.tagline{
animation-duration: 4s;
 animation-name:fadein;
}

.mediaInfoIcons{
animation-duration: 5s;
 animation-name:fadein;
}

You can make the primary image of your media items grow inside their container when you cursor over them:

This needs some work (it's not going to work on all browsers) but has a nice effect. Whats cool about this one is that when you use CoverArt Plugin, the image grows to the size of the border of the treated cover.

.cardImageContainer:hover{
animation-duration: 0.5s;
 animation-name:pulseIn;
}

@keyframes pulseIn {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1.15, 1.15, 1.15);
  }
}

Let's make the 'played indicator' on your movies just a little bit transparent, and fade it in after all the primary images have loaded... Cool!:

.playedIndicator{
opacity:0.8;
animation-duration: 7s;
 animation-name:fadein;
}

Alright! that was fun!

Edited by chef
  • Like 4
Link to post
Share on other sites

This one is really neat... if you like over the top animations!

 

It starts by making all your login user images black and white, and when you hover over them, they spin 360 degrees and become in color  ;)

#loginPage .card{
-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{

-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);

-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;

-moz-transition: 1s;
-moz-transform-style: preserve-3d;
  
-o-transition: 1s;
-o-transform-style: preserve-3d;

transition: 1s;
transform-style: preserve-3d;

-webkit-filter: grayscale(0);
	filter: grayscale(0);

position: relative;


}
  • Like 2
Link to post
Share on other sites

Let's make the primary image grow in its container, have a quick shine across it on mouse over!

I like this one the best:

.cardImageContainer.coveredImage:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    
}

.cardImageContainer.coveredImage:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.cardImageContainer.coveredImage:hover{
animation-duration: 0.5s;
 animation-name:pulseIn;

}
Link to post
Share on other sites

This is my favorite so far!

 

If you use the above-mentioned shine effect on your primary images, the login page will also have the shine and 'grow effect'.

 

However, the 'grow effect' doesn't want to 'stick' on the login page, making it quickly jump back to its original size. This looks hacky...

 

In order to fix this, we can add the following, and with the code mentioned above, the login Page images end up with a really nice 'grey-scale' image which, when a cursor runs across it, uses the shine animation revealing the image in color!

 

Let's add grey scale login page images which change to color with a shine animation when a cursor hovers over it.

#loginPage .card{
       -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{
  
-webkit-filter: grayscale(0);
	filter: grayscale(0);

}

/*cancels the pulse in animation attached to cardImageContainers HACK */
#loginPage .cardImageContainer{
animation-name:pulsein;
animation-duration:4s;
}

.cardImageContainer.coveredImage:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    
}

.cardImageContainer.coveredImage:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Edited by chef
  • Like 1
Link to post
Share on other sites

somebody has too much time on their hands :P

Just wait for my theatre skin to be finished :)

  • Like 1
Link to post
Share on other sites

Based on these scripts I modified them to provide a highlight while hovering over cards and episodes. A bit subtle, however I believe it looks elegant. I added the listitemImage to allow for the same effect on episodes.

#loginPage .card{
       -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{
       -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/*cancels the pulse in animation attached to cardImageContainers HACK */
#loginPage .cardImageContainer{
animation-name:pulsein;
animation-duration:4s;
}

.cardImageContainer:hover {
        -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.cardImageContainer:hover:after {
        -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}

.listItemImage:hover {
        -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.listItemImage:hover:after {
        -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}

  • Like 2
Link to post
Share on other sites

adding these to the previous script provides a similar effect on the Live TV guide:

.guide-channelHeaderCell.itemAction:hover {
       -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.guide-channelHeaderCell.itemAction:hover:after {
       -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}

.programCellInner:hover {
       -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.programCellInner:hover:after {
       -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}
Link to post
Share on other sites

 

Based on these scripts I modified them to provide a highlight while hovering over cards and episodes. A bit subtle, however I believe it looks elegant. I added the listitemImage to allow for the same effect on episodes.

#loginPage .card{
       -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{
       -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/*cancels the pulse in animation attached to cardImageContainers HACK */
#loginPage .cardImageContainer{
animation-name:pulsein;
animation-duration:4s;
}

.cardImageContainer:hover {
        -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.cardImageContainer:hover:after {
        -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}

.listItemImage:hover {
        -webkit-filter: brightness(120%) grayscale(20%) contrast(80%);
        filter: brightness(120%) grayscale(20%) contrast(80%);
}

.listItemImage:hover:after {
        -webkit-filter: brightness(0) grayscale(0) contrast(0);
        filter: brightness(0) grayscale(0) contrast(0);
}

 

This one is great! thanks for sharing it. Adding the brightness during the shiny animation is a nice touch!

Link to post
Share on other sites
  • 2 years later...
daedalus

#loginPage .card{
       -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

#loginPage .card:hover{
  
-webkit-filter: grayscale(0);
	filter: grayscale(0);

}

/*cancels the pulse in animation attached to cardImageContainers HACK */
#loginPage .cardImageContainer{
animation-name:pulsein;
animation-duration:4s;
}

seems not to work anymore, could someone please update this?

Link to post
Share on other sites
chef
Posted (edited)

seems not to work anymore, could someone please update this?

The login page doesn't have the 'loginPage' ID anymore.

 

I have been able to target the page with JavaScript, and I also wrote a plugin which adds custom JavaScript to emby, and monitors the file. So if an update removed the custom scripts the plugin puts it back.

 

But inorder to customize the cards on the login it was the only way.

Edited by chef
Link to post
Share on other sites
daedalus

oh ok these got removed, that explains

i also ran into problems while i tried to update some other old css snippets, with my poor understanding of css

 

:( seems to get harder and harder to customize emby to our liking

Link to post
Share on other sites
chef

You could add the id back to the login page html file. Then all your css would work again :)

Link to post
Share on other sites
chef

what then had to be redone on every update <_<

Yes,

 

I am working on that plugin which allows for styles to be set, and items to be targeted in JavaScript without edits being removed on update.

 

It's working quite well for me.

 

But, it's needs some more work to allow for the JavaScript file to be updated and loaded independently from the plugin.

 

The plugin page will have a textbox much like the custom css page that will allow JavaScript to be saved and side loaded.

 

It's quite the undertaking.

 

But it's not css.

Link to post
Share on other sites
chef

Will this plugin work with ET?

Hi Princess!

 

No, it's just for the web client. But, word on the street is the theater is about to have a big overhaul in it's UI. Which is very exciting!

Link to post
Share on other sites
daedalus

But, word on the street is the theater is about to have a big overhaul in it's UI. Which is very exciting!

i won't believe it until it's here and good

on the first transition we also were very excited and it leads us to what we have now

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...