2

На сайте есть анимированная шапка, объекты прилетают с разных сторон и встают на свои места, на этом 3-ех секундная анимация заканчивается. Надо сделать так, чтобы посетитель не просматривал каждый раз эту анимацию при переходе на другие страницы, а чтобы видел:

  1. только один раз, когда впервые зашел на сайт
  2. либо, чтоб она срабатывала только на главной, а на остальных страницах уже открывалась завершенной.

Вот пример использованной анимации для шапки:

body{background-color:#5d216c;width:600px;margin:100px auto;}
.box {
  width:auto;
  height:100px;
  background-color:#6a2e79;
  margin:0 auto;
  float:left;
  font-size:100px;
  padding:20px;
  color:#fff;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}

/* Step 2: Call the Animation */
#box1 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box2 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;
}

#box3 { 
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box4 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;
}

#box5 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}
 <!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="sinir">
  <div class="box" id="box1">A</div>
  <div class="box" id="box2">Y</div>
  <div class="box" id="box3">H</div>
  <div class="box" id="box4">A</div>
  <div class="box" id="box5">N</div>
</div>
 
<script  src="js/index.js"></script>

</body>
</html>

   

2
  • 1
    Что-то уже пробовали сами? Вроде самое логичное - повесить куку и по куке ставить модификатор класса. 29 сен 2017 в 4:10
  • думал об этом, но не знаю как реализовать. 29 сен 2017 в 5:09

1 ответ 1

1

Можно сделать так:

// Возвращает cookie с именем name, если есть, если нет, то undefined
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

// Устанавливает cookie
function setCookie(name, value, options) {
    options = options || {};

    var expires = options.expires;

    if (typeof expires === "number" && expires) {
        var d = new Date();
        d.setTime(d.getTime() + expires * 1000);
        expires = options.expires = d;
    }
    if (expires && expires.toUTCString) {
        options.expires = expires.toUTCString();
    }

    value = encodeURIComponent(value);

    var updatedCookie = name + "=" + value;

    for (var propName in options) {
        updatedCookie += "; " + propName;
        var propValue = options[propName];
        if (propValue !== true) {
            updatedCookie += "=" + propValue;
        }
    }

    document.cookie = updatedCookie;
}

function ready() {
    var cookieExpiration = 5; // Время действия куки в секундах, например 1 час = 24 * 60 * 60
    var cookie = getCookie('my_cookie');
    if (typeof cookie !== 'undefined') {
        // Куки присутствует
        // Ничего не делаем
    } else {
        // Нет куки
        // Установите класс, чтобы показать анимацию
        for (var i = 1; i <= 5; i++) {
            var d = document.getElementById("box" + i);
            d.className += " anim-on";
        }
        // Установить куки
        setCookie('my_cookie', new Date(), {expires: cookieExpiration, path: '/'});
    }
}

document.addEventListener("DOMContentLoaded", ready);

css такой должен быть, чтобы работало:

body{background-color:#5d216c;width:600px;margin:100px auto;}
.box {
    width:auto;
    height:100px;
    background-color:#6a2e79;
    margin:0 auto;
    float:left;
    font-size:100px;
    padding:20px;
    color:#fff;
}

/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
    from {-webkit-transform:translate(0px, 1000px)}
    to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
    from {-moz-transform:translate(0px, 1000px)}
    to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
    from {-ms-transform:translate(0px, 1000px)}
    to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
    from {-o-transform:translate(0px, 1000px)}
    to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
    from {transform:translate(0px, 1000px)}
    to   {transform:translate(0px, 0px)}
}

/* Step 2: Call the Animation */
#box1.anim-on {
    -webkit-animation:aniload 4s;
    -moz-animation:aniload 4s;
    -ms-animation:aniload 4s;
    -o-animation:aniload 4s;
    animation:aniload 4s;
}

#box2.anim-on {
    -webkit-animation:aniload 1s;
    -moz-animation:aniload 1s;
    -ms-animation:aniload 1s;
    -o-animation:aniload 1s;
    animation:aniload 1s;
}

#box3.anim-on {
    -webkit-animation:aniload 4s;
    -moz-animation:aniload 4s;
    -ms-animation:aniload 4s;
    -o-animation:aniload 4s;
    animation:aniload 4s;
}

#box4.anim-on {
    -webkit-animation:aniload 3s;
    -moz-animation:aniload 3s;
    -ms-animation:aniload 3s;
    -o-animation:aniload 3s;
    animation:aniload 3s;
}

#box5.anim-on {
    -webkit-animation:aniload 2s;
    -moz-animation:aniload 2s;
    -ms-animation:aniload 2s;
    -o-animation:aniload 2s;
    animation:aniload 2s;
}
16
  • Спасибо. Интересно, а как сделать чтоб отключалась aniload после первого использования? куда-то вставить в этом коде? или создать дубль класс с приставкой просто без aniload? и уже его куда-то вставить? 29 сен 2017 в 8:00
  • Да сделайте анимацию не на #box1, а на #box1.animon и добавляйте класс animon в том коде, что я привел 29 сен 2017 в 8:03
  • Блин. Что-то не работает... Просто все стало статичным 29 сен 2017 в 8:28
  • ну а скрипт вы как запускаете? по какому событию? надо по DOMContentLoaded. Смотрите пример на моем тестовом сайте: test.kagg.eu/wp-content/themes/test/724562.html куки я поставил на 5 секунд 29 сен 2017 в 9:27
  • Дополнил ответ, чтобы скрипт работал по DOMContentLoaded 29 сен 2017 в 9:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.