نمادهای ناوبری متحرک با تبدیل CSS

admin15 دقیقه پیش

0 0 خواندن این مطلب 10 دقیقه زمان میبرد

پست زیر یک پست همکاری بین من و بنت فیلی است. پس از دیدن تغییرات نمادین ناوبری متحرک متحرک بنت (یا “Navicon Transformicons”) در Codepen، از او پرسیدم که آیا مایل است آموزشی در مورد نحوه ایجاد آنها به عنوان پست مهمان در وبلاگ من بنویسد. او با مهربانی تایید کرد. و از آنجایی که او وقت آزاد زیادی برای کار روی مقاله ندارد، تصمیم گرفتیم در آن همکاری کنیم. نگاهی خواهیم داشت به تعدادی از نمادهایی که او با قلم خود ساخته و چند نماد دیگر.

اگر از من بپرسید که ویژگی CSS مورد علاقه من چیست، ممکن است فقط ویژگی transition را بگویم. ثابت شده است که این یک مورد استفاده عالی برای بهبود تدریجی است، و استفاده از آن باعث شده تا وب‌سایت‌های بی‌شماری راحت‌تر به نظر برسند. به هر حال، جهنم بسیاری از خواص نیز گذرا هستند.

اگرچه ویژگی پیشوند انتقال برای مدت طولانی توسط مرورگرهای اصلی پشتیبانی می‌شود (مطالعه وب)، یک معضل کاملاً در مورد مرورگرها و توانایی آنها برای انتقال و متحرک سازی عناصر شبه وجود دارد.:before و :after). در حالی که فایرفاکس از نسخه 4.0 کارها را به درستی انجام می دهد، تا ماه مارس امسال بود که کروم بالاخره مشکلات را برطرف کرد. در حال حاضر حتی IE10 از انتقال شبه عناصر و انیمیشن ها پشتیبانی می کند.

پس این نمادهای CSS قابل تغییر را چه بنامیم؟ در مورد ترانسفورمیکون ها چطور؟

این قطعه کد فقط در مرورگرهایی اجرا می شود که از ویژگی های مورد استفاده پشتیبانی می کنند.

ما فقط به سبک ها/تغییرها در SCSS نگاه می کنیم و برای کسانی از شما که آشنایی چندانی با SCSS ندارید توضیحاتی را در قالب نظرات اضافه می کنیم. کد CSS کامل کامپایل شده را در کد منبع Github پیدا خواهید کرد.
از آنجایی که جاوا اسکریپت بسیار ساده است (فقط تغییر نام کلاس)، ما آن را پوشش نمی دهیم و همچنین می توانید آن را در کد منبع قابل دانلود در Github پیدا کنید.

سه خط در کنار یک فلش (فلش چپ و فلش بالا)

علامت گذاری

نماد منوی سه خطی aka navicon aka همبرگر را می‌توان به روش‌های متفاوتی به دست آورد، اما در این مورد ما از یک عنصر wrapper و یک فرزند با دو عنصر شبه برای تشکیل سه خط استفاده می‌کنیم. نشانه گذاری واقعا سنگین نیست.

              button class="lines-button arrow arrow-left" type="button" role="button" aria-label="Toggle Navigation">
                span class="lines">span>
              button>

SCSS

ابتدا پوشش را در اطراف Navicon واقعی تنظیم می کنیم تا انتقال را آغاز کنیم. $button-size عرض خطوط کانتور است، نه کل ناحیه هدف.

              $button-size : 3.5rem; 
              $transition: .3s; 

              .lines-button {
                display: inline-block;
                padding: $button-size/2 $button-size/4;
                transition: .3s;
                cursor: pointer;
                user-select: none;
                border-radius: $button-size/7;
              
                &:hover {
                  opacity: 1;
                }
              
                &:active {
                  transition: 0;
                  background: rgba(0,0,0,.1);
                }
              }

و حالا یک میکسی که از آن برای ایجاد یک ردیف استفاده می کنیم.

              @mixin line {
                display: inline-block;
                width: $button-size;
                height: $button-size/7;
                background: $color;
                border-radius: $button-size/14; 
                transition: $transition;
              }

ما از mixin در استفاده می کنیم .lines عنصر و عناصر شبه کاملاً مستقر در آن برای ایجاد یک Navicon.

              .lines {
                
                
                @include line;
                position: relative; 

                
                &:before, &:after {
                
                 @include line;
                  position: absolute;
                    left:0;
                  content: '';
                  transform-origin: $button-size/14 center;
                }
                &:before { top: $button-size/4; }
                &:after { top: -$button-size/4; }
              }

اگر می‌خواهیم همه چیز به‌خوبی هماهنگ شود، باید شروع تبدیل شبه عنصر (خط‌های بالا و پایین) را با دقت ردیف کنیم.

من یک قلم ساده ایجاد کردم تا نشان دهم که شروع تبدیل به کجا می رود و چگونه عناصر شبه تبدیل می شوند.:before قرمز است :after آبی است و .lines سبز است

قلم را اینجا ببینید.

و در اینجا یک تصویر ساده است که منشا تبدیل و نحوه تراز کردن شبه عناصر را نشان می دهد.

تصویری که منشا تبدیل شبه عنصر را نشان می دهد

هنگامی که ماوس را روی دکمه منوی سه خطی در حالت اولیه قرار می دهیم، آن را کمی گسترش می دهیم.

              .lines-button:hover {
                opacity: 1;
                  
                .lines {
                  &:before { top: $button-size/3.5; }
                  &:after { top: -$button-size/3.5; }
                }
              }

در نهایت، اجازه دهید این منوی سه خطی را به یک نماد فلش سمت چپ تبدیل کنیم. برای این نسخه ی نمایشی زمانی که .lines-button پوسته کلیک کرد، ما یک را اضافه می کنیم .close کلاس به آن فلش وقتی کمی کوچک شود بهتر به نظر می رسد، بنابراین ما این کار را با استفاده از آن انجام خواهیم داد scale3d() و نه فقط scale()، که باعث شتاب سخت افزاری می شود و باید کارها را کمی هموارتر کند.

              .lines-button.arrow.close {
                transform: scale3d(.8,.8,.8);
              }

              .lines-button.arrow.close .lines{
&:before,
&:after {
                    top: 0;
                    width: $button-size/1.8;
                  }
                
                  &:before { transform: rotate3d(0,0,1,40deg); }
                  &:after { transform: rotate3d(0,0,1,-40deg); }
              }

برای :before و :after خطوط، ما آنها را کمی کوتاه کرده و همه آنها را روی هم قرار می دهیم. در نهایت آنها را 40 درجه در جهت مخالف نسبت به یکدیگر می چرخانیم. یک تیر زدیم!

برای تبدیل Navicon دوم به یک فلش رو به بالا، نشانه گذاری ثابت باقی می ماند، ما فقط یک کلاس اضافه می کنیم .arrow-up به دکمه

```

This icon will get the exact same styles and transformations as the previous one, but we'll rotate the icon in it's .close state by 90 degrees so the arrow points upwards.

```scss .lines-button.arrow-up.close { transform: scale3d(.8,.8,.8) rotate3d(0,0,1,90deg); // Rotate around the z-axis } ```

Three-line to —

The markup for this one is, of course, the same as the markup in the previous section. The button in this example gets a .minus class, which defines the styles that will be applied to it.

The SCSS

To style this icon we’ll apply the same styles as above too down until the hover state. But where this icon will differ from the previous one is in the styles applied to it when it’s clicked, i.e in the .close state. This icon will transform into a “—” (like a minus sign), which can resemble a “collapse menu” icon, or “show less”, if you’re using it for a mobile navigation. The pseudo-elements (top and bottom lines) won’t be rotated so we’ll reset the transforms to none, and we’ll keep the width of the icon instead of shrinking it, and then we'll just overlay them on top of the .lines element to form one single line instead of three.

```scss .lines-button.minus.close .lines{ &:before, &:after{ transform: none; width: $button-size; top:0; } } ```

Three-line to ✕ (#1)

این نماد دقیقاً مانند موارد قبلی شروع می شود. ساختار علامت گذاری مانند نمادهای سه خط قبلی است، با همان اثر گسترش حالت مکان نما. برای این تبدیل، نماد a دریافت می کند .x کلاس (شبیه تبدیل شکل x است).

هنگامی که دکمه کلیک می شود، یک .close کلاس مانند مثال های قبلی به آن اضافه می شود. اما اینجاست که تحول جدید تعریف خواهد شد.

SCSS

برای تبدیل سه خط به شکل ✕، پس‌زمینه نماد را به شفاف تغییر می‌دهیم (خط وسط ناپدید می‌شود)، و خطوط بالا و پایین (شبه عناصر) 45 درجه در جهت مخالف چرخانده می‌شوند و برای ایجاد شکل روی هم قرار می‌گیرند.

`` scss .lines-button.x.close .lines{ /*پنهان کردن خط وسط*/ پس زمینه: شفاف /*خطوط را با تنظیم هر دو مقدار بالای آنها روی 0*/ روکش کنید &:قبل، &:بعد{ مبدا تبدیل: 50% 50%; top:0; عرض: $button-size; } // خطوط را بچرخانید تا شکل x را تشکیل دهید &:قبل از{ تبدیل: rotate3d(0,0,1,45deg)؛ } &:بعد از{ تبدیل: rotate3d(0,0,1,-45deg)؛ } } ```

این تبدیل بسیار شبیه به تبدیل فلش ها است، اما نکات کلیدی که آن را متفاوت می کند، حفظ عرض خطوط در اینجا به جای جمع کردن آنها مانند آنچه برای فلش ها انجام دادیم، و نگه داشتن شروع تبدیل در مرکز است.

سه خط به ✕ (#2)

این تبدیل از سبک تبدیل پنجم از قلم پدرو کامپوس در کدپن الهام گرفته شده است. ما نشانه گذاری را برای این یکی انجام می دهیم، البته مانند نشانه گذاری برای همه دکمه هایمان، با یک کلاس خاص، در این مورد x2.

SCSS

این آیکون با همان تبدیل نماد سه خط به منهای شروع می شود و وقتی اولین تبدیل کامل شد، شبه عناصر می چرخند و شکل ✕ را تشکیل می دهند. وقتی تبدیل اول کامل شد، تبدیل دوم را اعمال می کنیم، بنابراین برای آن باید یک تاخیر برای انتقال ها تعیین کنیم تا همزمان اتفاق نیفتند.

جایی که این تبدیل با اثر ✕ قبلی متفاوت است ترتیب تبدیل ها و تاخیرهای اضافه شده است. برای افکت قبلی، همزمان چرخیدیم و روی هم گذاشتیم، در حالی که در این حالت چرخش را همپوشانی می کنیم و تا زمانی که همپوشی کامل شود، چرخش را به تاخیر می اندازیم و سپس می چرخانیم.

`` scss.lines-button.x2 .lines{ انتقال: پس‌زمینه .3s .6s سبکی؛&:قبل، &:بعد{ // منبع تبدیل را به مرکز تنظیم کنید مبدا تبدیل: 50% 50%; انتقال: بالا .3s 0.6s ease, transform 0.3s ease; } } ```

ما یک تاخیر انتقال برای خطوط اضافه کردیم تا تبدیل ها در یک خط اتفاق بیفتند.

در مرحله بعد، تاخیرهای انتقال و تبدیل ها را برای شبه عناصر تعریف می کنیم. وقتی روی دکمه کلیک می‌شود، ابتدا ردیف‌های بالا و پایین ترجمه می‌شوند تا روی یکدیگر همپوشانی داشته باشند، پس‌زمینه خط وسط روی شفاف تنظیم می‌شود تا آن را پنهان کند، زیرا نمی‌خواهیم وقتی x تشکیل می‌شود در آنجا باشد، و سپس هر یک از دو ردیف باقی‌مانده 45 درجه (و 45- درجه برای خط مقابل) می‌چرخند تا شکل ✕ شود.

`` scss .lines-button.x2.close .lines{ انتقال: پس زمینه 0.3s 0s سبکی. پس زمینه: شفاف &:قبل، &:بعد{ انتقال: بالا 0.3s ease، transform 0.3s 0.5s ease; top:0; عرض: $button-size; } &:قبل از{ تبدیل: rotate3d(0,0,1,45deg)؛ } &:بعد از{ تبدیل: rotate3d(0,0,1,-45deg)؛ } } ```

ترفند در اینجا، که با تبدیل های قبلی متفاوت است، این است که به سادگی مبدأ تبدیل شبه عناصر را به عنوان مرکز آنها تنظیم کنید و تاخیرهای انتقال صحیح را اضافه کنید.

شبکه به ✖ (#1)

علامت گذاری

مشابه نماد قبلی، a داریم .grid-button بسته بندی الف .grid نماد

```

SCSS

برای این آیکون به جای استفاده از عناصر شبه، از قدرت توانا استفاده می کنیم box-shadow ویژگی. برای تمیزتر کردن کد و تغییر آن آسان تر، یک a را ایجاد می کنیم $base و الف $space متغیرها. ابتدا به استایل می پردازیم .grid-button، پوسته

`` scss //متغیرها برای انعطاف‌پذیری بیشتر دکمه‌ها و سفارشی‌سازی آسان‌تر استفاده می‌شوند //این متغیرها با مقادیرشان در CSS کامپایل شده جایگزین می شوند $base: 1rem; $space: $base/4; رنگ $: #c0392b;.grid-button { padding: $base*2; //2رم مکان نما: اشاره گر انتخاب کاربر: هیچ. } ```

حالا برسیم به .grid نماد بسیار و دیوانه است box-shadow دارایی هر سایه جدا شده با کاما را به عنوان شبه عنصر خاص خود در نظر بگیرید. بسیار مهم است که ترتیب هر سایه را در ویژگی box-shadow پیگیری کنید، در غیر این صورت انیمیشن درست به نظر نمی رسد.

را box-shadow ویژگی خوب است که وقتی هیچ رنگی مشخص نمی شود، ویژگی فقط هر خاصیت رنگ را به ارث می برد. در شرایطی مانند ما، با یک عنصر با تعداد زیادی سایه که همه یک رنگ هستند، بسیار مفید است که فقط رنگ ها را رها کنید و یک بار آن را با ویژگی color تنظیم کنید.

`` scss .grid-button .grid{ عرض: پایه $; ارتفاع: پایه $; پس زمینه: $color; رنگ: رنگ $; /* وقتی رنگ ها در زیر مشخص شده اند استفاده نمی شود */ انتقال: $transition; } ```

وقتی روی دکمه کلیک می کنیم، اضافه می کنیم .close کلاس به .grid-button.

از آنجایی که ما از دو تکنیک برای ایجاد ✖ از نماد شبکه استفاده خواهیم کرد، از دو نام کلاس متفاوت برای دو دو تبدیل استفاده خواهیم کرد. برای مورد اول از a استفاده خواهیم کرد .rearrange نام کلاس همانطور که ما سایه های جعبه را دوباره مرتب می کنیم.

ابتدا سایه‌های کادر را پراکنده می‌کنیم تا آیکون یک شبکه تشکیل دهد.

`` scss .grid-button.rearrange .grid{ جعبه سایه: -($base+$space) 0 -($base+$space)، 0 0 -($base+$space)، ($base+$space) (-($base + $space)), -($base+$space) 0، $base+$space 0، -($base+$space) ($base + $space)، 0 ($base+$space)، ($base+$space) ($base + $space); } /* معادل CSS نتیجه box-shadow بالا است: جعبه سایه: -1.25rem -1.25rem، 0 -1.25 رم، 1.25 رم -1.25 رم، -1.25 rem 0، 1.25 دقیقه 0، -1.25rem 1.25rem، 0 1.25 رم، 1.25rem 1.25rem; */ ```

و زمانی که نماد دریافت شد .close کلاس با کلیک کردن، سایه ها را دوباره مرتب می کنیم.

`` scss .grid-button.rearrange.close .grid{ جعبه سایه: 0 0 - $پایه، 0 0 -$base*2،$پایه 0، -$base*2 0، $base*2 0، -$پایه 0، 0 $پایه*2، 0 $پایه; transform: rotate3d(0,0,1,-45deg) scale3d(.8,.8,.8); } /* معادل CSS box-shadow است: جعبه سایه: 0-1 رم، 0-2 رم، 1 ریم 0، -2 ام 0، 2 دقیقه 0، -1 ریم 0، 0 2 دقیقه، 0 1rem; */ ```

تمام فضاهای بین سایه‌های جداگانه حذف شد (همه حذف شد $space متغیرها) و چهار سایه گوشه را به داخل و چهار سایه کناری را به بیرون منتقل کرد و آنها را مرتب کرد. آخرین اما نه کم‌اهمیت، کل نماد را 45- درجه می‌چرخانیم و آن را با استفاده از شتاب سخت‌افزاری مقیاس می‌دهیم تا انیمیشن صاف شود. و با آن به اولین اثر دست یافتیم.

شبکه به ✖ (#2)

برای تبدیل مش دوم به ✖، کاری بسیار شبیه به آنچه قبلا انجام داده بودیم انجام می دهیم، اما به جای تنظیم مجدد سایه ها، چهار تا از آنها را به عنصر اصلی "جمع" می کنیم و با حذف فاصله ها، چهار تای دیگر را به هم نزدیک می کنیم، بنابراین ✖ را تشکیل می دهیم. ما به دکمه کلاسی با این افکت می دهیم .collapse.

`` scss .grid-button.collapse .grid{ // ترتیب سایه های جعبه در اینجا کمی با ترتیب بالا متفاوت است جعبه سایه: -($base+$space) 0، -($base+$space) ($base+$space)، $base+$space 0، ($base+$space) (-($base+$space)), 0 0 -($base+$space)، -($base+$space) 0 -($base+$space)، 0 ($base+$space)، ($base+$space) ($base+$space); } /* معادل CSS box-shadow که در اینجا مشخص شده است: box-shadow: -1.25rem 0, -1.25rem 1.25rem، 1.25 دقیقه 0، 1.25 رم -1.25 رم، 0 -1.25 رم، -1.25rem -1.25rem، 0 1.25 رم، 1.25rem 1.25rem; */ ```

و وقتی دکمه کلیک شد، .close کلاس اضافه می شود و سایه ها "جمع می شوند".

`` scss .grid-button.collapse.close .grid{ جعبه سایه: -$پایه 0، 0 0 شفاف، $پایه 0، 0 0 شفاف، 0 0 - $پایه، 0 0 شفاف، پایه 0 دلار، 0 0 شفاف؛ } /*معادل CSS نتیجه box-shadow است: جعبه سایه: -1 ریم 0، 0 0 شفاف، 1 ریم 0، 0 0 شفاف، 0-1 رم، 0 0 شفاف، 0 1 ام، 0 0 شفاف؛ */ ```

و ما تمام شدیم! امیدوارم از این افکت ها لذت برده باشید و آموزش مفید بوده باشد!