質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2501閲覧

アニメーションdelighters.jsを使うと画面が横にスクロールしてしまう

babubabu

総合スコア6

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/10/14 02:42

困っていること

以下のgif動画のように、
delighters.jsを使うと画面が横にスクロールしてしまう
イメージ説明

やりたいこと

横スクロールしないようにしたい
詳しい方、ご教授頂けると幸いです。

###ソース

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8<body> 9<style> 10.anim{ 11 height: 240px; 12 background: red; 13} 14.anim:nth-child(odd){ 15 background: yellow; 16} 17.animL.delighter { 18 transition: all .5s ease-out; 19 transform: translateX(-100%); 20 opacity: 0; 21} 22.animL.started { 23 transform: none; 24 opacity: 1; 25} 26.animR.delighter { 27 transition: all .5s ease-out; 28 transform: translateX(100%); 29 opacity: 0; 30} 31.animR.started { 32 transform: none; 33 opacity: 1; 34} 35</style> 36 37<div class="anim"> 38 39</div> 40 41<div class="anim animL"> 42 <p>アニメなし</p> 43</div> 44<div class="anim animL"> 45 <p>アニメなし</p> 46</div> 47<div class="anim animL"> 48 <p>アニメなし</p> 49</div> 50<div class="anim animL"> 51 <p>アニメなし</p> 52</div> 53<div class="anim animL"> 54 <p>アニメなし</p> 55</div> 56<div class="anim animL"> 57 <p>アニメなし</p> 58</div> 59<div class="anim animL"> 60 <p>アニメなし</p> 61</div> 62<div class="anim animL"> 63 <p>アニメなし</p> 64</div> 65 66<div class="anim animL" data-delighter> 67 <p>animL</p> 68</div> 69<div class="anim animR" data-delighter> 70 <p>animR</p> 71</div> 72 73<script type='text/javascript' src='delighters.js'></script> 74</body> 75 76</html> 77

コードペン

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

htmlは全体をwrapにする。

html

1<!DOCTYPE html> 2 3<div class="wrap"> 4<html lang="ja"> 5 <head> 6 <meta charset="utf-8"> 7 <title></title> 8 </head> 9 10<body> 11 12<div class="anim"> 13 14</div> 15 16 17<div class="anim animL"> 18 <p>アニメなし</p> 19</div> 20<div class="anim animL"> 21 <p>アニメなし</p> 22</div> 23<div class="anim animL"> 24 <p>アニメなし</p> 25</div> 26 27<div class="anim animL" data-delighter> 28 <p>animL</p> 29</div> 30<div class="anim animR" data-delighter> 31 <p>animR</p> 32</div> 33 34<script type='text/javascript' src='delighters.js'></script> 35 <!-- /.wrap --></div> 36</body> 37 38</html>

cssは
.wrap {
overflow: hidden;
}
をつけるだけ!!

css

1.wrap { 2 overflow: hidden; 3} 4 5.anim{ 6 height: 240px; 7 background: red; 8} 9.anim:nth-child(odd){ 10 background: yellow; 11} 12.animL.delighter { 13 transition: all .5s ease-out; 14 transform: translateX(-100%); 15 opacity: 0; 16} 17.animL.started { 18 transform: none; 19 opacity: 1; 20} 21.animR.delighter { 22 transition: all .5s ease-out; 23 transform: translateX(100%); 24 opacity: 0; 25} 26.animR.started { 27 transform: none; 28 opacity: 1; 29}

でいいと思いますよ。

投稿2019/10/18 06:16

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

babubabu

2019/10/19 02:51

デモでは解決しましたが、 実際に問題となっているソースで試しましたが、ダメでした。。 そのソースでまた問題箇所がどこにあるのか確認してみます アニメーションするコンテンツに横幅の設定をしている事も関係しているかもしれません。 もう少し、試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問