|
|
Linha 579: |
Linha 579: |
| /* Tests */ | | /* Tests */ |
|
| |
|
| @keyframes tonext {
| | html{ |
| 75% {
| | align-items: center; |
| left: 0;
| | background-color: #31353D; |
| }
| | display: flex; |
| 95% {
| | justify-content: center; |
| left: 100%;
| | padding: 50px; |
| }
| | min-height: 100vh; |
| 98% {
| |
| left: 100%;
| |
| }
| |
| 99% {
| |
| left: 0;
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes tostart {
| | #Wrapper{ |
| 75% {
| | align-items: center; |
| left: 0;
| | background-color: #EEEFF7; |
| }
| | display: flex; |
| 95% {
| | height: 500px; |
| left: -300%;
| | justify-content: center; |
| }
| | width: 1000px; |
| 98% {
| |
| left: -300%;
| |
| }
| |
| 99% {
| |
| left: 0;
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes snap {
| | #Slideshow{ |
| 96% {
| | align-items: center; |
| scroll-snap-align: center;
| | display: flex; |
| }
| | flex-direction: column; |
| 97% {
| | justify-content: center; |
| scroll-snap-align: none;
| | overflow: hidden; |
| }
| | position: relative; |
| 99% {
| |
| scroll-snap-align: none;
| |
| }
| |
| 100% {
| |
| scroll-snap-align: center;
| |
| }
| |
| } | | } |
|
| |
|
| | | #Slider{ |
| | | border: 20px solid #1C1D21; |
| * {
| | height: 300px; |
| box-sizing: border-box;
| | overflow: hidden; |
| scrollbar-color: transparent transparent; /* thumb and track color */
| | width: 600px; |
| scrollbar-width: 0px;
| |
| }
| |
| | |
| *::-webkit-scrollbar {
| |
| width: 0;
| |
| }
| |
| | |
| *::-webkit-scrollbar-track {
| |
| background: transparent;
| |
| }
| |
| | |
| *::-webkit-scrollbar-thumb {
| |
| background: transparent;
| |
| border: none;
| |
| }
| |
| | |
| * {
| |
| -ms-overflow-style: none;
| |
| }
| |
| | |
| ol, li {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .carousel {
| |
| position: relative;
| |
| padding-top: 75%;
| |
| filter: drop-shadow(0 0 10px #0003);
| |
| perspective: 100px;
| |
| } | | } |
|
| |
|
| .carousel__viewport {
| | #Slider img{ |
| position: absolute;
| | height: 300px; |
| top: 0;
| | width: 600px; |
| right: 0;
| | transition: all 1s; |
| bottom: 0;
| |
| left: 0;
| |
| display: flex;
| |
| overflow-x: scroll;
| |
| counter-reset: item;
| |
| scroll-behavior: smooth;
| |
| scroll-snap-type: x mandatory;
| |
| } | | } |
|
| |
|
| .carousel__slide {
| | #Arrows{ |
| position: relative;
| | display: flex; |
| flex: 0 0 100%;
| | justify-content: space-between; |
| width: 100%;
| | height: 30px; |
| background-color: #f99;
| | position: absolute; |
| counter-increment: item;
| | width: 600px; |
| } | | } |
|
| |
|
| .carousel__slide:nth-child(even) {
| | #Arrows i{ |
| background-color: #99f;
| | background-color: rgba(255, 255, 255, .25); |
| }
| | color: #1C1D21; |
| | cursor: pointer; |
| | height: 30px; |
| | padding: 15px; |
|
| |
|
| .carousel__slide:before {
| | transition: background-color .5s, color .5s; |
| content: counter(item);
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate3d(-50%,-40%,70px);
| |
| color: #fff;
| |
| font-size: 2em;
| |
| } | | } |
|
| |
|
| .carousel__snapper {
| | #Arrows i:first-of-type{ |
| position: absolute;
| | padding-right: 20px; |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| scroll-snap-align: center;
| |
| } | | } |
|
| |
|
| @media (hover: hover) {
| | #Arrows i:last-of-type{ |
| .carousel__snapper {
| | padding-left: 20px; |
| 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) {
| | #Arrows i:hover{ |
| .carousel__snapper {
| | background-color: rgba(28,29,33, .75); |
| animation-name: none;
| | color: #EEEFF7; |
| }
| |
| } | | } |
|
| |
|
| .carousel:hover .carousel__snapper,
| | h1{ |
| .carousel:focus-within .carousel__snapper {
| | color: #1C1D21; |
| animation-name: none;
| | font-family: righteous; |
| | font-size: 2.5em; |
| | padding: 20px; |
| } | | } |
|
| |
|
| .carousel__navigation {
| | h2{ |
| position: absolute;
| | color: #1C1D21; |
| right: 0;
| | font-family: "Open Sans"; |
| bottom: 0;
| | font-size: 1.5em; |
| left: 0;
| | padding: 20px; |
| text-align: center;
| |
| } | | } |
|
| |
|
| .carousel__navigation-list,
| | #MeLink{ |
| .carousel__navigation-item {
| | background-color: rgba(255,255,255, 0); |
| display: inline-block; | | border: 10px solid #1C1D21; |
| | border-radius: 80px; |
| | bottom: 20px; |
| | height: 80px; |
| | overflow: hidden; |
| | position: fixed; |
| | right: 20px; |
| | width: 80px; |
| | z-index: 2; |
| | |
| | transition: background-color .5s; |
| } | | } |
|
| |
|
| .carousel__navigation-button {
| | #MeLink:hover{ |
| display: inline-block;
| | background-color: rgba(255,255,255, .25); |
| 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,
| | #Me{ |
| .carousel::after,
| | border: 10px solid #1C1D21; |
| .carousel__prev,
| | border-radius: 80px; |
| .carousel__next {
| | bottom: 20px; |
| position: absolute; | | height: 80px; |
| top: 0;
| | position: fixed; |
| margin-top: 37.5%;
| | right: 20px; |
| width: 4rem;
| | width: 80px; |
| height: 4rem;
| |
| transform: translateY(-50%);
| |
| border-radius: 50%; | |
| font-size: 0; | |
| outline: 0; | |
| }
| |
| | |
| .carousel::before,
| |
| .carousel__prev {
| |
| left: -1rem; | |
| }
| |
| | |
| .carousel::after,
| |
| .carousel__next {
| |
| right: -1rem; | |
| }
| |
| | |
| .carousel::before,
| |
| .carousel::after {
| |
| content: ''; | |
| z-index: 1; | | 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 {
| |
| 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");
| |
| } | | } |