در این مطلب نمونه 4 از استایل زیبا برای نشان دهنده اسلایدرها با عنوان Navigation Indicators رو در اختیارتون میزارم و امیدوارم که بدردتون بخوره و بتونین از اون در سایتتون استفاده کنید.
کد HTML :
<svg class="hidden"> <defs> <symbol id="icon-bubble" viewBox="0 0 48 24"> <title>bubble</title> <path d="M0.9,23c-0.2,0.2,0,0.8,0.2,0.9C1.2,24,1.3,24,1.4,24c0.2,0,0.3-0.1,0.5-0.1l10.7-4.1h30.7c2.2,0,3.9-1.8,3.9-3.9V3.9c0-2.2-1.8-3.9-3.9-3.9H5.9C3.7,0,2,1.8,2,3.9v11.8c0,2.2,1,3.5,3.2,3.5C5.1,19.2,2.2,21.5,0.9,23zM45.7,15.8c0,1.3-1.1,2.4-2.4,2.4h-31c-0.2,0-0.3,0.1-0.5,0.1l-9.4,4.3c0,0,4.1-2.9,4.7-3.7c0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2H5.9c-1.3,0-2.4-1.1-2.4-2.4V3.9c0-1.3,1.1-2.4,2.4-2.4h37.4c1.3,0,2.4,1.1,2.4,2.4V15.8L45.7,15.8z"/> </symbol> </defs> </svg> <section class="section section--nav" id="Hagos"> <nav class="nav nav--hagos"> <button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Oops!</span></button> <button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Nah!</span></button> <button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Hi :P</span></button> <button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Cute!</span></button> <button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Yes!</span></button> </nav> <!-- Mockup slider for decorative purpose only --> <div class="mockup-slider"> <img src="img.jpg" alt="img14" /> <h3 class="mockup-slider__title">Hagos</h3> </div> </section>
کد CSS :
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; } body { font-family: 'Roboto Mono', monospace; background: #92d9c7; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } .section { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .section--nav { position: relative; overflow: hidden; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .section__title { font-size: 0.65em; font-weight: 700; -webkit-flex: none; flex: none; margin: 3em 0 15em; text-indent: 3px; letter-spacing: 3px; text-transform: uppercase; color: #d1d1d1; } .section.section--intro { font-size: 1.6em; position: relative; min-height: 100vh; text-align: center; color: #fff; background: #333; } .section--intro p { max-width: 1000px; margin: 0 auto; padding: 1em; } /* Mockup Slider */ .mockup-slider { position: relative; width: calc(100% - 12em); margin: 0 0 0 2em; max-width: 600px; } .mockup-slider::before, .mockup-slider::after { content: ''; width: 100%; background: rgba(0,0,0,0.05); height: 100px; position: absolute; top: 0; } .mockup-slider::after { top: auto; bottom: 0; } .mockup-slider img { position: relative; display: block; max-width: 100%; margin: 150px 0; box-shadow: 0 10px 20px -4px rgba(0,0,0,0.6); } .mockup-slider__title { position: absolute; font-size: 3em; bottom: 30%; left: -0.5em; font-weight: normal; margin: 0; } .mockup-slider__subtitle { position: absolute; top: 70%; left: -1em; background: #1b3050; margin: 0; color: #fff; font-size: 1.05em; padding: 0.25em 0.5em; z-index: 100; } /* General styles */ .nav { position: relative; width: 8em; margin: 0 0 0 3em; } .nav__item { line-height: 1; position: relative; display: block; margin: 0; padding: 0; letter-spacing: 0; color: currentColor; border: 0; background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } .nav__item:focus { outline: none; } /* Individual styles */ /*** Hagos ***/ .nav--hagos .nav__item { width: 2em; height: 2em; } .nav--hagos .nav__item::before { content: ''; position: absolute; top: 25%; left: 0; width: 50%; height: 50%; border-radius: 50%; background: #7cb9a6; -webkit-transition: background 0.5s; transition: background 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .nav--hagos .nav__item--current::before, .nav--hagos .nav__item:not(.nav__item--current):focus::before, .nav--hagos .nav__item:not(.nav__item--current):hover::before { background: #9c7e64; } .nav--hagos .nav__icon { position: absolute; top: -85%; left: 65%; width: 225%; height: 125%; pointer-events: none; opacity: 0; -webkit-transform: scale3d(0,0,1); transform: scale3d(0,0,1); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); fill: #9c7e64; } .nav--hagos .nav__item--current .nav__icon { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } .nav--hagos .nav__item-title { font-weight: bold; position: absolute; top: -55%; left: 65%; width: 225%; white-space: nowrap; pointer-events: none; opacity: 0; color: #9c7e64; -webkit-transform: scale3d(0,0,1); transform: scale3d(0,0,1); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .nav--hagos .nav__item--current .nav__item-title { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
کد JS:
(function(window) { 'use strict'; function init() { [].slice.call(document.querySelectorAll('.nav')).forEach(function(nav) { var navItems = [].slice.call(nav.querySelectorAll('.nav__item')), itemsTotal = navItems.length, setCurrent = function(item) { // return if already current if( item.classList.contains('nav__item--current') ) { return false; } // remove current var currentItem = nav.querySelector('.nav__item--current'); currentItem.classList.remove('nav__item--current'); // set current item.classList.add('nav__item--current'); }; navItems.forEach(function(item) { item.addEventListener('click', function() { setCurrent(item); }); }); }); } init(); })(window);
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
اولین دیدگاه این پست رو تو بنویس !