swipeshot
@swipeshot
Учусь на ошибках.

Как сделать такое переключение?

Как сделать такое переключение, как тут (leonaded.com) между работами и контактами?
Можно пример на JSfiddle?
  • Вопрос задан
  • 207 просмотров
Решения вопроса 1
igorbelikov
@igorbelikov
Fullstack Developer
Тут все работает просто на css свойстве transition.
Просто по клику одному блоку устанавливается позиция left: -1000px (чтобы ушел за экрана), а другому 0. А это свойство все эти изменения делает плавными.
JSFiddle
То есть примерно так:
.block {
  /* all - свойства, к которым применяется анимация, можно указать только left
     1s - плавность (продолжительность), можно указать 0.5s или 3s
     linear - тип анимации, в данном случае линейна */
  transition: all 1s linear;
  position: absolute;
  left: 100px;
  color: yellow;
  background-color: green;
}
.block.active {
  left: -200px;
}

<a href="#" id="btn-move">Передвинуть блок</a>
<div class="block">text</div>

$(function() {
  $('#btn-move').click(function() {
    $('.block').toggleClass('active');
    return false;
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы