Contents
- 1 イベント
- 1.1 ◆<div class=’scroll’>内に「テキスト」を1000回自動で複製（スラスラp.302）
- 1.2 ◆スクロールすると上に戻るボタンを表示する（スラスラp.340）
- 1.3 ◆<a>クリック時に確認ダイアログを表示し、キャンセルの場合はページ遷移を中止する（スラスラp.308）
- 1.4 ◆チェックボタンと連動してボタンを有効化する（Mana入門p.122）
- 1.5 ◆ページのスクロール量の表示（Mana入門p.142）
- 1.6 ◆JavaScriptでHTMLを操作して画像を表示する（Mana入門p.170）
- 1.7 ◆JavaScriptでHTMLを操作して画像を表示する（Mana入門p.233-239）
- 1.8 ◆画像ギャラリー／カーソルを合わせたときに大きく表示（Mana入門p.284-291）
- 1.9 ◆contain()メソッドの条件でクラス名の付与・削除（コードレシピ集p.388-389）
- 1.10 ◆スクロール連動で拡大縮小するメイン画像（FA EXHIBITION）
- 1.11 ◆サイドボタン表示（FA EXHIBITION）
- 1.12 ◆スクロール連動で背景表示（FA EXHIBITION）
イベント
◆<div class=’scroll’>内に「テキスト」を1000回自動で複製（スラスラp.302）
const scroll = document.querySelector('.scroll');
for (let i = 0; i < 1000; i++) {
scroll.textcontent += ` テキスト ${i} `);
};
◆スクロールすると上に戻るボタンを表示する（スラスラp.340）
<button type="button" class="moveToTop">上に戻る</button>
const button = document.querySelector('.moveToTop');
window.addEventListener('scroll', function() {
if (windw.scrollY >= 200)) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
});
button.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
});
◆<a>クリック時に確認ダイアログを表示し、キャンセルの場合はページ遷移を中止する（スラスラp.308）
function confirmLink(event) {
if (confirm('ページ遷移しますか')) {
console.log('実行しました');
} else {
event.preventDefault();
console.log('キャンセルしました');
}
}
const Link = document.querySelector('a');
Link.addEventListener('click', confirmLink);
◆チェックボタンと連動してボタンを有効化する（Mana入門p.122）
<label><inpt type="checkbox" id="check">利用規約に同意する</input></label>
<inpt type="submit" id="btn" value="送信する" disabled>
#btn:disabled { background: #ccc;}
const Link = document.querySelector('#check');
const Link = document.querySelector('#btn');
isAgreed.addEventListener('check', () => {
if (isAgreed.checked)) {
btn.disabled = false;
} else {
btn.disabled = true;
}
});
（■省略形）
isAgreed.addEventListener('check', () => {
btn.disabled = isAgreed.checked;
});
◆ページのスクロール量の表示（Mana入門p.142）
<div id="bar"></div>
#bar { background: #ccc;
position: fixed;
top: 0;
left: 0;
height: 5px;
}
const getScrollPercent = () => {
const scrolled = windw.scrollY;
const pageHeight = document.documentElement.scrollHeight;
const viewHeight = document.documentElement.clientHeight;
const parcentage = scrolled / (pageHeight - viewHeight) * 100;
document.querySelector('#bar').style.width = `${parcentage}%`;
}
window.addEventListener('scroll', getScrollPercent);
◆JavaScriptでHTMLを操作して画像を表示する（Mana入門p.170）
<div id="menu"></div>
#menu { display: glid;
gap: 30px;
grid-template-colums: repeat(auto-fit, mimmax(300px, 1fr));
max-width: 1020px;
}
■配列形式
const mrnu = document.querySelector('#menu');
const lists = [
'strawberry.jpg',
'lime.jpg',
'lemon.jpg',
];
for (let i = 0; i < lists.length; i++) {
const content = `<div><img src="images/${list[i]}" alt=""></div>`;
menu.insertAdjacentHTML('beforeend', content)
}
◆JavaScriptでHTMLを操作して画像を表示する（Mana入門p.233-239）
■すべての「.item-img」要素に適用する例
const itetms = document.querySelectorAll('.img-item');
for (let i = 0; i < items.length; i++) {
const keyframes = {
opasity: [0, 1]
};
const options = {
duration: 600,
fill: 'forwards',
};
items[i].animate(keyframes, options);
}
■すべての「.item-img」要素に適用して1つずつ遅延させる例
const itetms = document.querySelectorAll('.img-item');
for (let i = 0; i < items.length; i++) {
const keyframes = {
opasity: [0, 1]
};
const options = {
duration: 600,
delay: i * 300,
fill: 'forwards',
};
items[i].animate(keyframes, options);
}
■要素が下から浮かび上がり、1つずつ遅延させる例
const itetms = document.querySelectorAll('.img-item');
for (let i = 0; i < items.length; i++) {
const keyframes = {
opasity: [0, 1],
translate: ['0 50px', 0],
};
const options = {
duration: 600,
delay: i * 300,
fill: 'forwards',
};
items[i].animate(keyframes, options);
}
■ぼかしがなくなりくっきり表示され、1つずつ遅延させる例
const itetms = document.querySelectorAll('.img-item');
for (let i = 0; i < items.length; i++) {
const keyframes = {
filter: ['blur(20px)', 'blur(0)'],
};
const options = {
duration: 600,
delay: i * 300,
fill: 'forwards',
};
items[i].animate(keyframes, options);
}
◆画像ギャラリー／カーソルを合わせたときに大きく表示（Mana入門p.284-291）
<div class="gallery-image"><img src="images/img1.jpg" alt=""></div>
<ul><li><img src="images/img1.jpg" alt="">
<img src="images/img2.jpg" alt="">
<img src="images/img3.jpg" alt=""></li>
■for + .lengthを使用した例
const mainImage = document.querySelector('.gallery-image img');
const thombImages = document.querySelectorAll('.gallery-thumbnails img');
for (let i = 0; i < thombImages.length; i++) {
thombImages[i].addEventListener('mouseover', (event) => {
mainImage.src = event.target.src;
mainImage.animate({ opacity: [0, 1] }, 500);
});
}
■forEachを使用した例
const mainImage = document.querySelector('.gallery-image img');
const thombImages = document.querySelectorAll('.gallery-thumbnails img');
thombImages.forEach((thombImage) => {
thombImage.addEventListener('mouseover', (event) => {
mainImage.src = event.target.src;
mainImage.animate({ opacity: [0, 1] }, 500);
});
}):
■ページの背景画像に表示
const images = document.querySelectorAll('.gallery img');
const body = document.body;
images.forEach((image) => {
image.addEventListener('mouseover', (event) => {
body.style.backgroundImage = `url(${event.target.src})`;
});
});
◆contain()メソッドの条件でクラス名の付与・削除（コードレシピ集p.388-389）
const button = document.querySelector('button');
button.addEventListener('click', handleClick);
function handleClick() {
const element = document.querySelector('.target');
if (element.classList.contains('state-show') === false) {
element.classList.add('state-show');
} else {
element.classList.remove('state-show');
};
};
◆スクロール連動で拡大縮小するメイン画像（FA EXHIBITION）
const mainImgs = document.querySelectorAll('#mainvisual img');
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const windowWidth = document.documentElement.clientWidth;
if (windowWidth > 900) {
mainImgs.forEach((mainImg) => {
mainImg.style.width = `calc(100% / 3 + ${scrolled}% / 10)`;
});
} else {
mainImgs.forEach((mainImg) => {
mainImg.style.width = `calc(100% - ${scrolled}% / 10)`;
});
};
});
◆サイドボタン表示（FA EXHIBITION）
const gallery = document.querySelector('#gallery');
const sideBtn = document.querySelector('#side-btn');
const sideBtnDisp = (entry) => {
if (entry[0].isIntersecting) {
sideBtn.style.transform = 'rotate(-90deg) translateY(0)';
} else {
sideBtn.style.transform = 'rotate(-90deg) translateY(60px)';
}
}
const sideOptions = {
root: null,
rootMargin: '5% 0px',
threshold: 0,
}
const sideObserver = new IntersectionObserver(sideBtnDisp, sideOptions);
sideObserver.observe(gallery);
◆スクロール連動で背景表示（FA EXHIBITION）
const access = document.querySelector('#access');
const bg = document.querySelector('.bg');
const bgDisp = (entry, obs) => {
if (entry[0].isIntersecting) {
bg.animate({
visibility: 'visible',
opacity: [0, 1],
}, {
duration: 500,
fill: 'forwards',
});
} else {
bg.animate({
visibility: 'hidden',
opacity: [1, 0],
}, {
duration: 500,
fill: 'forwards',
});
}
}
const bgObserver = new IntersectionObserver(bgDisp);
bgObserver.observe(access);
// CONTACTで非表示
const contact = document.querySelector('#contact');
const bgDispCon = (entryy) => {
if (entryy[0].isIntersecting) {
bg.animate({
visibility: 'hidden',
opacity: [1, 0],
}, {
duration: 500,
fill: 'forwards',
});
}
}
const bgObserverNext = new IntersectionObserver(bgDispCon);
bgObserverNext.observe(contact);