banner animation

by tomik23

HTML

<div class="container">
  <div class="image-bgr"><img src="http://www.grzegorztomicki.pl/images/chiny/992/IMG_7337.jpg" alt="" class="image-responsive">
    <div class="text">chiny</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.image-bgr {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  margin: auto;
}

.image-bgr img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 50px;
  line-height: 50px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 20px rgb(0, 0, 0);
  mix-blend-mode: overlay;
}

JavaScript

function animBanner(config) {
  const boxScroll = document.querySelector('.image-bgr');
  const image = document.querySelector('.image-responsive');
  const imageHeight = image.clientHeight;
  const boxHeight = boxScroll.clientHeight;
  const documentWidth = document.body.clientWidth;
  const margin = (imageHeight - boxHeight) / 2;

  image.removeAttribute('style');
  image.setAttribute('style', `animation: ${config}`);

  animClear();

  if (documentWidth >= 600) {
    animStyle(margin);
  }
}

function animClear() {
  const imageStyle = document.querySelector('#animBanner');
  if (imageStyle) {
    imageStyle.parentNode.removeChild(imageStyle);
  }
}

function animStyle(margin) {

  const keyFrames = animKeyframes(margin);

  const style = document.createElement('style');
  style.type = 'text/css';
  style.id = 'animBanner'
  style.appendChild(document.createTextNode(keyFrames));
  document.head.appendChild(style)

}

function animKeyframes(margin) {
  const percent = `
    0% {
      -webkit-transform: translate3d(0, -${margin}px, 0); 
      transform: translate3d(0, -${margin}px, 0); 
    }
    50% {
      -webkit-transform: translate3d(0, ${margin}px, 0); 
      transform: translate3d(0, ${margin}px, 0); 
    }
    100% {
      -webkit-transform: translate3d(0, -${margin}px, 0); 
      transform: translate3d(0, -${margin}px, 0);
    }
  `;
  return `@-webkit-keyframes animBanner { ${percent} } @keyframes anim { ${percent} }`;
}


const config = 'animBanner 25s ease-out infinite';

window.addEventListener('DOMContentLoaded', animBanner(config));

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    animBanner(config);
  }, 250);
});