افکتهای زیبا برای نمایش رسانه - Media PopUp Effect ( نمونه 8)

*, *::after, *::before {-webkit-box-sizing:border-box;box-sizing:border-box;}

body {

font-family:'Space Mono','Avenir Next',Avenir,'Helvetica Neue',Helvetica,'Segoe UI',Arial,sans-serif;

color:#fff;

background:#4133b4;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

overflow:auto;

overflow-x:hidden;

position:relative;

width:100vw;

}

.js .loading::after {

content:'';

position:fixed;

top:50%;

left:50%;

width:70px;

height:70px;

margin:-35px00-35px;

pointer-events:none;

z-index:101;

border:7pxsolid#4133b4;

-webkit-transition:opacity0.3s;

transition:opacity0.3s;

-webkit-animation:loaderAnim0.8sease-outinfinitealternateforwards;

animation:loaderAnim0.8sease-outinfinitealternateforwards;

}

@-webkit-keyframes loaderAnim {

to {

-webkit-transform:translate3d(0,-100px,0);

transform:translate3d(0,-100px,0);

}

}

@keyframes loaderAnim {

to {

-webkit-transform:translate3d(0,-100px,0);

transform:translate3d(0,-100px,0);

}

}

/* Content */

.content {

position:relative;

}

.content--blended p {

max-width:65vw;

margin:200pxauto;

text-align:justify;

font-size:1.65em;

line-height:1.5;

}

.content--blended {

isolation:isolate;

}

.content__paragraph {

position:relative;

z-index:100;

}

/* Individual paragraph colors and blend modes */

.content__paragraph--c8 {

color:#29fca5;

mix-blend-mode:exclusion;

}

.pop-media {

position:absolute;

display:-webkit-flex;

display:flex;

-webkit-justify-content:center;

justify-content:center;

-webkit-align-items:center;

align-items:center;

width:300px;

height:200px;

pointer-events:none;

opacity:0;

background-repeat:no-repeat;

background-position:50%50%;

background-size:cover;

}

/* Hover text */

.pop-text {

font-weight:bold;

position:relative;

cursor:default;

white-space:nowrap;

word-spacing:-0.1em;

color:#fded62;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

-webkit-touch-callout:none;

-khtml-user-select:none;

}

.pop-text--s4::before {

content:'';

position:absolute;

top:100%;

left:0;

width:100%;

height:2px;

background:#fff;

-webkit-transform:scale3d(0,1,1);

transform:scale3d(0,1,1);

-webkit-transform-origin:050%;

transform-origin:050%;

}

.pop-text--s4:hover::before {

-webkit-transform:scale3d(1,1,1);

transform:scale3d(1,1,1);

-webkit-transition:-webkit-transform0.4scubic-bezier(0.2,1,0.3,1)0.05s;

transition:transform0.4scubic-bezier(0.2,1,0.3,1)0.05s;

}

/* Mask reveal */

.pop-media--reveal {

-webkit-mask:linear-gradient(toright,transparent50%,black50%);

mask:linear-gradient(toright,transparent50%,black50%);

-webkit-mask-size:601px;

mask-size:601px;

-webkit-mask-position:0%0%;

mask-position:0%0%;

}

.pop-media--reveal.pop-media--show {

-webkit-animation:revealMedia0.4scubic-bezier(0.2,1,0.3,1)forwards;

animation:revealMedia0.4scubic-bezier(0.2,1,0.3,1)forwards;

}

/* we use pixels because it's more performant than percentages */

@-webkit-keyframes revealMedia {

to {

-webkit-mask-position:300px0%;

mask-position:300px0%;

}

}

@keyframes revealMedia {

to {

-webkit-mask-position:300px0%;

mask-position:300px0%;

}

}

/* for smaller screens */

@-webkit-keyframes revealMediaSmall {

to {

-webkit-mask-position:250px0%;

mask-position:250px0%;

}

}

@keyframes revealMediaSmall {

to {

-webkit-mask-position:250px0%;

mask-position:250px0%;

}

}

/* Style adjustments for smaller screens */

@media screen and (max-width: 50em) {

.pop-media {

width:225px;

height:150px;

}

.pop-media--reveal {

-webkit-mask-size:501px;

mask-size:501px;

}

.pop-media--reveal.pop-media--show {

-webkit-animation-name:revealMediaSmall;

animation-name:revealMediaSmall;

}

}