src/assets/less/sliders.less
@import (reference) "libs/constants.less";@import (reference) "libs/mixins.less"; .position-to-corner(@index, @pos_x, @pos_y, @delay, @x, @y) { &:nth-child(@{index}) { transition: opacity 0.5s cubic-bezier(0.8, 0, 0.25, 1) @delay, transform 0.5s cubic-bezier(0.8, 0, 0.25, 1) @delay; @{pos_x}: @x; @{pos_y}: @y; }} .design-arrow(@pos_y, @right, @left) { content: ''; .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); position: absolute; width: 50px; height: 1px; background: @background-bloc-0; top: 50%; @{pos_y}: 0; .if(@pos_y, right, transform, translateY(-50%) rotateZ(@right)); .if(@pos_y, left, transform, translateY(-50%) rotateZ(@left)); transform-origin: @pos_y;} .position-arrow(@pos_y) { position: absolute; @{pos_y}: -120px; width: 100px; height: 100%; .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); cursor: pointer; &.invisible { opacity: 0; } & > span { position: absolute; transition: transform 0.35s cubic-bezier(0.8, 0, 0.25, 1), opacity 0.2s cubic-bezier(0.8, 0, 0.25, 1); .if(@pos_y, right, transform, translateX(100%) translateY(-50%)); .if(@pos_y, left, transform, translateX(-100%) translateY(-50%)); opacity: 0; top: 50%; @{pos_y}: 0; line-height: 18px; color: @background-bloc-0; user-select: none; .font-size(1.2); } em::before, &::before { .design-arrow(@pos_y, -50deg, 50deg); } em::after, &::after { .design-arrow(@pos_y, 50deg, -50deg); } em::after, em::before { width: 20px; .if(@pos_y, right, right, -5px); .if(@pos_y, left, left, -5px); } &:hover { &::before, &::after { background: @text-color-white; } & ~ ul > li { .if(@pos_y, right, transform, translateX(-30px)); .if(@pos_y, left, transform, translateX(30px)); } em::before { .if(@pos_y, right, transform, translateX(15px) translateY(-50%) rotateZ(-50deg)); .if(@pos_y, left, transform, translateX(-15px) translateY(-50%) rotateZ(50deg)); } em::after { .if(@pos_y, right, transform, translateX(15px) translateY(-50%) rotateZ(50deg)); .if(@pos_y, left, transform, translateX(-15px) translateY(-50%) rotateZ(-50deg)); } & > span { transition: transform 0.35s cubic-bezier(0.8, 0, 0.25, 1), opacity 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.15s; opacity: 1; .if(@pos_y, right, transform, translateX(-15px) translateY(-50%)); .if(@pos_y, left, transform, translateX(15px) translateY(-50%)); color: @text-color-white; } }} #PROJECTS { .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); height: 600px; min-height: 600px; position: relative; opacity: 1; & ul { list-style-type: none; margin: 0; } & .previous { .position-arrow(left); } & .next { .position-arrow(right); } & li { float: left; width: 48%; height: 280px; border: 1px solid #000; position: absolute; transform: initial; opacity: 1; .position-to-corner(1, top, left, 0s, 0, 0); .position-to-corner(2, top, right, 0.25s, 0, 0); .position-to-corner(3, bottom, left, 0.5s, 0, 0); .position-to-corner(4, bottom, right, 0.75s, 0, 0); & .borders_bottom_left, & .borders_top_right { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; &::after, &::before { content: ' '; position: absolute; z-index: @LAYER-ANIMATION; } } & .borders_top_right { &::before { width: 100%; height: 1px; top: 0; left: 0; background: linear-gradient(to right, transparent, #61c3ff); animation: going_right 8s linear infinite; } @keyframes going_right { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } &::after { width: 1px; height: 100%; top: 0; right: 0; background: linear-gradient(to bottom, transparent, #61c3ff); transform: translateY(-100%); animation: going_down 8s linear infinite; animation-delay: 4s; } @keyframes going_down { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } } & .borders_bottom_left { &::before { width: 100%; height: 1px; bottom: 0; right: 0; background: linear-gradient(to left, transparent, #61c3ff); animation: going_left 8s linear infinite; } @keyframes going_left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } &::after { width: 1px; height: 100%; bottom: 0; left: 0; transform: translateY(100%); background: linear-gradient(to top, transparent, #61c3ff); animation: going_top 8s linear infinite; animation-delay: 4s; } @keyframes going_top { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } } &.invisible { transform: translateY(100%); opacity: 0; } & a { overflow: hidden; position: relative; display: block; background: @text-color-dark; width: 100%; height: 100%; cursor: pointer; text-decoration: none; background-size: cover; background-position: center center; transition: all 0.5s cubic-bezier(0.8, 0, 0.25, 1); & i { .button-window(10px, 12px, #61c3ff); &::before { content: ' '; .button-window(20px, 0, #005c94); } &::after { content: ' '; .button-window(40px, 0, #dc4242); } } & .panel { .transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1) 0.25s); position: absolute; transform: translateY(-100%); top: 0; width: 100%; height: 100%; pointer-events: none; background: #0a2234e6; box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset; &::before { content: ' '; .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); width: 100%; height: 100%; position: absolute; } & div { text-align: center; transform: translateY(-50%); display: block; color: white; width: 80%; margin: 0 10%; position: absolute; top: calc(50% + 20px); text-shadow: 0 0 8px #000; overflow: hidden; .font-size(1.6); &::after { content: ' '; position: absolute; bottom: 0; height: 1px; width: 0; background: white; left: 50%; transform: translateX(-50%); .transition(width 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.35s); } & span { display: block; padding-bottom: 10px; transform: translateY(100%); .transition(transform 0.35s cubic-bezier(0.8, 0, 0.25, 1) 0.55s); } } } &::before { content: ' '; width: 100%; height: calc(100% - 40px); top: 40px; position: absolute; box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset; } & .low { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-size: cover; background-position: center center; box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset; .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); &.loaded { opacity: 0; } } &:hover { box-shadow: 0 0 @background-shadow; & .projects-header { color: @text-color-white; } & .projects-header::after { left: 0; } & .panel, & .low { transform: translateY(0); } & .panel { .transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1)); & span { transform: translateY(0); } & div::after { width: 100%; } } } } & h2 { font-family: 'Lato-Bold', sans-serif; position: absolute; width: 100%; top: 0; color: @text-color-white; background: @text-color-h2; height: 40px; pointer-events: none; z-index: @LAYER-COUCHE-1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); border-bottom: 1px solid black; overflow: hidden; line-height: 40px; text-align: center; margin: 0; text-transform: uppercase; transition: all 0.25s ease 0.5s; .font-size(1.2); } &:hover { & h2 { transition: all 0.25s ease 0.3s; color: @background-bloc-2; } & .borders_bottom_left, & .borders_top_right { opacity: 1; } } }} .mounted { & #PROJECTS { & li { &.filtered { opacity: 0; } &.project-unmounted { opacity: 0; .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); } &.project-selected { transform: translateX(0); & .panel { transform: translateY(0); &::before { background: @background-bloc-3; } & span { transform: translateY(100%); .transition(transform 0.35s cubic-bezier(0.8, 0, 0.25, 1)); } & div::after { width: 0; .transition(width 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.35s); } } & h2 { color: @background-bloc-2; } } &.project-mounted { .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1)); width: 100%; height: 100%; } } }} @media screen and (max-width: @SCREEN_1200) { #PROJECTS { & .previous { left: -75px; } & .next { right: -75px; } }} @media screen and (max-width: @SCREEN_900) { #PROJECTS { height: 860px; margin-bottom: 120px; & ul { padding: 0; } & li { height: 200px; position: absolute; float: initial; width: 100%; .position-to-corner(1, top, left, 0s, 0, 0); .position-to-corner(2, top, right, 0.25s, 220px, 0); .position-to-corner(3, bottom, left, 0.5s, 220px, 0); .position-to-corner(4, bottom, right, 0.75s, 0, 0); & i { display: none; } & h2 { .font-size(1.2); } } & .previous { left: 40px; bottom: -120px; height: 100px; } & .next { right: 40px; bottom: -120px; height: 100px; } }}