animeJS Random Covers

animejs-random-covers.markdown

animeJS Random Covers

playing around with animeJS.

A Pen by Henning Orth on CodePen.

License.

index.html

<div class="logo">
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Hatje_Cantz_Verlag_logo_01.svg" alt="Hatje Cantz Logo">
</div>
<section>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
  <div class="anime js-anime-cover">
    <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80">
  </div>
</section>

script.js

var anime8 = document.querySelectorAll('.js-anime-cover');

var randoms = anime({
  targets: anime8,
  translateX: function() {
    var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var calcWidth = Math.floor(windowWidth * Math.random() - 400);
    return calcWidth <= 400 ? anime.random(20, 400) : calcWidth;
  },
  translateY: function() {
    var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var calcHeight = Math.floor(windowHeight * Math.random() - 600);
    return calcHeight <= 600 ? anime.random(20, 600) : calcHeight;
  },
  scale: function() {
    return anime.random(6, 10) / 10;
  },
  duration: function() {
    return anime.random(500, 1000);
  },
  delay: function() {
    return anime.random(500, 750);
  },
  direction: 'alternate',
  loop: false,
  easing: 'easeInOutQuad'
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

style.scss

body {
  background: #fff;
  height: 100vh;
}

section{
  position: relative;
}

.logo {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 5;
  
  img {
    width: 150px;
  }
}

.anime {
  left: 0;
  position: absolute;
  top: 0;
}