рд╢реБрдн рджрд┐рди, рджреЛрд╕реНрддреЛрдВ!рдЕрд╡рд▓реЛрдХрди
рдЗрдВрдЯрд░рд╕реЗрдХреНрд╢рди рдСрдмреНрдЬрд░реНрд╡рд░ рдПрдкреАрдЖрдИ (IOA) рдХрд┐рд╕реА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдЙрд╕рдХреЗ рдЕрднрд┐рднрд╛рд╡рдХ (рд░реВрдЯ) рдпрд╛ рд╡реНрдпреВрдкреЛрд░реНрдЯ (рд╡реНрдпреВрдкреЛрд░реНрдЯ) рдХреЗ рд╕рд╛рде рдПрдХ рддрддреНрд╡ (рд▓рдХреНрд╖реНрдп) рдХреЗ рдЪреМрд░рд╛рд╣реЗ рдХрд╛ рдирд┐рд░реАрдХреНрд╖рдг рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдпрд╣ рдПрдкреАрдЖрдИ рд╣рд░ рдмрд╛рд░ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХреЙрд▓ рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИ рдЬреЛ рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рд░реВрдЯ рдпрд╛ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдХреЗ рд╕рд╛рде рдЕрдВрддрд░ рдХрд░рддрд╛ рд╣реИредрдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдЙрджрд╛рд╣рд░рдг:- рдЫрд╡рд┐рдпреЛрдВ рдХрд╛ рдЖрд▓рд╕реА рдпрд╛ рдЖрд▓рд╕реА рд▓реЛрдбрд┐рдВрдЧ
- рдЕрдВрддрд╣реАрди рдкреГрд╖реНрда рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ
- рдЫрд╛рдкреЛрдВ рдХреА рд▓рд╛рдЧрдд рдХреА рдЧрдгрдирд╛ рдХреЗ рдЙрджреНрджреЗрд╢реНрдп рд╕реЗ рд╡рд┐рдЬреНрдЮрд╛рдкрди рдХреА рджреГрд╢реНрдпрддрд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛
- рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рджреГрд╖реНрдЯрд┐ рдХреНрд╖реЗрддреНрд░ рдореЗрдВ рдПрдХ рдкреНрд░рдХреНрд░рд┐рдпрд╛ рдпрд╛ рдПрдиреАрдореЗрд╢рди рд╢реБрд░реВ рдХрд░рдирд╛
IOA рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рджреЛ рдорд╛рдкрджрдВрдбреЛрдВ рдХреЗ рд╕рд╛рде рдПрдХ рдСрдмреНрдЬрд░реНрд╡рд░ рдСрдмреНрдЬреЗрдХреНрдЯ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдВрд╕реНрдЯреНрд░рдХреНрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ - рдПрдХ рдХреЙрд▓рдмреИрдХ рдлрд╝рдВрдХреНрд╢рди:
let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let callback = function(entries, observer){
...
}
let observer = new IntersectionObserver(callback, options)
рд╕рдорд╛рдпреЛрдЬрди:- рдЬрдбрд╝ - рдПрдХ рддрддреНрд╡ рдЬреЛ рд▓рдХреНрд╖реНрдп рдХреЗ рд▓рд┐рдП рд╡реНрдпреВрдкреЛрд░реНрдЯ рдХрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ (рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рдХрд╛ рдкреВрд░реНрд╡рдЬ рдпрд╛ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдХреЗ рд▓рд┐рдП рдЕрд╢рдХреНрдд)
- рд░реВрдЯрдорд╛рд░реНрдЬрд┐рди - рд░реВрдЯ рдХреЗ рдЖрд╕рдкрд╛рд╕ рдорд╛рд░реНрдЬрд┐рди (рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдорд╛рд░реНрдЬрд┐рди, рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рд╕рднреА рдорд╛рд░реНрдЬрд┐рди 0 рд╣реИрдВ)
- рджрд╣рд▓реАрдЬ - рдПрдХ рд╕рдВрдЦреНрдпрд╛ рдпрд╛ рд╕рдВрдЦреНрдпрд╛рдУрдВ рдХреА рдПрдХ рд╕рд░рдгреА рдЬреЛ рд▓рдХреНрд╖реНрдп рдФрд░ рдореВрд▓ рдХреЗ рдкреНрд░рддрд┐рдЪреНрдЫреЗрджрди рдХреЗ рд╕реНрд╡реАрдХрд╛рд░реНрдп рдкреНрд░рддрд┐рд╢рдд рдХреЛ рджрд░реНрд╢рд╛рддреА рд╣реИ
рдЕрдЧрд▓рд╛, рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ, рдЬрд┐рд╕реЗ рдкрд░реНрдпрд╡реЗрдХреНрд╖рдХ рджреЗрдЦрддрд╛ рд╣реИ:let target = document.querySelector('.list-item')
observer.observe(target)
рдХреЙрд▓рдмреИрдХ рдХреЙрд▓ рдПрдХ рд╡рд╕реНрддреБ рджреЗрддрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рдХреЗ рд╕рд╛рде рд╣реБрдП рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХреЗ рд░рд┐рдХреЙрд░реНрдб рд╣реЛрддреЗ рд╣реИрдВ:let callback = (entries, observer) => {
entries.forEach(entry => {
})
}
рдиреЗрдЯрд╡рд░реНрдХ рд╕рд┐рджреНрдзрд╛рдВрдд рдкрд░ рдЬрд╛рдирдХрд╛рд░реА рд╕реЗ рднрд░рд╛ рд╣реИ, рд▓реЗрдХрд┐рди IOA рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдЕрднреНрдпрд╛рд╕ рдкрд░ рдХрд╛рдлреА рд╕рд╛рдордЧреНрд░реА рд╣реИред рдореИрдВрдиреЗ рдЗрд╕ рдЕрдВрддрд░ рдХреЛ рдереЛрдбрд╝рд╛ рднрд░рдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛редрдЙрджрд╛рд╣рд░рдг
рдЖрд▓рд╕реА (рд╡рд┐рд▓рдВрдмрд┐рдд) рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛ рд░рд╣реА рд╣реИ
рдЯрд╛рд╕реНрдХ: рдЕрдкрд▓реЛрдб (рд╢реЛ) рдЫрд╡рд┐рдпреЛрдВ рдХреЗ рд░реВрдк рдореЗрдВ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреГрд╖реНрда рд╕реНрдХреНрд░реЙрд▓редрдХреЛрдб:
window.onload = () => {
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImg = entry.target
console.log(lazyImg)
lazyImg.style.background = 'deepskyblue'
observer.unobserve(lazyImg)
}
})
}, options)
const arr = document.querySelectorAll('img')
arr.forEach(i => {
observer.observe(i)
})
}
рдкрд░рд┐рдгрд╛рдо:
рд╡реНрдпреВрдкреЛрд░реНрдЯ рдХреЗ рдмрд╛рд╣рд░ рдХрдВрдЯреЗрдирд░ рдХреА рдкреГрд╖реНрдарднреВрдорд┐ рд╕рдлреЗрдж рд╣реИред
рдЬрдм рдЖрдк рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рдХреЛ рдЖрдзреЗ рд╕реЗ рдкрд╛рд░ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдкреГрд╖реНрдарднреВрдорд┐ рдЖрдХрд╛рд╢ рдиреАрд▓рд╛ рдореЗрдВ рдмрджрд▓ рдЬрд╛рддреА рд╣реИредтЖТ CodepenтЖТ GithubрдЫрд╡рд┐ рдкреНрд░рддрд┐рд╕реНрдерд╛рдкрди
рдХрд╛рд░реНрдп: рдЬрдм рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреГрд╖реНрда рдХреЛ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддрд╛ рд╣реИ рддреЛ рдкреНрд▓реЗрд╕рд╣реЛрд▓реНрдбрд░ рдЫрд╡рд┐ рдХреЛ рдореВрд▓ рдореЗрдВ рдмрджрд▓ рджреЗрддрд╛ рд╣реИредрдХреЛрдб:window.onload = () => {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log(entry)
entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
}, { threshold: 0.5 })
document.querySelectorAll('img').forEach(img => observer.observe(img))
}
рдкрд░рд┐рдгрд╛рдо:
рдкрд╣рд▓реА рдЫрд╡рд┐ рдЕрдкрд▓реЛрдб рдХреА рдЧрдИ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рдореЗрдВ рд╣реИред рджреВрд╕рд░рд╛ рдкреНрд▓реЗрд╕рд╣реЛрд▓реНрдбрд░ рд╣реИред
рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдЖрдЧреЗ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддреЗ рд╣реИрдВ, рдкреНрд▓реЗрд╕рд╣реЛрд▓реНрдбрд░ рдХреЛ рдореВрд▓ рдЫрд╡рд┐ рд╕реЗ рдмрджрд▓ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИредтЖТ CodepenтЖТ GithubрдХрдВрдЯреЗрдирд░ рдкреГрд╖реНрдарднреВрдорд┐ рдмрджрд▓реЗрдВ
рдХрд╛рд░реНрдп: рдХрдВрдЯреЗрдирд░ рдХреА рдкреГрд╖реНрдарднреВрдорд┐ рдХреЛ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдЬрдм рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреГрд╖реНрда рдХреЛ рд╡рд╣рд╛рдВ рдФрд░ рдкреАрдЫреЗ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддрд╛ рд╣реИредрдХреЛрдб:window.addEventListener('load', event => {
let box = document.querySelector('div')
let prevRatio = 0.0
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
let curRatio = entry.intersectionRatio
curRatio > prevRatio ? entry.target.style.background = `rgba(40,40,190,${curRatio})` : entry.target.style.background = `rgba(190,40,40,${curRatio})`
prevRatio = curRatio
})
}, {
threshold: buildThresholdList()
})
observer.observe(box)
function buildThresholdList() {
let thresholds = []
let steps = 20
for (let i = 1.0; i <= steps; i++) {
let ratio = i / steps
thresholds.push(ratio)
}
return thresholds
}
})
рдкрд░рд┐рдгрд╛рдо:
рдХрдВрдЯреЗрдирд░ рдХреА рдкреГрд╖реНрдарднреВрдорд┐ рд╣рд▓реНрдХреА рдиреАрд▓реА рд╕реЗ ...
рдиреАрд▓реА рд╕реЗ ...
рд╣рд▓реНрдХреА рд▓рд╛рд▓ рд╕реЗ рдмрджрд▓ рдЬрд╛рддреА рд╣реИредтЖТ CodepenтЖТ Githubрд╡реАрдбрд┐рдпреЛ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░реЗрдВ
рдХрд╛рд░реНрдп: рдЪрд▓ рд░рд╣реЗ рд╡реАрдбрд┐рдпреЛ рдХреЛ рд░реЛрдХреЗрдВ рдФрд░ рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рдореЗрдВ рдЧрд┐рд░рдиреЗ рд╡рд╛рд▓реЗ рд╡реАрдбрд┐рдпреЛ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ рд╢реБрд░реВ рдХрд░реЗрдВредрдХреЛрдб:window.onload = () => {
let video = document.querySelector('video')
let observer = new IntersectionObserver(() => {
if (!video.paused) {
video.pause()
} else if(video.currentTime != 0) {
video.play()
}
}, { threshold: 0.4 })
observer.observe(video)
}
рдкрд░рд┐рдгрд╛рдо:
рд╡реАрдбрд┐рдпреЛ рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рдореЗрдВ рд╣реИ, рдпрд╣ рдЦреЗрд▓рддрд╛ рд╣реИред
рдЬреИрд╕реЗ рд╣реА рд╡реАрдбрд┐рдпреЛ 40% рд╕реЗ рдЕрдзрд┐рдХ рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рд╕реЗ рдкрд░реЗ рдЪрд▓рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рдХрд╛ рдкреНрд▓реЗрдмреИрдХ рд░реБрдХ рдЬрд╛рддрд╛ рд╣реИред рдпрджрд┐ рдЖрдк рджреГрд╢реНрдп рдХреНрд╖реЗрддреНрд░> рд╡реАрдбрд┐рдпреЛ рдХрд╛ 40% рд╣рд┐рдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕рдХрд╛ рдкреНрд▓реЗрдмреИрдХ рдлрд┐рд░ рд╕реЗ рд╢реБрд░реВ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИредтЖТ CodepenтЖТ GithubрдкреГрд╖реНрда рджреЗрдЦреЗрдВ рдкреНрд░рдЧрддрд┐
рдХрд╛рд░реНрдп: рдкреГрд╖реНрда рдХреЛ рджреЗрдЦрдиреЗ рдХреА рдкреНрд░рдЧрддрд┐ рджрд┐рдЦрд╛рддреЗ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреГрд╖реНрда рдХреЛ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддрд╛ рд╣реИредрдХреЛрдб:
let p = document.querySelector('p')
let n = 0
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting){
p.textContent = `${n++} div viewed`
observer.unobserve(entry.target)
}
})
}, {threshold: 0.9})
document.querySelectorAll('div').forEach(div => observer.observe(div))
рдкрд░рд┐рдгрд╛рдо:
рдкреГрд╖реНрда рдЕрднреА рд▓реЛрдб рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рд╣рдордиреЗ рдЕрднреА рддрдХ рдХрд┐рд╕реА рднреА рдХрдВрдЯреЗрдирд░ рдХреЛ рдирд╣реАрдВ рджреЗрдЦрд╛ рд╣реИред
рдЬрдм рдкреГрд╖реНрда рдХреЗ рдЕрдВрдд рддрдХ рдкрд╣реБрдБрдЪ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдкреИрд░рд╛рдЧреНрд░рд╛рдл 4 divs рджреЗрдЦрдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИредтЖТ CodepenтЖТ GithubрдЕрдВрддрд╣реАрди рд╕реНрдХреЙрд▓рд┐рдВрдЧ
рдХрд╛рд░реНрдп: рдПрдХ рдЕрдВрддрд╣реАрди рд╕реВрдЪреА рдХреЛ рд▓рд╛рдЧреВ рдХрд░реЗрдВредрдХреЛрдб:let ul = document.querySelector('ul')
let n = 1
function createLi(){
li = document.createElement('li')
li.innerHTML = `${++n} item`
ul.append(li)
}
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
createLi()
}
observer.unobserve(entry.target)
observer.observe(document.querySelector('li:last-child'))
})
}, {
threshold: 1
})
observer.observe(document.querySelector('li'))
рдкрд░рд┐рдгрд╛рдо:
рд╣рдорд╛рд░реЗ рдкрд╛рд╕ 12 рд╕реВрдЪреА рдЖрдЗрдЯрдо рд╣реИрдВред рдЕрдВрддрд┐рдо рдЖрдЗрдЯрдо рд╡реНрдпреВрдкреЛрд░реНрдЯ рдХреЗ рдмрд╛рд╣рд░ рд╣реИред
рдЬрдм рдЖрдк рдЕрдВрддрд┐рдо рддрддреНрд╡ рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдПрдХ рдирдпрд╛ (рдЕрдВрддрд┐рдо) рддрддреНрд╡ рдмрдирд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬреЛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╕реЗ рдЫрд┐рдкрд╛ рд╣реЛрддрд╛ рд╣реИред рдФрд░ рдЗрд╕рд▓рд┐рдП рдЕрдирдВрдд рддрдХредтЖТ CodepenтЖТ Githubрдорд╛рддрд╛-рдкрд┐рддрд╛ рдХрд╛ рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдкрд░ рдПрдХ рдмрдЪреНрдЪреЗ рдХрд╛ рдЖрдХрд╛рд░ рдмрджрд▓рдирд╛
рдХрд╛рд░реНрдп: рджреВрд╕рд░реЗ рдкрд░ рдПрдХ рддрддреНрд╡ рдХреЗ рдЖрдХрд╛рд░ рдХреА рдирд┐рд░реНрднрд░рддрд╛ рд╕реНрдерд╛рдкрд┐рдд рдХрд░реЗрдВредрдХреЛрдб:
let info = document.querySelector('.info')
let parent = document.querySelector('.parent')
let child = document.querySelector('.child')
child.style.width = parent.offsetWidth - 50 + 'px'
info.textContent = `child width: ${child.offsetWidth}px`
let options = {
root: parent,
threshold: 1
}
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if ((entry.target.parentElement.offsetWidth - entry.target.offsetWidth) < 50) {
entry.target.style.width = entry.target.offsetWidth - 50 + 'px'
}
})
}, options)
observer.observe(child)
window.addEventListener('resize', () => {
info.textContent = `child width: ${child.offsetWidth}px`
if ((parent.offsetWidth - child.offsetWidth) > 51) {
child.style.width = child.offsetWidth + 50 + 'px'
}
})
рдкрд░рд┐рдгрд╛рдо:
рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдЕрд╡рд╕реНрдерд╛ред
рдореВрд▓ рддрддреНрд╡ рдХреА рдЪреМрдбрд╝рд╛рдИ рдХрдо рдХрд░рддреЗ рд╕рдордп, рдмрд╛рд▓ рддрддреНрд╡ рдХреА рдЪреМрдбрд╝рд╛рдИ рдХрдо рд╣реЛ рдЬрд╛рддреА рд╣реИред рдЗрд╕реА рд╕рдордп, рдЙрдирдХреЗ рдмреАрдЪ рдХреА рджреВрд░реА рд▓рдЧрднрдЧ рд╣рдореЗрд╢рд╛ 50px ("рд▓рдЧрднрдЧ" рдЙрд▓рдЯрд╛ рддрдВрддреНрд░ рдХреЗ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреЗ рдХрд╛рд░рдг) рдХреЗ рдмрд░рд╛рдмрд░ рд╣реЛрддреА рд╣реИредтЖТ CodepenтЖТ GithubрдПрдиреАрдореЗрд╢рди рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░реЗрдВ
рдХрд╛рд░реНрдп: рджрд┐рдЦрд╛рдИ рджреЗрдиреЗ рдкрд░ рдХрд┐рд╕реА рд╡рд╕реНрддреБ рдХреЛ рдЪреЗрддрди рдХрд░рдирд╛редрдХреЛрдб:
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
entry.isIntersecting ? entry.target.classList.replace('to-left', 'to-right') : entry.target.classList.replace('to-right', 'to-left')
})
}, {
threshold: .5
})
observer.observe(document.querySelector('img'))
рдкрд░рд┐рдгрд╛рдо:
рд╣рдо рдмрд╛рд░реНрдЯ рдХреЗ рд╕рд┐рд░ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рджреЗрдЦрддреЗ рд╣реИрдВред рдмрд╛рд░реНрдЯ рджреЗрдЦрдиреЗ рдХреЗ рдХреНрд╖реЗрддреНрд░ рдХреЗ рдмрд╛рдИрдВ рдУрд░ рджрдмрд╛рдпрд╛ рдЧрдпрд╛ред
рдпрджрд┐ рдмрд╛рд░реНрдЯ рдХрд╛ 50% рд╕реЗ рдЕрдзрд┐рдХ рджреГрд╢реНрдп рдХреНрд╖реЗрддреНрд░ рдореЗрдВ рдЧрд┐рд░рддрд╛ рд╣реИ, рддреЛ рд╡рд╣ рдордзреНрдп рдореЗрдВ рдЪрд▓рд╛ рдЬрд╛рддрд╛ рд╣реИред рдЬрдм рдмрд╛рд░реНрдЯ рдХрд╛ 50% рд╕реЗ рдЕрдзрд┐рдХ рджреЗрдЦрдиреЗ рдХрд╛ рдХреНрд╖реЗрддреНрд░ рдЫреЛрдбрд╝ рджреЗрддрд╛ рд╣реИ, рддреЛ рдпрд╣ рдЕрдкрдиреА рдкреНрд░рд╛рд░рдВрднрд┐рдХ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд▓реМрдЯ рдЖрддрд╛ рд╣реИредтЖТ CodepenтЖТ GithubрдЖрдкрдХрд╛ рдзреНрдпрд╛рди рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред