@lazy_mind

Как реализовать анимацию блока переключения языка?

В правом верхнем углу сайта есть блочок для переключения языка. Нужно сделать так, чтобы после загрузки страницы он висел секунд 10, а после уезжал вправо за viewport. И оставалась торчать только маленькая часть с "<" для его раскрытия и перехода на другой язык. На лендинге всего два языка, так что меню не нужно. Как реализовать это ? Хочется pure css реализацию. Очень приветствуются примеры кода.
<div class="langswitch">
    <a href="/"><b>RUS</b></a>
</div>

div.langswitch {
    display: block;
    text-align: center;
    border: none;
    border-radius: 4px;
    padding: 5px 5px;
    background: #0b77ce;
    position: fixed;
    right: 30px;
    top: 30px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

div.langswitch a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
}
603028223e1ab002650159.png
  • Вопрос задан
  • 213 просмотров
Пригласить эксперта
Ответы на вопрос 1
v3shin
@v3shin
Веб-шаман
// элементу присвойте id="langswitch"

// таймаут на 10 сек
let langswitchTimeout = setTimeout(() => {
    document.querySelector('#langswitch').classList.add('langswitch__hidden');
}, 10000);

// при наведении курсора - отменить скрытие
document.querySelector('#langswitch').addEventListener('mouseover', function () {
    if (langswitchTimeout) clearTimeout(langswitchTimeout);
});

// скрыть/показать по клику на .langswitch__toggler
document.querySelector('#langswitch .langswitch__toggler').addEventListener('click', function (e) {
    e.target.closest('.langswitch').classList.toggle('.langswitch__hidden');
});


Теперь элемент будет скрываться/отображаться с помощью класса langswitch__hidden. А с css разберетесь сами.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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