デモサイトのコーディングをしていまして、試しにサイトにアップしてみたところiPhone(safari , chrome)の一部のアニメーションが動きませんでした。Androidoは動作確認できました。
丸一日調べてみたのですが、解決に至らなかったのでこちらで質問させていただきました。
動作としては、jsで画面領域に対象の要素が入ったら activeを付与し、要素が左右から出てくるというごく一般的なアニメーションになります。
以下に動作NGの一部のソースコードを載せますので、わかるかた教えていただけないでしょうか?
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> <link rel="stylesheet" href="css.css"> </head> <body> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <div class="area"> <div class="slide online"> <div class="wrap"> <img src="https://code-step.com/demo/html/lp/img/icon-pc.png" alt=""> <div class="text-area"> <p>オンライン対応</p> <p>24時間いつでも受講できる!</p> </div> </div> </div> <div class="slide teacher"> <div class="wrap"> <img src="https://code-step.com/demo/html/lp/img/icon-teacher.png" alt=""> <div class="text-area"> <p>講師はネイティブ</p> <p>お気に入りの講師が自由に 選べる!</p> </div> </div> </div> </div> <script src="java.js"></script> </body> </html>
css
* { margin: 0; padding: 0; } .area { background: blue; width: 100%; height: 360px; position: relative; overflow: hidden; } .slide { display: flex; justify-content: space-between; align-items: center; background: white; height: 120px; position: absolute; padding: 20px; box-sizing: border-box; } .wrap { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .online { top: 40px; right: 16px; left: 0; border-radius: 0 20px 20px 0; } .teacher { top: 200px; right: 0; left: 16px; border-radius: 20px 0 0 20px; } .online > .wrap > img { width: 87px; height: 60px; margin-right: 40px; } .teacher > .wrap > img { width: 50px; height: 60px; margin-right: 40px; } .text-area p:first-of-type{ font-size: 24px; color: #FF2A2A; font-weight: bold; letter-spacing: 0.1em; } .text-area p:last-of-type { font-size: 18px; letter-spacing: 0.1em; line-height: 1.6; } .slide.online { opacity: 0; -webkit-transform: translateX(-90%); transform: translateX(-90%); } .slide.online.active { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition: 0.5s; -webkit-transition: 0.5s; } .slide.teacher { opacity: 0; -webkit-transform: translateX(90%); transform: translateX(90%); } .slide.teacher.active { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition: 0.5s; -webkit-transition: 0.5s; }
javascript
'use strict'; { const online = document.querySelector('.slide.online'); const teacher = document.querySelector('.slide.teacher'); const options = { rootMargin: '0px', threshold: 0.1, }; const setItemActive = (entries) => { entries.forEach((entry) => { // console.log(entries); if (entry.isIntersecting === true) { console.log(entry); entry.target.classList.add('active'); } }); }; const observer = new IntersectionObserver(setItemActive, options); observer.observe(online); observer.observe(teacher); }
まだ回答がついていません
会員登録して回答してみよう