Красивая анимация для иконки меню

18 февраля 2016 г. 1 Алиса Ставко 1852

Очень интересный эффект для иконки меню. Изначально иконка меню имеет классический вид "гамбургер", при нажатии на иконку он становиться крестиком при этом используется эффект анимации "ниндзя" при превращении иконки. Анимация повторяется в обратном порядке при нажатии на крестик (значок закрытия), которая превращает его в исходную иконку и закрывает меню.

Старт

Для начала предлагаю посмотреть саму анимацию:

И траекторию движения анимации:

Понравилось? Тогда вот ссылка на демо и для скачивания примера.

Как использовать

Подключаем JavaScript перед закрывающимся тегом </head>:

<head>
    <!-- ... -->
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="/pathToFolder/js/segment.min.js"></script>
    <script src="/pathToFolder/js/ease.min.js"></script>
    <!-- ... -->
</head>

Подключаем JavaScript перед закрывающимся тегом </body>:

<body>
    <!--...-->
    <script src="js/main.js"></script>
</body>

Подключаем CSS перед закрывающимся тегом </head>:

<head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/component.css" />
    <!-- ... -->
</head>

И подключаем код меню. Большой размах анимации:

<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathB" d="M 300 500 L 700 500"></path>
        <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
</div>
 
<div id="dummy" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>

Анимация размером с иконкой:

<div id="menu-icon-wrapper2" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathD" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathE" d="M 300 500 L 700 500"></path>
        <path id="pathF" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger2" class="menu-icon-trigger"></button>
</div>
 
<div id="dummy2" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>