Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .slides-nav {
- z-index: 99;
- position: fixed;
- right: -5%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 100%;
- color: #111;
- }
- @media (min-width: 54em) {
- .slides-nav {
- right: 2%;
- }
- }
- .slides-nav__nav {
- position: relative;
- right: 0;
- display: block;
- font-size: 1em;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-transform-origin: center;
- transform-origin: center;
- }
- .slides-nav button {
- position: relative;
- display: inline-block;
- padding: 0.35em;
- margin: 0;
- font-family: "Space Mono", monospace;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background: transparent;
- border: 0;
- overflow-x: hidden;
- -webkit-transition: color 0.5s ease;
- transition: color 0.5s ease;
- }
- .slides-nav button:after {
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- height: 1px;
- width: 0;
- background: #111;
- -webkit-transition: width 0.4s ease;
- transition: width 0.4s ease;
- }
- .slides-nav button:hover {
- cursor: pointer;
- color: rgba(17, 17, 17, 0.75);
- -webkit-transition: color 0.5s ease;
- transition: color 0.5s ease;
- }
- .slides-nav button:hover:after {
- width: 100%;
- -webkit-transition: width 0.4s ease;
- transition: width 0.4s ease;
- }
- .slides-nav button:focus {
- outline: 0;
- }
- .is-sliding .slides-nav {
- pointer-events: none;
- }
- .slides {
- position: relative;
- display: block;
- height: 100vh;
- width: 100%;
- background: #fff;
- -webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
- transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
- }
- .is-sliding .slides {
- background: #ededed;
- -webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
- transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
- }
- .slide {
- z-index: -1;
- padding: 0;
- position: absolute;
- width: 100%;
- height: 100vh;
- -webkit-transition: z-index 1s ease;
- transition: z-index 1s ease;
- }
- .slide.is-active {
- z-index: 19;
- -webkit-transition: z-index 1s ease;
- transition: z-index 1s ease;
- }
- .slide__content {
- position: relative;
- margin: 0 auto;
- height: 95%;
- width: 95%;
- top: 2.5%;
- }
- @media (min-width: 54em) {
- .slide__content {
- height: 80%;
- width: 80%;
- top: 10%;
- }
- }
- .slide__header {
- z-index: 9;
- position: relative;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-y: hidden;
- -webkit-transform: translateX(5%);
- transform: translateX(5%);
- }
- @media (min-width: 54em) {
- .slide__header {
- -webkit-transform: translateX(-5%);
- transform: translateX(-5%);
- }
- }
- .slide__title {
- font-family: Montserrat, helvetica;
- font-size: 2.5em;
- font-weight: 700;
- color: #111;
- overflow-y: hidden;
- }
- @media (min-width: 54em) {
- .slide__title {
- font-size: 5em;
- }
- }
- .slide__title .title-line {
- display: block;
- overflow-y: hidden;
- }
- .slide__title .title-line span {
- display: inline-block;
- -webkit-transform: translate3d(0, 140%, 0);
- transform: translate3d(0, 140%, 0);
- opacity: 0;
- -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
- transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
- transition: transform 0.4s ease, opacity 0.8s ease;
- transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
- }
- .slide__title .title-line span:nth-child(1) {
- -webkit-transition-delay: 0.15s;
- transition-delay: 0.15s;
- }
- .slide__title .title-line span:nth-child(2) {
- -webkit-transition-delay: 0.3s;
- transition-delay: 0.3s;
- }
- .is-active .slide__title .title-line span {
- -webkit-transform: translate3d(0, 0%, 0);
- transform: translate3d(0, 0%, 0);
- opacity: 1;
- -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
- transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
- transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
- transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
- }
- .is-active .slide__title .title-line:nth-of-type(2n) span {
- -webkit-transition-delay: 0.2s;
- transition-delay: 0.2s;
- }
- .slide__figure {
- z-index: 7;
- position: absolute;
- left: 0;
- right: 0;
- margin: 0 auto;
- height: 100%;
- width: 100%;
- -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- }
- .is-sliding .slide__figure {
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
- }
- .slide__img {
- position: relative;
- display: block;
- background-size: cover;
- background-attachment: fixed;
- background-position: 50%;
- -webkit-backface-visibility: hidden;
- height: 0%;
- width: 100%;
- -webkit-filter: grayscale(0%);
- filter: grayscale(0%);
- -webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
- transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
- transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
- transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
- }
- .is-active .slide__img {
- height: 100%;
- opacity: 1;
- -webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
- transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
- transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
- transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
- }
- .is-sliding .slide__img {
- -webkit-filter: grayscale(100%);
- filter: grayscale(100%);
- }
Add Comment
Please, Sign In to add comment