|
|
Linha 579: |
Linha 579: |
| /* Tests */ | | /* Tests */ |
|
| |
|
| @keyframes tonext { | | @baseBg: #ececec; |
| 75% {
| | @baseTxt: #3f3739; |
| left: 0;
| | @hoverColor: #5fd8dd; |
| }
| | body{ |
| 95% {
| | background-color: @baseBg; |
| left: 100%;
| | color: @baseTxt; |
| }
| |
| 98% { | |
| left: 100%;
| |
| } | |
| 99% {
| |
| left: 0;
| |
| }
| |
| } | | } |
| | | a{ |
| @keyframes tostart {
| | color: @baseTxt; |
| 75% { | | text-decoration: none; |
| left: 0;
| |
| }
| |
| 95% {
| |
| left: -300%;
| |
| }
| |
| 98% {
| |
| left: -300%;
| |
| }
| |
| 99% {
| |
| left: 0;
| |
| }
| |
| }
| |
| | |
| @keyframes snap { | |
| 96% {
| |
| scroll-snap-align: center;
| |
| }
| |
| 97% {
| |
| scroll-snap-align: none;
| |
| } | |
| 99% {
| |
| scroll-snap-align: none;
| |
| }
| |
| 100% {
| |
| scroll-snap-align: center;
| |
| }
| |
| }
| |
| | |
| | |
| * {
| |
| box-sizing: border-box;
| |
| scrollbar-color: transparent transparent; /* thumb and track color */
| |
| scrollbar-width: 0px;
| |
| }
| |
| | |
| *::-webkit-scrollbar {
| |
| width: 0;
| |
| }
| |
| | |
| *::-webkit-scrollbar-track {
| |
| background: transparent;
| |
| } | | } |
|
| |
|
| *::-webkit-scrollbar-thumb {
| | .slideshow{ |
| background: transparent;
| |
| border: none;
| |
| }
| |
| | |
| * {
| |
| -ms-overflow-style: none;
| |
| }
| |
| | |
| ol, li {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .carousel { | |
| position: relative; | | position: relative; |
| padding-top: 75%; | | width: 300px; |
| filter: drop-shadow(0 0 10px #0003); | | height: 300px; |
| perspective: 100px; | | margin: 20px auto 0px auto; |
| | text-align: center; |
| } | | } |
| | | .slide{ |
| .carousel__viewport { | |
| position: absolute; | | position: absolute; |
| top: 0; | | width: 300px; |
| right: 0; | | height: 300px; |
| bottom: 0; | | border-radius: 50%; |
| left: 0; | | border: 4px solid #fff; |
| display: flex;
| | overflow: hidden; |
| overflow-x: scroll; | | opacity: 0; |
| counter-reset: item; | | transition: opacity 1.5s ease-in-out; |
| scroll-behavior: smooth; | |
| scroll-snap-type: x mandatory;
| |
| } | | } |
|
| |
|
| .carousel__slide { | | .overlay{ |
| position: relative; | | position: absolute; |
| flex: 0 0 100%; | | width: 300px; |
| width: 100%; | | height: 300px; |
| background-color: #f99; | | border-radius: 50%; |
| counter-increment: item; | | border: 4px solid #fff; |
| }
| | overflow: hidden; |
| | |
| .carousel__slide:nth-child(even) {
| |
| background-color: #99f; | |
| } | | } |
| | | .overlay-shadow{ |
| .carousel__slide:before { | | box-shadow: inset 0px 0px 10px #000; |
| content: counter(item); | | opacity: 0.6; |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate3d(-50%,-40%,70px);
| |
| color: #fff;
| |
| font-size: 2em; | |
| } | | } |
| | | .overlay-highlight{ |
| .carousel__snapper { | | background: -webkit-radial-gradient(30% 30%, closest-corner, #fff, #2F2727); |
| position: absolute; | | background: -moz-radial-gradient(30% 30%, closest-corner, #fff, #2F2727); |
| top: 0; | | background: -ms-radial-gradient(30% 30%, closest-corner, #fff, #2F2727); |
| left: 0; | | opacity: 0.4; |
| width: 100%;
| |
| height: 100%;
| |
| scroll-snap-align: center; | |
| } | | } |
| | | .active{ |
| @media (hover: hover) {
| | opacity: 1; |
| .carousel__snapper {
| |
| animation-name: tonext, snap;
| |
| animation-timing-function: ease;
| |
| animation-duration: 4s;
| |
| animation-iteration-count: infinite;
| |
| } | |
| | |
| .carousel__slide:last-child .carousel__snapper {
| |
| animation-name: tostart, snap;
| |
| }
| |
| } | | } |
|
| |
|
| @media (prefers-reduced-motion: reduce) {
| | .slide img.horizontal{ |
| .carousel__snapper { | | max-height: 100%; |
| animation-name: none;
| | width: auto; |
| } | |
| } | | } |
| | | .slide img.vertical{ |
| .carousel:hover .carousel__snapper, | | max-width: 100%; |
| .carousel:focus-within .carousel__snapper {
| | height: auto; |
| animation-name: none; | |
| } | | } |
| | | .slideshow-nav{ |
| .carousel__navigation { | | width: 500px; |
| position: absolute; | | margin: -175px auto 0 auto; |
| right: 0; | | padding: 10px; |
| bottom: 0; | |
| left: 0;
| |
| text-align: center; | | text-align: center; |
| | overflow: auto; |
| } | | } |
| | | .nav-link{ |
| .carousel__navigation-list, | | transition: color 0.25s linear; |
| .carousel__navigation-item { | | padding: 0px 5px; |
| display: inline-block; | |
| } | | } |
| | | .nav-link:hover{ |
| .carousel__navigation-button { | | color: #222; |
| display: inline-block; | |
| width: 1.5rem;
| |
| height: 1.5rem;
| |
| background-color: #333;
| |
| background-clip: content-box;
| |
| border: 0.25rem solid transparent;
| |
| border-radius: 50%;
| |
| font-size: 0;
| |
| transition: transform 0.1s;
| |
| }
| |
| | |
| .carousel::before,
| |
| .carousel::after,
| |
| .carousel__prev,
| |
| .carousel__next {
| |
| position: absolute;
| |
| top: 0;
| |
| margin-top: 37.5%;
| |
| width: 4rem;
| |
| height: 4rem;
| |
| transform: translateY(-50%);
| |
| border-radius: 50%;
| |
| font-size: 0;
| |
| outline: 0;
| |
| } | | } |
| | .nav-link em{ |
|
| |
|
| .carousel::before,
| |
| .carousel__prev {
| |
| left: -1rem;
| |
| } | | } |
| | | .previous{ |
| .carousel::after,
| | float: left; |
| .carousel__next {
| |
| right: -1rem;
| |
| }
| |
| | |
| .carousel::before,
| |
| .carousel::after {
| |
| content: '';
| |
| z-index: 1;
| |
| background-color: #333;
| |
| background-size: 1.5rem 1.5rem;
| |
| background-repeat: no-repeat;
| |
| background-position: center center;
| |
| color: #fff;
| |
| font-size: 2.5rem;
| |
| line-height: 4rem;
| |
| text-align: center;
| |
| pointer-events: none;
| |
| }
| |
| | |
| .carousel::before {
| |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); | |
| } | | } |
|
| |
|
| .carousel::after { | | .next{ |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); | | float: right; |
| } | | } |