Avatar Animation | Html Css And JavaScipt WIth Free Source Code

Author - personCodeatnow

Follow Us On Telegram   Telegram link

This free source code allows you to create a simple and interactive animated avatar on your website.

The avatar is designed using HTML and CSS, and the animation is powered by JavaScript.

The avatar moves horizontally across the screen in a smooth and continuous loop.

You can customize the avatar's appearance by adjusting the background color, size, and animation properties in the CSS code.

Feel free to use this code snippet to enhance the visual appeal of your website and engage your users.

To access the complete source code and implementation details, please visit codeatnow.com.

Download Code

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow - Avatar Input</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="avatar-input">
  <label class="avatar-input__label" for="file-input">
    <input type="file" id="file-input" class="avatar-input__input" />
    <div class="avatar-input__icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 460.8 460.8"
        fill="currentColor"
      >
        <path
          d="M230.432,239.282c65.829,0,119.641-53.812,119.641-119.641C350.073,53.812,296.261,0,230.432,0
        S110.792,53.812,110.792,119.641S164.604,239.282,230.432,239.282z"
        />
        <path
          d="M435.755,334.89c-3.135-7.837-7.314-15.151-12.016-21.943c-24.033-35.527-61.126-59.037-102.922-64.784
        c-5.224-0.522-10.971,0.522-15.151,3.657c-21.943,16.196-48.065,24.555-75.233,24.555s-53.29-8.359-75.233-24.555
        c-4.18-3.135-9.927-4.702-15.151-3.657c-41.796,5.747-79.412,29.257-102.922,64.784c-4.702,6.792-8.882,14.629-12.016,21.943
        c-1.567,3.135-1.045,6.792,0.522,9.927c4.18,7.314,9.404,14.629,14.106,20.898c7.314,9.927,15.151,18.808,24.033,27.167
        c7.314,7.314,15.673,14.106,24.033,20.898c41.273,30.825,90.906,47.02,142.106,47.02s100.833-16.196,142.106-47.02
        c8.359-6.269,16.718-13.584,24.033-20.898c8.359-8.359,16.718-17.241,24.033-27.167c5.224-6.792,9.927-13.584,14.106-20.898
        C436.8,341.682,437.322,338.024,435.755,334.89z"
        />
      </svg>
    </div>
  </label>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
CSS 
* {
  box-sizing: border-box;
}

:root {
  --background-color: #11131e;
  --shadow-color: #030305;
  --input-bg-color: hsl(208.7, 20%, 80%);
  --input-icon-color: hsl(208.7, 20%, 50%);
  --outline-color: hsl(208.7, 100%, 50%);
  --check-color: hsl(202, 100%, 53%);
  background-color: var(--background-color);
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-input {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease all;
  width: 150px;
  height: 150px;
  padding: 4px;
  position: relative;
}

.avatar-input__label {
  box-shadow: 0 20px 25px -5px var(--shadow-color),
    0 8px 10px -6px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transition: 0.4s ease all;

  overflow: hidden;

  cursor: pointer;
  z-index: 1;
}

.avatar-input--dragover,
.avatar-input--uploading,
.avatar-input--success,
.avatar-input:active {
  transform: scale(0.9);
}

.avatar-input:active .avatar-input__label {
  box-shadow: none;
}

.avatar-input--dragover .avatar-input__label,
.avatar-input--uploading .avatar-input__label,
.avatar-input--success .avatar-input__label {
  box-shadow: none;
  filter: brightness(0.5);
}

.avatar-input__input {
  display: none;
}

.avatar-input__icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: var(--input-icon-color);
  background: var(--input-bg-color);
  transition: 0.2s ease all;
}

.avatar-input__icon svg {
  width: 80%;
  position: relative;
  bottom: -6%;
}

.avatar-input__preview {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.2s ease all;
  transform: scale(1.05);
}

.avatar-input__outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke-opacity: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--outline-color);
  stroke-dasharray: var(--outline-total-stroke) var(--outline-stroke-offset);
  stroke-dashoffset: var(--outline-total-stroke);
  transition: 0.05s linear all;
  pointer-events: none;
}

.avatar-input--uploading .avatar-input__outline,
.avatar-input--success .avatar-input__outline {
  stroke-opacity: 1;
}

.avatar-input--uploading .avatar-input__percentage {
  opacity: 1;
}

.avatar-input__percentage {
  position: absolute;
  opacity: 0;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-weight: bold;
  transition: 0.25s ease opacity;
  pointer-events: none;
}

.avatar-input__success {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  transition: 0.25s ease opacity;
  width: 40%;
  pointer-events: none;
}

.avatar-input__success-icon {
  stroke-dasharray: var(--check-total-stroke) var(--check-total-stroke);
  stroke-dashoffset: var(--check-stroke-offset);
  opacity: 0;
  transition: 0.4s ease all;
  transition-delay: 100ms;
  color: var(--check-color);
}

.avatar-input--success .avatar-input__success-icon {
  opacity: 1;
}
JS 
class AvatarInput {
  percentage = 0

  constructor(el) {
    this.root = el
    this.label = el.querySelector('.avatar-input__label')
    this.input = el.querySelector('.avatar-input__input')
    this.addOutline()
    this.addPercentageText()
    this.addPreviewImage()
    this.addSuccessMessage()

    this.root.addEventListener('dragover', this.onDragOver.bind(this))
    this.root.addEventListener('dragleave', this.onDragLeave.bind(this))
    this.root.addEventListener('drop', this.onDrop.bind(this))

    this.reader = new FileReader()
    this.reader.addEventListener('load', this.onFileRead.bind(this))

    this.input.addEventListener('input', this.onFileSelect.bind(this))
  }

  onDragOver(e) {
    e.preventDefault()
    this.root.classList.add('avatar-input--dragover')
  }

  onDragLeave() {
    this.removeDragoverState()
  }

  removeDragoverState() {
    this.root.classList.remove('avatar-input--dragover')
  }

  addPercentageText() {
    this.percentageText = document.createElement('div')
    this.percentageText.classList.add('avatar-input__percentage')
    this.percentageText.textContent = '0%'
    this.percentageText.style.fontSize = `${this.root.clientWidth * 0.2}px`
    this.root.appendChild(this.percentageText)
  }

  startUploading() {
    setTimeout(() => {
      this.uploadTick()
    }, 600)
  }

  addSuccessMessage() {
    this.success = document.createElement('div')
    this.success.classList.add('avatar-input__success')

    this.successSvg = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'svg'
    )
    this.successSvg.setAttribute('viewBox', '0 0 24 24')
    this.successSvg.classList.add('avatar-input__success-icon')

    const svgIcon = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'path'
    )

    svgIcon.setAttribute(
      'd',
      'M3.36902 12.4213L9.0003 18.0527C9.20134 18.2537 9.52933 18.2469 9.72183 18.0376L20.8689 5.92126'
    )
    svgIcon.setAttribute('stroke', 'currentColor')
    svgIcon.setAttribute('stroke-width', '2')
    svgIcon.setAttribute('stroke-linecap', 'round')
    svgIcon.setAttribute('fill', 'none')

    this.successSvg.appendChild(svgIcon)
    this.success.appendChild(this.successSvg)

    this.root.appendChild(this.success)

    this.totalCheckStrokeLength = Math.ceil(svgIcon.getTotalLength()) + 2
    this.successSvg.style.setProperty(
      '--check-stroke-offset',
      this.totalCheckStrokeLength
    )
    this.successSvg.style.setProperty(
      '--check-total-stroke',
      this.totalCheckStrokeLength
    )
  }

  onDone() {
    this.root.classList.remove('avatar-input--uploading')
    this.successSvg.style.setProperty('--check-stroke-offset', 0)
    this.root.classList.add('avatar-input--success')
    setTimeout(() => {
      this.percentage = 0
      this.updateText()
    }, 200)

    setTimeout(() => {
      this.successSvg.style.setProperty(
        '--check-stroke-offset',
        this.totalCheckStrokeLength
      )
    }, 800)

    setTimeout(() => {
      this.root.classList.remove('avatar-input--success')
      this.updateOutline()
    }, 1200)
  }

  uploadTick() {
    if (this.percentage === 100) {
      setTimeout(() => {
        this.onDone()
      }, 400)
      return
    }
    this.percentage++
    this.updateOutline()
    this.updateText()
    requestAnimationFrame(this.uploadTick.bind(this))
  }

  updateText() {
    this.percentageText.textContent = this.percentage + '%'
  }

  updateOutline() {
    this.outline.style.setProperty(
      '--outline-stroke-offset',
      this.totalOutlineStrokeLength -
        this.totalOutlineStrokeLength * this.percentage * 0.01
    )
  }

  addOutline() {
    const rootWidth = this.root.clientWidth
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

    svg.setAttribute('viewBox', `0 0 ${rootWidth} ${rootWidth}`)
    svg.classList.add('avatar-input__outline')

    const svgCircle = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'circle'
    )
    svgCircle.setAttribute('cx', '50%')
    svgCircle.setAttribute('cy', '50%')
    svgCircle.setAttribute('r', rootWidth / 2 - 3)
    svgCircle.setAttribute('fill', 'none')
    svgCircle.setAttribute('stroke', 'currentColor')
    svgCircle.setAttribute('stroke-width', '3px')

    svg.appendChild(svgCircle)
    this.outline = svg
    this.root.appendChild(svg)

    this.totalOutlineStrokeLength = Math.ceil(svgCircle.getTotalLength()) + 2
    svg.style.setProperty(
      '--outline-stroke-offset',
      this.totalOutlineStrokeLength
    )
    svg.style.setProperty(
      '--outline-total-stroke',
      this.totalOutlineStrokeLength
    )
  }

  onDrop(e) {
    e.preventDefault()
    const items = [...e.dataTransfer.items]
    if (!items || items?.[0].kind !== 'file') return
    const file = items[0].getAsFile()
    this.reader.readAsDataURL(file)
    setTimeout(() => {
      this.removeDragoverState()
      this.root.classList.add('avatar-input--uploading')
    }, 300)
  }

  onFileSelect() {
    const file = this.input.files[0]
    if (file) {
      this.root.classList.add('avatar-input--uploading')
      this.reader.readAsDataURL(file)
    }
  }

  setPreviewImage(src) {
    this.previewImage.src = src
  }

  addPreviewImage() {
    this.previewImage = document.createElement('img')
    this.previewImage.classList.add('avatar-input__preview')
    this.label.appendChild(this.previewImage)
  }

  onFileRead() {
    const image = this.reader.result
    this.setPreviewImage(image)
    this.startUploading()
  }
}

Array.from(document.querySelectorAll('.avatar-input')).forEach(
  (el) => new AvatarInput(el)
)
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link