Задача заключаеться в том, чтоб когда пользователь доскролил до данного блока то border, он как загрузка закрашиваеться, а цифры от нуля перебираються до нужного значения
-
не смог найти адекватное решение, если знаешь ссылку пришли– IGOR BEZRUKAVNIK6 июн 2021 в 16:26
-
Вот статья с использованием плагина smartlanding.biz/animaciya-chisel.html– Alexandr6 июн 2021 в 16:29
-
а как сделать круг?– IGOR BEZRUKAVNIK6 июн 2021 в 16:50
-
В поисковик "border progress bar js". А потом вставляешь его туда же, где выполняется код с цифрами.– Alexandr6 июн 2021 в 21:13
Добавить комментарий
|
1 ответ
В скрипт можно не смотреть, все существующие настройки указаны в атрибуте 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>