お世話になります。
現在作成しているwebサイトで困ったことが起きましたので、
ご助力いただけますと幸いです。
前提・実現したいこと
二分割レイアウトのwebサイトで、右側のみスクロールしたい。
右側をスクロールした時に、アニメーションで要素がふわっと表示させるようにしたい。
使用しているもの
二分割レイアウトは以下のサイトのソースを利用させていただいています。
https://webdesign-trends.net/entry/2325
スクロールでふわっと表示するアニメーションは以下のサイトを利用させていただいています。
http://michalsnik.github.io/aos/
発生している問題
<div class="split-box right-box"></div>の中で画像などを配置し、 アニメーションを適用したい箇所を<div data-aos="fade-up"></div>でくくるのですが、 非表示のままになります。クリックはできますが、アニメーションしながら表示されてきません。該当のソースコード
html
1<!doctype html> 2<html lang="jp"> 3<head> 4<link href="css/style.css" rel="stylesheet" type="text/css" /> 5<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet"> 6</head> 7 8<body> 9 <div class="split-box left-box"> 10 <!--左側の記述--> 11 </div> 12 13<div class="split-box right-box"> 14<!--割愛--> 15<div id="sample"> 16<h2>SAMPLE</h2> 17 <div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/04/"><img src="images/sample_img5.jpg" alt=""></a></div> 18 <div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/03/"><img src="images/sample_img4.jpg" alt=""/></a></div> 19 <div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/02/"><img src="images/sample_img3.jpg" alt=""/></a></div> 20 <div class="more_box"><a href="/portfolio/works/"><div id="more">more</div></a></div> 21 <div class="clear"></div> 22</div> 23 24<!--割愛--> 25 26<!--右側の記述--> 27</div> 28 29 30<!--js--> 31<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 32<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> 33<script> 34 AOS.init(); 35</script> 36 37</body> 38</html>
試したこと
1.ブラウザをマウスカーソルで掴んで手動で拡大させると表示がされました。
2.デベロッパーツールなどで下記のorverflow-y: scroll;を外してみると、スクロールで動作します。
css
1.right-box { 2 background-color: #fff; 3 color: #666; 4 right: 0; 5 overflow-y: scroll; 6}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。