|
|
Linha 579: |
Linha 579: |
| /* Testes */ | | /* Testes */ |
|
| |
|
| #slideshow-wrapper { | | #slides{ |
| display: grid; | | position:relative; |
| grid-template-columns: 15% 70% 15%; | | width: 200px; |
| grid-template-rows: 5% 90% 5%;
| | height: 200px; |
| grid-column-gap: 1vw; | | margin: 0; |
| grid-row-gap: 1vh;
| | padding: 0; |
| width: 95%;
| |
| margin-left: auto; | |
| margin-right: auto; | |
|
| |
|
| background-color: white;
| |
| box-shadow: 0px 0px 20px 5px gray;
| |
| } | | } |
| | | .slide{ |
| #slideshow {
| | position:absolute; |
| grid-column: 2;
| | left: 0; |
| grid-row: 2;
| | top: 0; |
| position: relative;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| | |
| width: 100%;
| |
| height: 70vh;
| |
| | |
| }
| |
| | |
| #slideshow-nav-bars {
| |
| grid-column: 2;
| |
| grid-row: 2;
| |
| | |
| height: 30px;
| |
| position: relative; | |
| margin-left: auto; | |
| margin-right: auto;
| |
| display: inline-block;
| |
| background-color: rgba(0, 0, 0, 0.5);
| |
| width: auto;
| |
| padding-left: 10px;
| |
| padding-right: 10px;
| |
| top: 91%;
| |
| }
| |
| | |
| #slideshow-title {
| |
| grid-column: 1;
| |
| grid-row: 2;
| |
| text-align: center;
| |
| | |
| font-family: 'MS PGothic', Osaka, Arial, sans-serif;
| |
| writing-mode: vertical-rl;
| |
| text-orientation: mixed;
| |
| font-size: xxx-large;
| |
| }
| |
| | |
| #titles {
| |
| grid-column: 2;
| |
| grid-row: 1;
| |
| text-align: center;
| |
| font-size: xx-large;
| |
| font-family: 'MS PGothic', Osaka, Arial, sans-serif;
| |
| width: 99.78%;
| |
| height: 60px;
| |
| }
| |
| | |
| | |
| | |
| @keyframes slideInLeft {
| |
| 0% {
| |
| transform: translateX(-50%);
| |
| opacity: 0%;
| |
| }
| |
| 100% {
| |
| transform: translateX(0%);
| |
| opacity: 100%;
| |
| }
| |
| }
| |
| | |
| @keyframes slideInRight {
| |
| 0% {
| |
| transform: translateX(50%);
| |
| opacity: 0%;
| |
| }
| |
| 100% {
| |
| transform: translateX(0%);
| |
| opacity: 100%;
| |
| }
| |
| }
| |
| | |
| @keyframes slideOutLeft {
| |
| 0% {
| |
| transform: translateX(0%);
| |
| opacity: 100%;
| |
| } | |
| 100% {
| |
| transform: translateX(-50%);
| |
| opacity: 0%;
| |
| }
| |
| }
| |
| | |
| @keyframes slideOutRight {
| |
| 0% {
| |
| transform: translateX(0%);
| |
| opacity: 100%;
| |
| }
| |
| 100% {
| |
| transform: translateX(50%);
| |
| opacity: 0%;
| |
| }
| |
| }
| |
| | |
| @keyframes hide {
| |
| 0% {display: none;}
| |
| }
| |
| | |
| .image-title {
| |
| margin-top: 0%;
| |
| height: 100%;
| |
| position: relative;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
| | |
| .slide-in-from-left {
| |
| animation: slideInLeft 0.5s linear;
| |
| }
| |
| | |
| .slide-in-from-right {
| |
| animation: slideInRight 0.5s linear;
| |
| }
| |
| | |
| .slide-out-to-left {
| |
| animation: slideOutLeft 0.5s linear;
| |
| }
| |
| | |
| .slide-out-to-right {
| |
| animation: slideOutRight 0.5s linear;
| |
| }
| |
| | |
| .image {
| |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
| | box-sizing:border-box; |
| | opacity:0; |
| | z-index:1; |
|
| |
|
| position: relative; | | background-color: #333; |
| margin-left: auto; | | color:#fff; |
| margin-right: auto; | | |
| | | font-size: 40px; |
| background-repeat: no-repeat; | | text-align:center; |
| background-position: center; | | line-height:200px; |
| background-size: contain; | | |
| | | -webkit-transition:opacity 1.5s; |
| background-color: black; | | -moz-transition:opacity 1.5s; |
| | | -o-transiton:opacity 1.5s; |
| animation-name: fadein; | | transition:opacity 1.5s; |
| animation-duration: 1s;
| |
| animation-timing-function: linear; | |
| | |
| }
| |
| | |
| @keyframes fadein {
| |
| 0% {opacity: 0.7;}
| |
| 100% {opacity: 1;} | |
| } | | } |
| | | .showing{ |
| .nav-arrow { | | opacity:1; |
| color: white; | | z-index:2; |
| position: absolute;
| |
| top: 50%;
| |
| z-index: 1; | |
| cursor: pointer;
| |
| font-size: xx-large;
| |
| } | | } |
| | | .slide:nth-child(2){ |
| #prev {
| | background: orange; |
| left: 1%; | |
| } | | } |
| | | .slide:nth-of-type(3){ |
| #next {
| | background: green; |
| right: 1%; | |
| } | | } |
| | | .slide:nth-of-type(4){ |
| .bar { | | background: blue; |
| position: relative;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| border-radius: 5%;
| |
| height: 2px;
| |
| width: 5vh;
| |
| background-color: white; | |
| display: inline-block;
| |
| } | | } |
| | | .slide:nth-of-type(5){ |
| .active-bar { | | background: purple; |
| background-color: pink;
| |
| }
| |
| | |
| .show {
| |
| display: block;
| |
| }
| |
| | |
| .hidden {
| |
| display: none;
| |
| }
| |
| | |
| #image-one {
| |
| background-color: pink;
| |
| }
| |
| | |
| #image-two {
| |
| background-color: blue;
| |
| }
| |
| | |
| #image-three {
| |
| background-color: green; | |
| }
| |
| | |
| #image-four {
| |
| background-color: purple;
| |
| }
| |
| | |
| #image-five {
| |
| background-color: orange;
| |
| } | | } |