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

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

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

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

2回答

982閲覧

Code PenよりコピペしてきたJSが動きません

_li____nu

総合スコア4

Webサイト

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

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/08/05 02:49

ザ・ベストテンのパタパタとしたパネルの動きをwebサイトで使用したく、
Code Penから、cssとJSをコピーしてきましたが、うまく動きません。
(参照元URL:https://codepen.io/jesusbotella/pen/opmRrO)

読み込み用のURLはコピペしたあとに追記しました。
表示はうまくいっているのですが、全く動かないので、
おそらくJSがうまく読み込めていないのかと思うのですが、
何が足りていないかわからない状態です。

当方初心者のため、質問もうまくできているか不安ですが、ご回答いただけましたら幸いです。
よろしくお願いします。

html

1<div class="splitflap-display"> 2<div class="split-flap" data-letter="●●●"></div></div>

css

1.splitflap-display { 2 display: flex; 3 margin: 10px; 4 flex-wrap: wrap; 5 align-items: center; 6 height: 100%; 7 justify-content: center; 8 align-content: center; 9} 10 11.split-flap { 12 width: 100%; 13 height: 4vw; 14 border: 2px solid rgba(0, 0, 0, 0.2); 15 position: relative; 16 margin: 0 20px 20px 0; 17 font-size: 2vw; 18 line-height: 70px; 19 text-align: center; 20 box-sizing: border-box; 21 box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.5); 22 overflow: hidden; 23 position: relative; 24} 25 26.split-flap:after { 27 content: ' '; 28 width: 100%; 29 height: 2px; 30 background-color: rgba(0, 0, 0, 0.5); 31 position: absolute; 32 top: 50%; 33 left: 0%; 34 transform: translate3d(0, -50%, 0); 35} 36 37.split-flap:before { 38 content: attr(data-letter); 39 width: 100%; 40 height: 100%; 41 top: 50%; 42 left: 50%; 43 transform: translate3d(-50%, -50%, 0); 44 position: absolute; 45/* transition: height 100ms linear;*/ 46 animation-duration: 120ms; 47 animation-delay: attr(data-animation-delay); 48 animation-name: slidein; 49 animation-iteration-count: 6; 50 overflow: hidden; 51} 52 53/*.split-flap.is-changing:before { 54 height: 0; 55}*/

JS

1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 2<script> 3function makeid() { 4 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 5 6 return possible.charAt(Math.floor(Math.random() * possible.length)); 7} 8 9function randomTime(){ 10 return Math.round(Math.random() * 200 ); 11} 12function changeAnimationTime(element){ 13 var random = randomTime(); 14 element.setAttribute('animation-delay', random + "ms"); 15 16 console.log('animation-delay', random + "ms") 17} 18 19 20var mapFn = function(element) { 21 changeAnimationTime(element); 22 var i = 0; 23 var originalAttribute = element.getAttribute('data-letter'); 24 var test = [makeid(), makeid(), makeid(), makeid(), makeid(), originalAttribute]; 25 element.addEventListener("animationend", function() { 26 element.setAttribute('data-letter', originalAttribute); 27 }, false); 28 element.addEventListener("animationiteration", function() { 29 element.setAttribute('data-letter', test[i++]); 30 }, false); 31}; 32 33var changingElements = Array.from(document.querySelectorAll('[data-letter]'), mapFn); 34</script>

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

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

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

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

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

akihiro3

2020/08/05 03:09

とりあえずjsは読み込み出来てます。 あとは、 他人が作ったモノなので、コードのどこの部分で何の処理をしているのかを読み解いて、どこで想定外の処理になってるのかを調べればいいと思います。
_li____nu

2020/08/05 07:14

見ていただいてありがとうございます! 参照元URLより、cssのコピーが一部漏れていました。失礼しました。
guest

回答2

0

ベストアンサー

CSSが一部コピペできてないと思います。

投稿2020/08/05 02:59

Lhankor_Mhy

総合スコア35865

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

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

_li____nu

2020/08/05 03:03

確認不足でした。cssを追記したら解決しました。ありがとうございます! 大変失礼しました。
guest

0

なぜjQueryの1.3.2を読み込ませようとしたのでしょうか?プロジェクト設定から確認すると、CodePenでのjQueryは3.2.1となっています。

あと、フォント用CSSも必要なようです。

投稿2020/08/05 02:58

maisumakun

総合スコア145121

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

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

_li____nu

2020/08/05 03:03

cssを追記したら解決しました。確認不足で大変失礼しました。ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問