Форум

TeriFash · #1 (**permalink**) 03.10.2017, 02:41

Здравствуйте столкнулся я с такой задачей есть блок на пол экрана и менюшка в самом верху, при клике на ссылку из меню подтягивает по url новую картинку на фон в блок, вопрос в том как данный процесс анимировать

PS, может я что-то намудрил с исполнением, так что если кто-то посоветует альтернативное решение буду очень благодарен!

вот меню!

<a href="javascript:l_image ('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg')">Elegance</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/356433/pexels-photo-356433.jpeg')">Creation</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/354249/pexels-photo-354249.jpeg')">Family Office</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg')">Experience</a>

вот блок куда пушет картинку!

<div class="img-container"><img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt=""></div>

а вот сам скрипт

function l_image (a) {
        document.example_img.src=a
    }

Rasy · #2 (**permalink**) 03.10.2017, 06:32

TeriFash,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      width: 100%; height: 100%;
    }
  </style>
</head>
<body>
<a href="#" onclick="l_image('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg', 2); return false;">Elegance</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/356433/pexels-photo-356433.jpeg', 2); return false;">Creation</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/354249/pexels-photo-354249.jpeg', 2); return false;">Family Office</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg', 2); return false;">Experience</a>
<div class="img-container"><img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt=""></div>

<script>
  
  function l_image(a, b) {
    if (window.t) clearTimeout(t);
    if (window.t1) clearTimeout(t1);
    var img = document.example_img;
    img.style.transition = 'opacity ' + b + 's';
    img.style.opacity = '0';
    window.t = setTimeout(function() {
      img.src = a;
    }, b * 1000 - 500);
    window.t1 = setTimeout(function() {
      img.style.opacity = '1';
    }, b * 1000);
  }

</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript