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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

3441閲覧

webサイトにScrollRevealを適用したいがうまくいかない。表示されない。

tenlife

総合スコア70

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/06/20 03:29

編集2020/06/20 23:19

ScrollRevealを利用してスクロール時に動きをつけたいと思っています。
https://scrollrevealjs.org/

しかし現状動きはなく、opacityが0になってしまっていて画面から見えなくなってしまいます。
位置などもみてみると、動く前の状態で止まってしまっているように思えます。

参考にしたサイト
https://liginc.co.jp/500530
https://scrollrevealjs.org/

headの中身はほとんどbootstrapのスターターです。
jsファイルは正しく読み込まれています。console.log('test')は表示できました。

<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- Style CSS --> <link rel="stylesheet" href="css/style.css"> <title>test</title> </head> <body> <div class="top-area mt-2"> <h4 class="text-white">名前</h4> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> 下記が追記した部分です <script src="https://unpkg.com/scrollreveal"></script> <script src="scroll.js"></script> </body> </html>

js

1$(function() { 2 ScrollReveal().reveal('.text-white', { 3 duration: 800, 4 viewFactor: 1, 5 origin: 'left', 6 distance: '250px', 7 reset: true 8 }); 9})

試したこと。
scriptタグの中に直接書く。

scriptの読み込む位置が怪しいのでしょうか?
どこに原因があるのかわかりませんでした。

どなたか知恵を貸していただけないでしょうか?

追記
https://github.com/jlmakes/scrollreveal/issues/338
ここも参考にしてみましたが、うまくいきませんでした。

https://jsbin.com/
こちらでコードを試してみると正しく動くのですが、なぜかブラウザ上だと動かないです。

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

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

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

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

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

guest

回答1

0

自己解決

cssでおかしなことしてたのが原因でした。。。。
overflow-x: hidden;が邪魔をしていました。

変更前

html, body{ /* overflow-x: hidden; */ width: 100%; height: 100%; background: black; }

変更後

html, body{ width: 100%; height: 100%; background: black; }

投稿2020/06/22 21:38

tenlife

総合スコア70

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問