Jump to content

adding a lens effect to web app details page - J. J. Abrams style!


chef

Recommended Posts

 

JJ. Abrams would be proud!

#itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer>h1 {
    font-weight: lighter !important;
    font-variant: petite-caps !important;
    animation: tracking-in-expand 0.7s 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both !important;
}

.nameContainer:after {
    position: fixed;
    content: '';
    background: url(../../web/lens.png);
    top: -10%;
    left: 10%;
    width: 34%;
    height: 40%;
    z-index: -1;
    background-size: cover;
    animation: fadeInThenOut 3s 2s forwards;
    /* transform: translate(-41%, -30%); */
    opacity: 0;
}


@keyframes fadeInThenOut{
    0%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    75%{
        opacity:0.3;
    }
    100%{
        opacity:0;
        transform: translateX(4%);
        
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

post-27-0-51343200-1569289561_thumb.png

 

Drop the file above into "*AppData*\Roaming\Emby-Server\system\dashboard-ui" folder and restart the server to add the image to the web services.

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

Oh man! I have perfected this! The secret was to rotate the lens flare image away from the user, now it just looks like it's meant to be there!

 

I will posted updated css.

Link to post
Share on other sites

#itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer:after {
    position: absolute;
    content: '';
    background: url(../../web/lens.png);
    top: -180px;
    left: -5%;
    width: 30%;
    height: -webkit-fill-available;
    z-index: -1;
    background-size: cover;
    animation: fadeInThenOut 15s infinite;
    transform: rotateX(-35deg);
    opacity: 0;
}

@keyframes fadeInThenOut {
    0% {
        opacity: 0;
        
    }
    25%{
        opacity: 1;
    }
    50% {
        opacity:0;
        transform: rotateX(-75deg);
    }
    75%{
        opacity: 1;
    }
    
    100% {
        opacity: 0;
        transform: rotateX(-75deg);
       
    }
}
Link to post
Share on other sites
PrincessClevage

#itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer:after {
    position: absolute;
    content: '';
    background: url(../../web/lens.png);
    top: -180px;
    left: -5%;
    width: 30%;
    height: -webkit-fill-available;
    z-index: -1;
    background-size: cover;
    animation: fadeInThenOut 15s infinite;
    transform: rotateX(-35deg);
    opacity: 0;
}

@keyframes fadeInThenOut {
    0% {
        opacity: 0;
        
    }
    25%{
        opacity: 1;
    }
    50% {
        opacity:0;
        transform: rotateX(-75deg);
    }
    75%{
        opacity: 1;
    }
    
    100% {
        opacity: 0;
        transform: rotateX(-75deg);
       
    }
}
Private YouTube link?
  • Like 2
Link to post
Share on other sites
  • 1 year later...
  • 2 weeks later...
CyberPoison
On 9/24/2019 at 3:47 AM, chef said:

 

 

JJ. Abrams would be proud!




#itemDetailPage>div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg>div.detailPagePrimaryContainer.padded-left.padded-right>div.detailPagePrimaryContent>div>div.nameContainer>h1 {
    font-weight: lighter !important;
    font-variant: petite-caps !important;
    animation: tracking-in-expand 0.7s 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both !important;
}

.nameContainer:after {
    position: fixed;
    content: '';
    background: url(../../web/lens.png);
    top: -10%;
    left: 10%;
    width: 34%;
    height: 40%;
    z-index: -1;
    background-size: cover;
    animation: fadeInThenOut 3s 2s forwards;
    /* transform: translate(-41%, -30%); */
    opacity: 0;
}


@keyframes fadeInThenOut{
    0%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    75%{
        opacity:0.3;
    }
    100%{
        opacity:0;
        transform: translateX(4%);
        
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

post-27-0-51343200-1569289561_thumb.png

 

Drop the file above into "*AppData*\Roaming\Emby-Server\system\dashboard-ui" folder and restart the server to add the image to the web services.

 

Hi @chef can you please tell us how you make the cast crew round in the new version of emby ? 

 

Also looks like your css doens't work on version  4.6.0.26

Edited by CyberPoison
Link to post
Share on other sites
1 hour ago, CyberPoison said:

 

Hi @chef can you please tell us how you make the cast crew round in the new version of emby ? 

 

Also looks like your css doens't work on version  4.6.0.26

There is a post somewhere on the fourm called: custom css. I'd t have round actor images anymore, and I can't remember where the code was. 

I'll see if I can find it.

  • Like 2
Link to post
Share on other sites
CyberPoison

I have tried some of them but unfortunately all of them broke me the page like no Actor name or personage name on movie etc... 

So for now I have it by default. 

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...