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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1666閲覧

javascriptでのpng透過画像のスクロールと同時にフェードインするやり方。

Navymac10

総合スコア8

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/07/03 04:43

編集2018/07/03 05:57

javascript

1<script src="test/js/scrollreveal.js"></script> 2<script> 3window.sr = ScrollReveal({ reset: true }); 4 5// Distance 6sr.reveal('.distanceHundred', { distance: "500px", origin: "left" }); 7// Distance 8sr.reveal('.distanceHundred2', { distance: "500px", origin: "left", delay: "100"}) 9// Distance 10sr.reveal('.distanceHundred3', { distance: "500px", origin: "left", delay: "200"}) 11// Distance 12sr.reveal('.distanceHundred4', { distance: "500px", origin: "left", delay: "300"}) 13// Distance 14sr.reveal('.distanceHundred5', { distance: "500px", origin: "left", delay: "400"}) 15// Distance 16sr.reveal('.distanceHundred6', { distance: "500px", origin: "left", delay: "460"}) 17// Distance 18sr.reveal('.distanceHundred7', { distance: "500px", origin: "left", delay: "600"}) 19// Distance 20sr.reveal('.distanceHundred8', { distance: "500px", origin: "left", delay: "710"}) 21// Distance 22sr.reveal('.distanceHundred9', { distance: "500px", origin: "left", delay: "750"}) 23// Origin 24sr.reveal('.default'); 25// Origin 26sr.reveal('.default2'); 27// Delay 28sr.reveal('.delayOne', { delay: "500" }); 29// Delay 30sr.reveal('.delayThree', { delay: "3000" }); 31</script> 32```css 33.box12 { 34width :100%; text-align:center; 35position: absolute; 36top: 11248px; /*ブラウザのウィンドウ基準*/ 37 left: -16px; /*ブラウザのウィンドウ基準*/ 38 background: #fff; 39 font-weight: bold; 40 padding: 1em; 41 margin: 0 auto; 42 text-align: center; 43 border-radius: 6px; 44} 45.box-small { 46 display: inline-block; 47 width: auto; 48} 49.some-content { 50 padding: 12em 0; 51 margin: 4em 0; 52} 53```html 54<div class="shashin"> 55<img class="sha" src="1476268_s_wi/voice-haikei.jpg"> 56</div> 57 58 59<div class="box12 delayOne"> 60<img class="sha2" src="1476268_s_wi/voice-mae.jpg"> 61</div> 62
```### 前提・実現したいこと html、css、javascriptにてウェブページを作っているのですが、 まず背景に写真画像を配置しておいて、その写真を載せている箇所までスクロールしたら その写真のふちに、花柄の枠がフェードインするページを作りたいのですが、 花柄の、真ん中を透過にして抜いたpng画像を用意してjavascriptの「delay」を使って実装したところ、 花柄の画像の透過にした所が白く表示され、背景の写真が見えないのです。 どうしたら解決出来るのか、検索してもわかりません。 どなたか解決出来る方法か、解決出来るサイトをお教えいただけませんでしょうか? 因みに、当方、まだjavascriptを扱い始めて一週間程度です。 どうかよろしくお願い致します。 ### 発生している問題・エラーメッセージ

エラーメッセージ

### 該当のソースコード ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2018/07/03 05:17

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
m.ts10806

2018/07/03 05:18

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。
Navymac10

2018/07/03 05:59

ご指導ありがとうございます。わかる範囲で修正しました。宜しくお願い致します。
m.ts10806

2018/07/03 06:03

CSSもコードなので、同様にお願いします。また ```で囲った中は他のマークダウンの機能が無効化されます。ちょっと囲っている場所などがおかしくなっているように思います(編集前より見づらくなっている箇所がチラホラ・・・)。最初のコメントに書きましたが、質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください。
Navymac10

2018/07/04 01:30

ご指摘ありがとうございます。今後、キチンとここの投稿の仕方を学んでから投稿するように心がけたいと思います。ありがとうございました。
guest

回答1

0

ベストアンサー

花柄の枠画像を配置しているdiv要素に背景色:白色(#FFF)が指定されていますよ。

css .box12 { width :100%; text-align:center; position: absolute; top: 11248px; /*ブラウザのウィンドウ基準*/ left: -16px; /*ブラウザのウィンドウ基準*/ background: #fff; ←ここ!!! font-weight: bold; padding: 1em; margin: 0 auto; text-align: center; border-radius: 6px; }

divが無色透明であればちゃんと透過されるのではないでしょうか。お試しください。

追伸:他の方がおっしゃられていますが、マークダウンの記載がぐちゃぐちゃですね。。。回答する方の回答意欲もそがれますし、できればきれいな形で投稿して下さい。初心者マークが付いているので、大変だとは思いますが頑張って下さい!

投稿2018/07/03 07:14

SE-studying-now

総合スコア351

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

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

Navymac10

2018/07/04 01:24

ご回答ありがとうございました。 拙い投稿で大変申し訳ありません。 おっしゃるっ通りに指摘箇所を無色のカラーコードにしたら解決いたしました。 本当にありがとうございます。
SE-studying-now

2018/07/04 03:35

上手くいったようで、良かったです!!
Navymac10

2018/07/05 05:21

ありがとうございました(*´ω`)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問