"dzerq chtal europellc"
Bootstrap 3.3.0 Snippet by Harut

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Please note, that you can apply .m--global-blending-active to .fnc-slider to enable blend-mode for all background-images or apply .m--blend-bg-active to some specific slides (.fnc-slide). It's disabled by default in this demo, because it requires specific images, where more than 50% of bg is transparent or monotone --> <div class="demo-cont"> <!-- slider start --> <div class="fnc-slider example-slider"> <div class="fnc-slider__slides"> <!-- slide start --> <div class="fnc-slide m--blend-green m--active-slide"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>«Եվրոպա Շին»</span> </div> <div class="fnc-slide__heading-line"> <span></span> </div> </h2> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-dark"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>ԾԱԼՔԱԹԻԹԵՂՆԵՐԻ </span> </div> <div class="fnc-slide__heading-line"> <span>ԱՐՏԱԴՐՈՒԹՅՈՒՆ</span> </div> </h2> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-red"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>ԽՈՂՈՎԱԿՆԵՐԻ</span> </div> <div class="fnc-slide__heading-line"> <span>ԱՐՏԱԴՐՈՒԹՅՈՒՆ</span> </div> </h2> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-blue"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>ԱՄՐԱՆՆԵՐԻ</span> </div> <div class="fnc-slide__heading-line"> <span>ԱՐՏԱԴՐՈՒԹՅՈՒՆ</span> </div> </h2> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-blue"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Միշտ</span> </div> <div class="fnc-slide__heading-line"> <span>Ժամանակակից</span> </div> </h2> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-blue"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h2 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Միշտ</span> </div> <div class="fnc-slide__heading-line"> <span>Ձեզ Հետ</span> </div> </h2> </div> </div> </div> <!-- slide end --> </div> <nav class="fnc-nav"> <div class="fnc-nav__bgs"> <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div> <div class="fnc-nav__bg m--navbg-dark"></div> <div class="fnc-nav__bg m--navbg-red"></div> <div class="fnc-nav__bg m--navbg-blue"></div> <div class="fnc-nav__bg m--navbg-blue"></div> <div class="fnc-nav__bg m--navbg-blue"></div> </div> <div class="fnc-nav__controls"> <button class="fnc-nav__control"> 1 <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> 2 <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> 3 <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> 4 <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> 5 <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> 6 <span class="fnc-nav__control-progress"></span> </button> </div> </nav> </div> <!-- slider end --> <div class="demo-cont__credits"> <div class="demo-cont__credits-close"></div> <h2 class="demo-cont__credits-heading">Made by</h2> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="demo-cont__credits-img" /> <h3 class="demo-cont__credits-name">Nikolay Talanov</h3> <a href="http://codepen.io/suez/" target="_blank" class="demo-cont__credits-link">My codepen</a> <a href="https://twitter.com/NikolayTalanov" target="_blank" class="demo-cont__credits-link">My twitter</a> <h2 class="demo-cont__credits-heading">Based on</h2> <a href="https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation" target="_blank" class="demo-cont__credits-link">Concept by Kreativa Studio</a> <h4 class="demo-cont__credits-blend">Global Blend Mode</h4> <div class="colorful-switch"> <input type="checkbox" class="colorful-switch__checkbox js-activate-global-blending" id="colorful-switch-cb" /> <label class="colorful-switch__label" for="colorful-switch-cb"> <span class="colorful-switch__bg"></span> <span class="colorful-switch__dot"></span> <span class="colorful-switch__on"> <span class="colorful-switch__on__inner"></span> </span> <span class="colorful-switch__off"></span> </label> </div> </div> </div>
.fnc { /* you can add color names and their values here and then simply add classes like .m--blend-$colorName to .fnc-slide to apply specific color for mask blend mode */ } .fnc-slider { overflow: hidden; box-sizing: border-box; position: relative; height: 100vh; } .fnc-slider *, .fnc-slider *:before, .fnc-slider *:after { box-sizing: border-box; } .fnc-slider__slides { position: relative; height: 100%; -webkit-transition: -webkit-transform 1s 0.66667s; transition: -webkit-transform 1s 0.66667s; transition: transform 1s 0.66667s; transition: transform 1s 0.66667s, -webkit-transform 1s 0.66667s; } .fnc-slider .m--blend-dark .fnc-slide__inner { background-color: #8a8a8a; } .fnc-slider .m--blend-dark .fnc-slide__mask-inner { background-color: #575757; } .fnc-slider .m--navbg-dark { background-color: #575757; } .fnc-slider .m--blend-green .fnc-slide__inner { background-color: #6d9b98; } .fnc-slider .m--blend-green .fnc-slide__mask-inner { background-color: #42605E; } .fnc-slider .m--navbg-green { background-color: #42605E; } .fnc-slider .m--blend-red .fnc-slide__inner { background-color: #ea2329; } .fnc-slider .m--blend-red .fnc-slide__mask-inner { background-color: #990e13; } .fnc-slider .m--navbg-red { background-color: #990e13; } .fnc-slider .m--blend-blue .fnc-slide__inner { background-color: #59aecb; } .fnc-slider .m--blend-blue .fnc-slide__mask-inner { background-color: #2D7791; } .fnc-slider .m--navbg-blue { background-color: #2D7791; } .fnc-slide { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fnc-slide.m--before-sliding { z-index: 2 !important; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .fnc-slide.m--active-slide { z-index: 1; -webkit-transition: -webkit-transform 1s 0.66667s ease-in-out; transition: -webkit-transform 1s 0.66667s ease-in-out; transition: transform 1s 0.66667s ease-in-out; transition: transform 1s 0.66667s ease-in-out, -webkit-transform 1s 0.66667s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fnc-slide__inner { position: relative; height: 100%; background-size: cover; background-position: center top; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner { background-blend-mode: luminosity; } .m--before-sliding .fnc-slide__inner { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .m--active-slide .fnc-slide__inner { -webkit-transition: -webkit-transform 1s 0.66667s ease-in-out; transition: -webkit-transform 1s 0.66667s ease-in-out; transition: transform 1s 0.66667s ease-in-out; transition: transform 1s 0.66667s ease-in-out, -webkit-transform 1s 0.66667s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fnc-slide__mask { overflow: hidden; z-index: 1; position: absolute; right: 60%; top: 15%; width: 50.25vh; height: 67vh; margin-right: -90px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .m--before-sliding .fnc-slide__mask { -webkit-transform: rotate(-10deg) translate3d(200px, 0, 0); transform: rotate(-10deg) translate3d(200px, 0, 0); opacity: 0; } .m--active-slide .fnc-slide__mask { -webkit-transition: opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s; transition: opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s; transition: transform 0.7s 1.22222s, opacity 0.35s 1.22222s; transition: transform 0.7s 1.22222s, opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .m--previous-slide .fnc-slide__mask { -webkit-transition: opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s; transition: opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s; transition: transform 0.7s 0.33333s, opacity 0.35s 0.68333s; transition: transform 0.7s 0.33333s, opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s; -webkit-transform: rotate(10deg) translate3d(-200px, 0, 0); transform: rotate(10deg) translate3d(-200px, 0, 0); opacity: 0; } .fnc-slide__mask-inner { z-index: -1; position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; margin-left: -50vw; margin-top: -50vh; background-size: cover; background-position: center center; background-blend-mode: luminosity; -webkit-transform-origin: 50% 16.5vh; transform-origin: 50% 16.5vh; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .m--before-sliding .fnc-slide__mask-inner { -webkit-transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0); transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0); } .m--active-slide .fnc-slide__mask-inner { -webkit-transition: -webkit-transform 0.7s 1.22222s; transition: -webkit-transform 0.7s 1.22222s; transition: transform 0.7s 1.22222s; transition: transform 0.7s 1.22222s, -webkit-transform 0.7s 1.22222s; -webkit-transform: translateX(0); transform: translateX(0); } .m--previous-slide .fnc-slide__mask-inner { -webkit-transition: -webkit-transform 0.7s 0.33333s; transition: -webkit-transform 0.7s 0.33333s; transition: transform 0.7s 0.33333s; transition: transform 0.7s 0.33333s, -webkit-transform 0.7s 0.33333s; -webkit-transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0); transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0); } .fnc-slide__content { z-index: 2; position: absolute; left: 40%; top: 40%; } .fnc-slide__heading { margin-bottom: 10px; } .fnc-slide__heading-line { overflow: hidden; position: relative; padding-right: 20px; font-size: 70px; font-family: 'Segoe UI'; color: #fff; word-spacing: 10px; } .fnc-slide__heading-line:nth-child(2) { padding-left: 30px; } .m--before-sliding .fnc-slide__heading-line { -webkit-transform: translateY(100%); transform: translateY(100%); } .m--active-slide .fnc-slide__heading-line { -webkit-transition: -webkit-transform 1.5s 1s; transition: -webkit-transform 1.5s 1s; transition: transform 1.5s 1s; transition: transform 1.5s 1s, -webkit-transform 1.5s 1s; -webkit-transform: translateY(0); transform: translateY(0); } .m--previous-slide .fnc-slide__heading-line { -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .fnc-slide__heading-line span { display: block; } .m--before-sliding .fnc-slide__heading-line span { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .m--active-slide .fnc-slide__heading-line span { -webkit-transition: -webkit-transform 1.5s 1s; transition: -webkit-transform 1.5s 1s; transition: transform 1.5s 1s; transition: transform 1.5s 1s, -webkit-transform 1.5s 1s; -webkit-transform: translateY(0); transform: translateY(0); } .m--previous-slide .fnc-slide__heading-line span { -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s; -webkit-transform: translateY(100%); transform: translateY(100%); } .fnc-slide__action-btn { position: relative; margin-left: 200px; padding: 5px 15px; font-size: 20px; line-height: 1; color: transparent; border: none; background: transparent; cursor: pointer; text-align: center; outline: none; } .fnc-slide__action-btn span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; line-height: 30px; color: #fff; } .fnc-slide__action-btn span:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #fff; border-top: none; border-bottom: none; } .fnc-slide__action-btn span:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; background: #1F2833; opacity: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); -webkit-transition: opacity 0.15s 0.15s; transition: opacity 0.15s 0.15s; } .fnc-slide__action-btn:hover span { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .fnc-slide__action-btn:hover span:after { opacity: 1; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } .fnc-nav { z-index: 5; position: absolute; right: 0; bottom: 0; } .fnc-nav__bgs { z-index: -1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .fnc-nav__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .fnc-nav__bg.m--nav-bg-before { z-index: 2 !important; -webkit-transform: translateX(100%); transform: translateX(100%); } .fnc-nav__bg.m--active-nav-bg { z-index: 1; -webkit-transition: -webkit-transform 1s 0.66667s; transition: -webkit-transform 1s 0.66667s; transition: transform 1s 0.66667s; transition: transform 1s 0.66667s, -webkit-transform 1s 0.66667s; -webkit-transform: translateX(0); transform: translateX(0); } .fnc-nav__controls { font-size: 0; } .fnc-nav__control { overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 100px; height: 50px; font-size: 10px; font-weight: 700; font-family: 'Segoe UI'; color: #fff; background: transparent; border: none; outline: none; cursor: pointer; -webkit-transition: background-color 0.5s; transition: background-color 0.5s; } .fnc-nav__control.m--active-control { background: #1F2833; } .fnc-nav__control-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; } .m--with-autosliding .m--active-control .fnc-nav__control-progress { -webkit-transform: scaleX(1); transform: scaleX(1); } .m--prev-control .fnc-nav__control-progress { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s !important; transition: -webkit-transform 0.5s !important; transition: transform 0.5s !important; transition: transform 0.5s, -webkit-transform 0.5s !important; } .m--reset-progress .fnc-nav__control-progress { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0s 0s !important; transition: -webkit-transform 0s 0s !important; transition: transform 0s 0s !important; transition: transform 0s 0s, -webkit-transform 0s 0s !important; } .m--autosliding-blocked .fnc-nav__control-progress { -webkit-transition: all 0s 0s !important; transition: all 0s 0s !important; -webkit-transform: scaleX(0) !important; transform: scaleX(0) !important; } /* NOT PART OF COMMON SLIDER STYLES */ body { margin: 0; } .demo-cont { overflow: hidden; position: relative; height: 100vh; -webkit-perspective: 1500px; perspective: 1500px; background: #000; } .demo-cont__credits { box-sizing: border-box; overflow-y: auto; z-index: 1; position: absolute; right: 0; top: 0; width: 400px; height: 100%; padding: 20px 10px 30px; background: #303030; font-family: "Lobster", Helvetica, Arial, sans-serif; color: #fff; text-align: center; -webkit-transition: -webkit-transform 0.7s; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; -webkit-transform: translate3d(100%, 0, 0) rotateY(-45deg); transform: translate3d(100%, 0, 0) rotateY(-45deg); will-change: transform; } .credits-active .demo-cont__credits { -webkit-transition: -webkit-transform 0.7s 0.23333s; transition: -webkit-transform 0.7s 0.23333s; transition: transform 0.7s 0.23333s; transition: transform 0.7s 0.23333s, -webkit-transform 0.7s 0.23333s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after { box-sizing: border-box; } .demo-cont__credits-close { position: absolute; right: 20px; top: 20px; width: 28px; height: 28px; cursor: pointer; } .demo-cont__credits-close:before, .demo-cont__credits-close:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: #fff; } .demo-cont__credits-close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .demo-cont__credits-close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .demo-cont__credits-heading { font-size: 40px; margin-bottom: 20px; } .demo-cont__credits-img { display: block; width: 60%; margin: 0 auto 30px; border-radius: 10px; } .demo-cont__credits-name { margin-bottom: 20px; font-size: 30px; } .demo-cont__credits-link { display: block; margin-bottom: 10px; font-size: 24px; color: #fff; } .demo-cont__credits-blend { font-size: 30px; margin-bottom: 10px; } .example-slider { z-index: 2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 0.7s; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; } .credits-active .example-slider { -webkit-transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9); transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9); } .example-slider .fnc-slide-1 .fnc-slide__inner, .example-slider .fnc-slide-1 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/1.jpg"); } .example-slider .fnc-slide-2 .fnc-slide__inner, .example-slider .fnc-slide-2 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/2.jpg"); } .example-slider .fnc-slide-3 .fnc-slide__inner, .example-slider .fnc-slide-3 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/3.jpg"); } .example-slider .fnc-slide-3 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); } .example-slider .fnc-slide-4 .fnc-slide__inner, .example-slider .fnc-slide-4 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/4.jpg"); } .example-slider .fnc-slide-5 .fnc-slide__inner, .example-slider .fnc-slide-5 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/5.jpg"); } .example-slider .fnc-slide-6 .fnc-slide__inner, .example-slider .fnc-slide-6 .fnc-slide__mask-inner { background-image: url("https://bufiles.blob.core.windows.net/co4813/slide/6.jpg"); } .example-slider .fnc-slide-4 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .example-slider .fnc-slide-5 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .example-slider .fnc-slide-6 .fnc-slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .example-slider .fnc-slide__heading, .example-slider .fnc-slide__action-btn, .example-slider .fnc-nav__control { font-family: "Lobster", Helvetica, Arial, sans-serif; } /* COLORFUL SWITCH STYLES ORIGINAL DEMO - http://codepen.io/suez/pen/WQjwOb */ .colorful-switch { position: relative; width: 180px; height: 77.14286px; margin: 0 auto; border-radius: 32.14286px; background: #cfcfcf; } .colorful-switch:before { content: ""; z-index: -1; position: absolute; left: -5px; top: -5px; width: 190px; height: 87.14286px; border-radius: 37.14286px; background: #314239; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .colorful-switch:hover:before { background: #4C735F; } .colorful-switch__checkbox { z-index: -10; position: absolute; left: 0; top: 0; opacity: 0; } .colorful-switch__label { z-index: 1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 32.14286px; cursor: pointer; } .colorful-switch__bg { position: absolute; left: 0; top: 0; width: 540px; height: 100%; background: -webkit-linear-gradient(0deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%); background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .colorful-switch__dot { position: absolute; left: 131.14286px; top: 50%; width: 5.14286px; height: 5.14286px; margin-left: -2.57143px; margin-top: -2.57143px; border-radius: 50%; background: #fff; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot { -webkit-transform: translate3d(-80.35714px, 0, 0); transform: translate3d(-80.35714px, 0, 0); } .colorful-switch__on { position: absolute; left: 104.14286px; top: 22.5px; width: 19.28571px; height: 36px; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on { -webkit-transform: translate3d(-80.35714px, 0, 0); transform: translate3d(-80.35714px, 0, 0); } .colorful-switch__on__inner { position: absolute; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotate(45deg) scale(0) translateZ(0); transform: rotate(45deg) scale(0) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner { -webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61); -webkit-transform: rotate(45deg) scale(1) translateZ(0); transform: rotate(45deg) scale(1) translateZ(0); } .colorful-switch__on__inner:before, .colorful-switch__on__inner:after { content: ""; position: absolute; border-radius: 2.57143px; background: #fff; } .colorful-switch__on__inner:before { left: 0; bottom: 0; width: 100%; height: 6.14286px; } .colorful-switch__on__inner:after { right: 0; top: 0; width: 6.14286px; height: 100%; } .colorful-switch__off { position: absolute; left: 131.14286px; top: 50%; width: 41.14286px; height: 41.14286px; margin-left: -20.57143px; margin-top: -20.57143px; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off { -webkit-transform: translate3d(-80.35714px, 0, 0); transform: translate3d(-80.35714px, 0, 0); } .colorful-switch__off:before, .colorful-switch__off:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 5.14286px; margin-top: -2.57143px; border-radius: 2.57143px; background: #fff; -webkit-transition: -webkit-transform 0.25s 0.25s; transition: -webkit-transform 0.25s 0.25s; transition: transform 0.25s 0.25s; transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s; } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { -webkit-transition-delay: 0s; transition-delay: 0s; } .colorful-switch__off:before { -webkit-transform: rotate(45deg) scaleX(1) translateZ(0); transform: rotate(45deg) scaleX(1) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before { -webkit-transform: rotate(45deg) scaleX(0) translateZ(0); transform: rotate(45deg) scaleX(0) translateZ(0); } .colorful-switch__off:after { -webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61); transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61); -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0); transform: rotate(-45deg) scaleX(1) translateZ(0); } .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after { -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0); transform: rotate(-45deg) scaleX(0) translateZ(0); }
(function() { var $$ = function(selector, context) { var context = context || document; var elements = context.querySelectorAll(selector); return [].slice.call(elements); }; function _fncSliderInit($slider, options) { var prefix = ".fnc-"; var $slider = $slider; var $slidesCont = $slider.querySelector(prefix + "slider__slides"); var $slides = $$(prefix + "slide", $slider); var $controls = $$(prefix + "nav__control", $slider); var $controlsBgs = $$(prefix + "nav__bg", $slider); var $progressAS = $$(prefix + "nav__control-progress", $slider); var numOfSlides = $slides.length; var curSlide = 1; var sliding = false; var slidingAT = +parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000; var slidingDelay = +parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000; var autoSlidingActive = false; var autoSlidingTO; var autoSlidingDelay = 5000; // default autosliding delay value var autoSlidingBlocked = false; var $activeSlide; var $activeControlsBg; var $prevControl; function setIDs() { $slides.forEach(function($slide, index) { $slide.classList.add("fnc-slide-" + (index + 1)); }); $controls.forEach(function($control, index) { $control.setAttribute("data-slide", index + 1); $control.classList.add("fnc-nav__control-" + (index + 1)); }); $controlsBgs.forEach(function($bg, index) { $bg.classList.add("fnc-nav__bg-" + (index + 1)); }); }; setIDs(); function afterSlidingHandler() { $slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide"); $slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg"); $activeSlide.classList.remove("m--before-sliding"); $activeControlsBg.classList.remove("m--nav-bg-before"); $prevControl.classList.remove("m--prev-control"); $prevControl.classList.add("m--reset-progress"); var triggerLayout = $prevControl.offsetTop; $prevControl.classList.remove("m--reset-progress"); sliding = false; var layoutTrigger = $slider.offsetTop; if (autoSlidingActive && !autoSlidingBlocked) { setAutoslidingTO(); } }; function performSliding(slideID) { if (sliding) return; sliding = true; window.clearTimeout(autoSlidingTO); curSlide = slideID; $prevControl = $slider.querySelector(".m--active-control"); $prevControl.classList.remove("m--active-control"); $prevControl.classList.add("m--prev-control"); $slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control"); $activeSlide = $slider.querySelector(prefix + "slide-" + slideID); $activeControlsBg = $slider.querySelector(prefix + "nav__bg-" + slideID); $slider.querySelector(".m--active-slide").classList.add("m--previous-slide"); $slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg"); $activeSlide.classList.add("m--before-sliding"); $activeControlsBg.classList.add("m--nav-bg-before"); var layoutTrigger = $activeSlide.offsetTop; $activeSlide.classList.add("m--active-slide"); $activeControlsBg.classList.add("m--active-nav-bg"); setTimeout(afterSlidingHandler, slidingAT + slidingDelay); }; function controlClickHandler() { if (sliding) return; if (this.classList.contains("m--active-control")) return; if (options.blockASafterClick) { autoSlidingBlocked = true; $slider.classList.add("m--autosliding-blocked"); } var slideID = +this.getAttribute("data-slide"); performSliding(slideID); }; $controls.forEach(function($control) { $control.addEventListener("click", controlClickHandler); }); function setAutoslidingTO() { window.clearTimeout(autoSlidingTO); var delay = +options.autoSlidingDelay || autoSlidingDelay; curSlide++; if (curSlide > numOfSlides) curSlide = 1; autoSlidingTO = setTimeout(function() { performSliding(curSlide); }, delay); }; if (options.autoSliding || +options.autoSlidingDelay > 0) { if (options.autoSliding === false) return; autoSlidingActive = true; setAutoslidingTO(); $slider.classList.add("m--with-autosliding"); var triggerLayout = $slider.offsetTop; var delay = +options.autoSlidingDelay || autoSlidingDelay; delay += slidingDelay + slidingAT; $progressAS.forEach(function($progress) { $progress.style.transition = "transform " + (delay / 1000) + "s"; }); } $slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control"); }; var fncSlider = function(sliderSelector, options) { var $sliders = $$(sliderSelector); $sliders.forEach(function($slider) { _fncSliderInit($slider, options); }); }; window.fncSlider = fncSlider; }()); /* not part of the slider scripts */ /* Slider initialization options: autoSliding - boolean autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000 blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again */ fncSlider(".example-slider", {autoSlidingDelay: 4000}); var $demoCont = document.querySelector(".demo-cont"); [].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) { $btn.addEventListener("click", function() { $demoCont.classList.toggle("credits-active"); }); }); document.querySelector(".demo-cont__credits-close").addEventListener("click", function() { $demoCont.classList.remove("credits-active"); }); document.querySelector(".js-activate-global-blending").addEventListener("click", function() { document.querySelector(".example-slider").classList.toggle("m--global-blending-active"); });

Related: See More


Questions / Comments: