Enjoy Creating
Web & Mobile Apps
MENU BOX
Webで
遊ぼ！
OPEN
2021・05・19
＊スクロールして画面内にコンテンツが含まれたら、スライドして現れる機能です＊
コンテンツまでのスクロール量と、画面（あるいはスクロール可能なボックス内）のスクロール量を取得し、それらの量を比べることでコンテンツのCSS変更タイミングを調整しています。
使用機能：CSS・JavaScript
下にスクロールさせてください！
| 右からスライド |
| テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト |
| 左からスライド |
| テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト |
| 右からスライド |
| テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト |
| 左からスライド |
| テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト |
| 右からスライド |
| テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト |
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.samplesotobox {
font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
height: 60vh;
overflow-y: scroll;
padding-top: 100px;
}
.takasachousei {
height: 150px;
text-align: center;
background-color: darkblue;
color: white;
padding-top: 40px;
}
.samplenakabox {
width: 80vw;
padding-bottom: 80px;
margin: 0 auto;
background-color: rgb(210, 225, 228);
}
.newsbox {
border-collapse: collapse;
border: solid thin;
width: 60%;
margin: 80px auto;
}
.newsbox tr {
background-color: white;
}
.newsbox tr:first-child {
border-bottom: solid thin;
background-color: rgb(145, 212, 223);
}
td {
padding: 1rem;
}
.newsboxfromr {
opacity: 0;
position: relative;
right: -30%;
transition: all 1.2s;
}
.newsboxfroml {
opacity: 0;
position: relative;
left: -30%;
transition: all 1.2s;
}
</style>
</head>
<body>
<div class="samplesotobox">
<div class="samplenakabox">
<div class="takasachousei">
<p>下にスクロールさせてください！</p>
</div>
<table class="newsbox newsboxfromr">
<tbody>
<tr>
<td>右からスライド</td>
</tr>
<tr>
<td>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
<br>テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
<table class="newsbox newsboxfroml">
<tbody>
<tr>
<td>左からスライド</td>
</tr>
<tr>
<td>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
<br>テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
<table class="newsbox newsboxfromr">
<tbody>
<tr>
<td>右からスライド</td>
</tr>
<tr>
<td>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
<br>テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
<table class="newsbox newsboxfroml">
<tbody>
<tr>
<td>左からスライド</td>
</tr>
<tr>
<td>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
<br>テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
<table class="newsbox newsboxfromr">
<tbody>
<tr>
<td>右からスライド</td>
</tr>
<tr>
<td>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
<br>テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
{
const samplesotobox = document.querySelector('.samplesotobox');
const samplenakabox = document.querySelector('.samplenakabox');
const slidertl = document.querySelectorAll('.newsboxfromr');
const slideltr = document.querySelectorAll('.newsboxfroml');
let boxheight = window.innerHeight;
samplesotobox.addEventListener('scroll',function (event) {
for (const sliderighttoleft of slidertl) {
let scrollnum = samplesotobox.scrollTop;
let isInView = sliderighttoleft.getBoundingClientRect().top + scrollnum;
if (scrollnum > isInView - boxheight + 400 ) {
sliderighttoleft.style.opacity = '1';
sliderighttoleft.style.right = '0';
};
};
for (const slidelefttoright of slideltr) {
let scrollnum = samplesotobox.scrollTop;
let isInView = slidelefttoright.getBoundingClientRect().top + scrollnum;
if (scrollnum > isInView - boxheight + 400 ) {
slidelefttoright.style.opacity = '1';
slidelefttoright.style.left = '0';
};
};
});
}
</script>
</body>
</html>