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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

  • 3 weeks later...
don_tolbert

The original post and subsequent code do not work for me.  I've put the lens.png file in multiple locations on my linux emby file directory (/dashboard-ui, /images) and changed the code 

url(../../web/lens.png)

to read ../web/lens.png, and /web/lens.png and finally just lens.png but have not had any success.

Link to comment
Share on other sites

Do you have a dashboard ui  folder .. and did you restart emby and your browser?

Checking it myself.. again.. 

EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since

Edited by Guest
Link to comment
Share on other sites

chef
7 minutes ago, Hxemby001 said:

Do you have a dashboard ui  folder .. and did you restart emby and your browser?

Checking it myself.. again.. 

EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since

It's been a while since I did this.  I was on a "learn all the CSS properties off by heart" kick back then, so I tried out a whole bunch of stuff. 😆

I'm not entirely sure it still stands up 🤔

Link to comment
Share on other sites

Yeah there are a few that really don't work anymore... 👍 

I could NEVER learn them all by heart unless I start using them day to day again.. Dreamweaver used to be a life saver... love that program..

Now I am using the 'Developer Tools' in Edge.. Used to use an extension in Firefox.. starting to miss FF these days..

 

Link to comment
Share on other sites

jachin99
59 minutes ago, Hxemby001 said:

Do you have a dashboard ui  folder .. and did you restart emby and your browser?

Checking it myself.. again.. 

EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since

Where did you put the graphic, and where did you put the the actual code?  What file extension did you give it

Link to comment
Share on other sites

Inside the main directory for emby and its executable in... a folder called 'dashboard-ui' this is basically the servers 'root' directory..

The code was inserted in the CSS section of Settings under Dashboard in the Manage Emby Server Section..

Link to comment
Share on other sites

don_tolbert
16 hours ago, Hxemby001 said:

Do you have a dashboard ui  folder .. and did you restart emby and your browser?

Checking it myself.. again.. 

EDIT: I get the lens but I do not get the blur/fade-in.. CSS has probably changed in emby since

I started over, removed the code, removed the lens.png.  Restarted the Emby server, then added the code (first code, not second) and dropped the lens.png back into /opt/emby-server/system/dashboard-ui.  I stopped the Emby server then started it again.  I now see the lens but the blur/fade-in is not there much like you experience.  Thanks for your help.  If anyone can get the blur/fade-in to work in version 4.5.4.0, please reply here.

Link to comment
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...