最終学歴で勝負しませんか
～ふつうの子を難関大学へ～
最終学歴で
勝負しませんか
ふつうの子を
難関大学へ
ペリパトス 赤羽教室
〒115-0045
東京都北区赤羽２－１７－７
プライム赤羽３F
<!–
2024年 4月開校
少人数制進学塾
ペリパトス
–>
const doObserve = (element) => {
const targets = document.querySelectorAll(‘.typeWriter’); /* ターゲットの指定 */
const options = {
root: null,
rootMargin: ‘0px’,
threshold: 0
};
const observer = new IntersectionObserver((items) => {
items.forEach((item) => {
if (item.isIntersecting) {
const typeWriter = selector => {
const el = document.querySelector(selector);
const text = el.innerHTML;
(function _type(i = 0) {
if (i === text.length) return;
el.innerHTML = text.substring(0, i + 1) + ‘
‘;
setTimeout(() => _type(i + 1), 150);
})();
};
typeWriter(“.typeWriter”);
} else {
item.target.classList.remove(‘typing’); /* 表示域から外れた時にターゲットから削除するclassの指定 */
}
});
}, options);
Array.from(targets).forEach((target) => {
observer.observe(target);
});
};
doObserve(‘.observe_target’);
p.textTitle {
text-align: center;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.08rem;
margin-bottom: 0;
}
.typeWriter {
font-size: 1.2rem;
color: #313131;
text-align: center;
margin: 0 !important;
min-height: 120px;
}
.typeWriter > span {
border-right: 2px solid;
animation: caret 1s steps(1) infinite;
}
@keyframes caret {
50% {
border-color: transparent;
}
}
document.addEventListener(“DOMContentLoaded”, () => {
const content = document.getElementById(“content”);
const fixHeader = document.getElementById(“fix_header”);
content.style.zIndex = 101;
fixHeader.style.opacity = 0;
setTimeout(function () {
document.getElementById(“content”).style.zIndex = 1;
content.style.zIndex = 1;
fixHeader.style.opacity = 1;
}, 1500);
});
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100vw;
height: 100vh;
background-color: #fff;
display: flex !important;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2s forwards;
}
.loading img {
opacity: 0;
animation: logo_fade 1.5s 0.3s forwards;
width: 250px; /* ロゴのサイズを指定（パソコン） */
}
@media screen and (max-width: 959px) {
.loading img {
width: 200px; /* ロゴのサイズを指定（スマホ） */
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}
peripatos 