parallax.css/parallax.css

Pure css library for the parallax effect

/*  inspiration
    https://keithclark.co.uk/articles/pure-css-parallax-websites/
    https://segmentfault.com/a/1190000040563987/en
*/
html {
    overflow: hidden; /*move scrollbar to body tag*/
}
/*---global vars---*/
:root {
    --p-align: 50;
    --p-perspective: 1000;
    --p-speed: 0.5;
    --p-scale: 1;
    --p-transform: ;
    --p-scrollbar-width: 17px;
}
/*---parallax container---*/
body,
.prx_container,
.prx_container_x,
.prx_container_y {
    transform-style: flat;
    perspective: calc(var(--p-perspective, 10) * 1px);
}
/* set prx_group automatically */
body *,
.prx_container *,
.prx_container_x *,
.prx_container_y * {
    transform-style: preserve-3d;
}
body,
.prx_container_y {
    perspective-origin: calc(100% * var(--p-align) / 100) 50%;    
    overflow-x: hidden;
    overflow-y: auto;
    --p-container-size: 100vh;
    height: var(--p-container-size);
}
.prx_container_x {
    perspective-origin: 50% calc(100% * var(--p-align) / 100);
    overflow-x: auto;
    overflow-y: hidden;
    --p-container-size: 100vw;
    width: var(--p-container-size);
    height: unset;
}

/*---parallax items---*/
.prx_fit {
    position: relative;
    display: block;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    z-index: -1;
    /*  size relative to container  */
    --p-size-calc: calc(var(--p-size, 100) / 100 * var(--p-container-size));
    --p-scale-to-fit-above1: calc(
        (100*var(--p-scale-adjust) + var(--p-size) - 100) /
        (var(--p-scale-adjust) * var(--p-size))
    );
    /*  a: scale-adjust; b: size(vh)
        (a+b-1) / ab    */
    --p-scale-to-fit-below1: calc(
        -1* 
        (100*var(--p-scale-adjust) - var(--p-size) - 100) /
        (var(--p-scale-adjust) * var(--p-size))
    );
    /*  a: scale-adjust; b: size(vh)
        -(a-b-1) / (ab)    */
    --p-scale-to-fit: max(var(--p-scale-to-fit-above1), var(--p-scale-to-fit-below1));
    --p-scrollbar-width-scaled: var(--p-scrollbar-width) * var(--p-align) / 100;
    /*  max() is not available for 3.27% of global users    */
}
body .prx_fit,
.prx_container_y .prx_fit {
    height: var(--p-size-calc, 100vh);
    /* center even if oversized (not using translate) */
    --p-center-shift: calc((1% - 1% / var(--p-scale-to-fit)) * var(--p-align));
    left: var(--p-center-shift);           /*make sure it is relative*/
    width: calc(100% / var(--p-scale-to-fit, 1) + var(--p-scrollbar-width-scaled));
}
.prx_container_x .prx_fit {
    width: var(--p-size-calc, 100vw);
    --p-center-shift: calc((1% - 1% / var(--p-scale-to-fit)) * var(--p-align));
    left: var(--p-center-shift);
    height: calc(100% / var(--p-scale-to-fit, 1) + var(--p-scrollbar-width-scaled));
}
body [prx],
.prx_container_y [prx] {
    transform-origin: 
    var(--p-origin)
    50%;
}
.prx_container_x [prx] {
    transform-origin:
    50%
    var(--p-origin);
}
[prx] {
    --p-perspective-ratio: calc(5 / var(--p-perspective));  /*5 is previous version default perspective val.*/
    --p-depth: calc(var(--p-perspective-ratio) * var(--p-perspective) * (1 / (var(--p-speed, 0.5)) - 1));
    --p-depth-calc: calc((1 / var(--p-perspective-ratio)) * var(--p-depth));
    --p-scale-adjust: calc(1 + var(--p-depth-calc, 1) / var(--p-perspective));
    /*1 + (translateZ * -1) / perspective*/
    --p-scale-complete: calc(var(--p-scale-adjust) * var(--p-scale-to-fit, 1) * var(--p-scale, 1));
    --origin-shift: calc(
        100% *
        var(--p-scale-adjust)*(var(--p-scale) - 1) /
        (2*(var(--p-scale-complete) - 1))
    );
    /*  a: scale-adjust; b: scale
        a*(b-1) / (2*(ab-1))    */
    --p-origin: calc(
        1% * var(--p-align) + 
        (50 - var(--p-align)) / 50 * var(--origin-shift)
    );
    /*  y: origin-shift; z: align
        z + ((50-z)/50) * y    */
    transform:
    translateZ(calc(var(--p-depth-calc, 1) * -1px))
    scale(var(--p-scale-complete))
    var(--p-transform);
}
[prx="0"] {
    --p-depth: 0;
}
[prx="1"] {
    --p-depth: 1;
}
[prx="2"] {
    --p-depth: 2;
}
[prx="3"] {
    --p-depth: 3;
}
[prx="4"] {
    --p-depth: 4;
}
[prx="5"] {
    --p-depth: 5;
}
[prx="6"] {
    --p-depth: 6;
}
[prx="7"] {
    --p-depth: 7;
}
[prx="8"] {
    --p-depth: 8;
}
[prx="9"] {
    --p-depth: 9;
}
[prx="10"] {
    --p-depth: 10;
}

[prx="-1"] {
    --p-depth: -0.3;
}
[prx="-2"] {
    --p-depth: -0.6;
}
[prx="-3"] {
    --p-depth: -0.9;
}
[prx="-4"] {
    --p-depth: -1.2;
}
[prx="-5"] {
    --p-depth: -1.5;
}
[prx="-6"] {
    --p-depth: -1.8;
}
[prx="-7"] {
    --p-depth: -2.1;
}
[prx="-8"] {
    --p-depth: -2.4;
}
[prx="-9"] {
    --p-depth: -2.7;
}
[prx="-10"] {
    --p-depth: -3;
}