0

введите сюда описание изображения

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

4
  • не смог найти адекватное решение, если знаешь ссылку пришли 6 июн 2021 в 16:26
  • Вот статья с использованием плагина smartlanding.biz/animaciya-chisel.html
    – Alexandr
    6 июн 2021 в 16:29
  • а как сделать круг? 6 июн 2021 в 16:50
  • В поисковик "border progress bar js". А потом вставляешь его туда же, где выполняется код с цифрами.
    – Alexandr
    6 июн 2021 в 21:13

1 ответ 1

5

В скрипт можно не смотреть, все существующие настройки указаны в атрибуте data-options

class Loop {
  constructor() {
    this.frameId = null
    this.updatable = {}
    this.length = 0
    
    this.update = this.update.bind(this)
  }
  
  update(t) {
    for (const member in this.updatable) this.updatable[member](t)
    if (this.length > 0) this.frameId = requestAnimationFrame(this.update)
  }
  
  add(name, fn) {
    this.updatable[name] = fn

    if (this.length === 0) {
      this.length++
      this.run()
      return
    }

    this.length++
  }
  
  remove(name) {
    if (!this.updatable[name]) return

    delete this.updatable[name]
    this.length = Math.max(0, this.length - 1)
    if (this.length === 0) this.stop()
  }
  
  run() {
    this.stop()
    this.frameId = requestAnimationFrame(this.update)
  }
  
  stop() {
    cancelAnimationFrame(this.frameId)
  }
}

class OptionsParser {
  constructor(str, defaultOptions) {
    this.defaultOptions = defaultOptions
    this.options = {}
    
    this.parseOptions(str)
    this.applyOptions()
  }
  
  parseOptions(str) {
    str
      .split(',')
      .map(option => option.trim())
      .filter(option => !!option)
      .forEach(option => {
      
      const parts = option
        .split('=')
        .map(option => option.trim())
        .filter(option => !!option)
      
      if(parts[1] === 'false') {
        this.options[parts[0]] = false
      }

      else if(parts[1] === 'true') {
        this.options[parts[0]] = true
      }

      else if(isNaN(parts[1])) {
        this.options[parts[0]] = parts[1] ? parts[1] : true
      }
  
      else if(!isNaN(parts[1])){
        this.options[parts[0]] = +parts[1]
      }
    })

  }
  
  applyOptions() {
    for(const member in this.defaultOptions) {
      this.options[member] = this.options[member] || this.defaultOptions[member]
    }
  }
}

class Canvas {
  constructor(node) {
    if(!node) return;

    this.node = node
    this.context = this.node.getContext('2d')

    this.width = 0
    this.height = 0

    this.resize()
    addEventListener('resize', this.resize.bind(this))
  }

  resize() {
    this.node.width = this.width = this.node.offsetWidth
    this.node.height = this.height = this.node.offsetHeight
  }
}


class Progress extends OptionsParser {
  constructor(container) {
    super(
      container.getAttribute('data-options'),
      { from: 0, to: 100, step: 1, delay: 0.01, strokeColor: 'black', strokeWidth: 1 }
    )
    
    this.container = container
    if(!this.container) return;

    this.bind()
    
    this.out = this.container.querySelector('[data-progress-out]')
    this.canvas = new Canvas(this.container.querySelector('[data-progress-canvas]'))
     
    this.loop = new Loop()
    
    this.interval = null
    this.rid = null
    this.counter = 0
    this.t = 0
    this.circlePx = 0
    this.circlePy = 0
    
    this.id = Date.now()
    
    if(this.canvas.node) {
      this.resize()
      addEventListener('resize', this.resize.bind(this))
    }
    
    this.observer = new IntersectionObserver(this.run, { threshold: 0 })
    this.observer.observe(this.container)
  }

  bind() {
    this.run = this.run.bind(this)
  }
  
  startDrawing() {
    if(!this.canvas.node) return;
     
    const st = Date.now()
    const dur = this.options.delay * (this.options.to - this.options.from) / this.options.step

    this.loop.add(this.id, () => {
      this.t = (Date.now() - st) / (dur * 1000)
      
      this.drawCircle(this.t)

      if(this.t >= 1) this.loop.remove(this.id)
    })
  }

  drawCircle(t) {
    this.canvas.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
    this.canvas.context.beginPath()
    this.canvas.context.arc(this.circlePx, this.circlePy, this.circlePx - this.options.strokeWidth, 0, Math.PI * 2 * t)
    this.canvas.context.strokeStyle = this.options.strokeColor
    this.canvas.context.lineWidth = this.options.strokeWidth
    this.canvas.context.stroke()
  }
  
  updateCounter() {
    if(!this.out) return;

    const intervalCallback = () => {
      this.counter += this.options.step
      this.out.innerText = this.options.from + this.counter

      if (this.options.from + this.counter > this.options.to) {
        this.out.innerText = this.options.to
        clearInterval(this.interval)
      }
    }
    
    this.interval = setInterval(intervalCallback, this.options.delay * 1000)
    intervalCallback()
  }

  resize() {
    this.circlePx = this.container.offsetWidth / 2
    this.circlePy = this.container.offsetHeight / 2
  
    this.drawCircle(this.t)
  }
  
  run(entries) {
    if(entries[0].isIntersecting) {
      this.observer.unobserve(this.container)
      
      this.updateCounter()
      this.startDrawing()
    }
  }
}



document.querySelectorAll('[data-progress]').forEach(progress => new Progress(progress))
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 260vh;
}

[data-progress] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vmin;
  height: 50vmin;
}

[data-progress-out] {
  font-size: 10vmin;
}

[data-progress-canvas] {
  position: absolute;
  width: 100%;
  height: 100%;
}

[data-progress]:nth-child(1) {
  top: 30vh;
}

[data-progress]:nth-child(2) {
  top: 60vh;
}

[data-progress]:nth-child(3) {
  top: 90vh;
}
<div data-progress data-options="from = 0, to = 100, step = 1, delay = 0.05, strokeColor = tomato, strokeWidth = 2">
  <canvas data-progress-canvas></canvas>
  <div data-progress-out></div>
</div>
<div data-progress data-options="from = 0, to = 1000, step = 10, delay = 0.01, strokeColor = lightblue, strokeWidth = 6">
  <canvas data-progress-canvas></canvas>
  <div data-progress-out></div>
</div>
<div data-progress data-options="from = 50, to = 190, step = 3, delay = 0.1, strokeColor = lightgreen, strokeWidth = 12">
  <canvas data-progress-canvas></canvas>
  <div data-progress-out></div>
</div>

1
  • Где-то ошибка, круг "заканчивается" при 80%
    – De.Minov
    31 июл 2021 в 15:29

Ваш ответ

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

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