- 締切済み
div要素でfadeinclass
こんばんは、お世話になります。 また似た様な質問で大変申し訳ないのですが 画像をフェードインするのに 画像の初期設定で画像コンテンツを消したいのですが 消せないんですが あれってjavascriptコードだけでできなかったのでしょうか？ animate.cssなるものがあった気がしたのですが、 因みにhtmlとcssが問題だと思うので 回答して頂ける方は、お礼と補足欄に随時記述するので ご教示宜しくお願い致します。
- JackTheRipper99
- お礼率89% (557/624)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
その画像の、初期値がopacity: 0 になればいいだけだと思う。 でそのセレクタに対してアニメーションを すればいいだけだとおもいますよ～ （ここで言う事じゃないが、３連休は基本、 呑んで寝てます！）
関連するQ&A
- フェードによる<div>要素の背景画像の切り替え
以下のようにして、背景画像を切り替えておりますが、 これにフェード効果を追加することは可能でしょうか。 -html- <div id="wrapper"></div> -javascript- $(function() { var i = 1; setInterval(function() { if(i > 3) i = 1; $("#wrapper").css("background","url('./images/img"+i+".jpg')"); i++; }, 4000 ); }); もし可能でしたら、具体的なソースコードも 教えて頂けますと非常に助かります。 どうぞ宜しくお願い申し上げます。
- 締切済み
- JavaScript
- 特定の要素を表示後に次の処理を実施する方法について
初期表示で、ローディング画像を表示し、div#mainの中にあるすべての画像群が読み込まれてから表示するために、<head>タグ内に以下の処理を入れています。 <script type="text/javascript"> $(function(){ $('#main').css('display', 'none'); //全てのページコンテンツを読み込んだ後に、function内の処理を実行 $(window).load(function(){ $('#loading').remove(); $('#main').fadeIn(700); }); }); </script> 上記処理後、div#mainが表示されたというのを検知してから、次の処理（具体的にはテキスト画像をフェードインさせる）をしたいのですが、方法はありますでしょうか。
- 締切済み
- JavaScript
- javascript 画像のワイプ表示
javascript(特にjquery)を用いて画像ファイルをPowerPointのアニメーションにある「ワイプ」(オブジェクト端から特定方向にフェード表示)のように表示させる方法を探しています。 CSSで画像のwidthを0にしてanimate()で100%に拡大する方法だとあまりきれいなワイプにならず、さらにheightも拡大されてしまうため1点から拡大したようになり、思っているアニメーションと異なります。 何か方法を伝授していただければ幸いです。
- 締切済み
- JavaScript
- フェイドインしながら移動させたい
下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。 フェイドインしながら移動させるにはどのように書けば良いのでしょうか。 ご教授頂けると非常に助かります。
- 締切済み
- JavaScript
- 一定時間ごとに画像を切り替えたいです！
JavaScriptを使って一定時間ごとにフェードイン、フェードアウトしながら画像を切り替えたいです!! インターネットでいろいろ調べていたのですが画像の切り替えはあってもフェードイン・フェードアウトをしながらのサンプルがなかったもので。 ちなみに最後の画像で止めたいです。 こんな感じにしたいです↓↓ OPENERS http://openers.jp/ 誰か解る方がいれば宜しくお願いします。
- 締切済み
- JavaScript
- thickboxで画像をゆっくり表示
thickboxで画像をゆっくり表示（消去）させる方法はありますでしょうか？クリックしたら画像をフェードイン、フェードアウトさせたいのです。htmlは分かるのですが、JavaScriptはさっぱりなもので……。どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- DIV要素のボックスを移動させるスクリプト教えて
やりたい事は (1) Ｌ・Ｒという２つのラジオボタンを設置し、 ウィンドウ左に配置したＤＩＶ要素のボックスを、 Lをクリックでウィンドウ左、 Rをクリックでウィンドウ右に配置を変更させる。 (2) 画像ボタンを設置し、クリックされると ＤＩＶ要素のボックスを、ウィンドウ枠外へスライドさせ、 再クリックで元の配置にスライドさせ戻したい。 初心者のためスクリプトをどのように記述すれば、 良いか解らず質問させていただきます。 ご教授よろしくお願いします。 http://www11.ocn.ne.jp/~website/sample3/index.html 一応参考アドレスを記載させていただきますが この記述方法だと、ＤＩＶ要素のボックスが左側にあるとき、 画像ボタンクリックで、ＤＩＶ要素のボックスを、 ウィンドウ枠外へスライドさせ、 再クリックで元の配置に戻すと、 その後、Rをクリックしても、ＤＩＶ要素のボックスが ウインドウ右側へ移動しなくなってしまいます。 ===== HTML ==== <body> <div id="wrapper"> <header></header> <nav></nav> <div id="box" class="box_l"> <label> <input type="radio" id="radio1" name="test" checked="checked" /> L</label> <label> <input type="radio" id="radio2" name="test" /> R</label> </div> <div id="tab" class="tab_l"></div> <section id="section01" class="section"> <p>PAGE1</p> </section> </div> <div id="page_top"></div> <footer></footer> </body> ==== CSS ==== .box_l { position: fixed; top:30px; left:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .box_r { position: fixed; top:30px; right:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .tab_l { position: fixed; top:30px; left:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm2.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 0 10px 10px 0; /* CSS3草案 */ -webkit-border-radius: 0 10px 10px 0; /* Safari,Google Chrome用 */ -moz-border-radius: 0 10px 10px 0; /* Firefox用 */ } .tab_r { position: fixed; top:30px; right:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm1.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 10px 0 0 10px; /* CSS3草案 */ -webkit-border-radius: 10px 0 0 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px 0 0 10px; /* Firefox用 */ } #section01 { min-height: 100%; min-width:320px; width: 100%; height: 1000px; } #section01 p { font-style: normal; font-weight: 400; color: #000; font-size: 48px; text-align: center; } ==== SCRIPT ==== $(window).on('load', function() { for (i = 1; i <= 2; i++) { document.getElementById('radio' + i).checked = i==1; } }); $(function() { $("[name='test']").click(function(){ var num = $("[name='test']").index(this); if(num == 1){ $("#box").removeClass("box_l").addClass("box_r"); $("#tab").removeClass("tab_l").addClass("tab_r"); } else { $("#box").removeClass("box_r").addClass("box_l"); $("#tab").removeClass("tab_r").addClass("tab_l"); } }) $(".tab_l,.tab_r").toggle(function(){ $(".box_l").animate({'left':'-100px'},300); $(".tab_l").css('background-image','url(images/tnm1.png)').animate({'height':'40px','left':'0px'},300); $(".box_r").animate({'right':'-100px'},300); $(".tab_r").css('background-image','url(images/tnm2.png)').animate({'height':'40px','right':'0px'},300); }, function(){ $(".box_l").animate({'left':'0px'},300); $(".tab_l").css('background-image','url(images/tnm2.png)').animate({'height':'185px','left':'100px'},300); $(".box_r").animate({'right':'0px'},300); $(".tab_r").css('background-image','url(images/tnm1.png)').animate({'height':'185px','right':'100px'},300); }) })
- ベストアンサー
- HTML
- プルダウンメニューとフェードインの組み合わせを作りたい／FLASH?C
プルダウンメニューとフェードインの組み合わせを作りたい／FLASH?CSS? お世話になっております。 添付画像の通り、フェードイン画像のFLASHの上にプルダウンメニューを設置したいと考えています。 フェードインだけならFLASHで問題なく作れそうなのですが、困っているのはプルダウンメニューです。 元々FLASHはあまり知識がないので、CSSなどで作ろうと思っておりました。 以前、以下のサイト様のサンプルを参考にさせていただき作った経験はあります。 http://css-eblog.com/csstechnique/css-8.html ですが、今回はこのプルダウンと同時にボタンにマウスオーバーした際、プルダウンが出るだけでなく、オーバー画像を変化させたいのです（添付画像の通り、通常時オレンジボタン→オーバー時黄色ボタン）。それが上記のCSSでどうすればいいのか分からず、もはやFLASHで作ったほうが良いのではと考えています。 その場合、プルダウンメニューのFLASHとフェードインのFLASHは別に作るべきなのでしょうか？ プルダウンメニューがFLASHにかかるように（画像参照）したいので、全てを一つのFLASHにするしかないのかと悩んでいます。 非常に基本的なことかもしれませんが、プルダウンのようなアクションスクリプトを使ったものと、フェードインのようにタイムラインに沿って動かすものを1つのFLASHで実現できるのでしょうか？ それとも、最初に挙げたCSSに手を加えればCSSのみでプルダウンを実現できるのでしょうか？ もう何を使って何から作ればいいかすら分かりません。 どんな小さいことでもありがたいので、ヒントいただけましたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- Flash
- DIVを越えて付いてくるメニューについて
エレベーターメニュー？というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。 一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。 添付画像を見ていただきたいのですが。 赤色のDIVは全画面100％表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。 そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。 このようなことは実現可能なのでしょうか？ 技術的にjavascriptかな？と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。 お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- yuga.jsのロールオーバーをフェードインで表示
yuga.js 0.7.2を使用しています。 ロールオーバーさせる時に、 フェードアウト→フェードインで画像の切り替え表示をしたいと思っています。 もし分かる方がいましたら、そのコードを教えて頂けますでしょうか。 可能であれば、 yuga.js本体には追記しない方法（別途common.js等に記述）があればと思います。 よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
おかしいですね、ちゃんとOpacityになっているはずなんですが CSS---------------------------------------------------------------------------- /* ページ全体のスタイル */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* ヘッダーのスタイル */ header { background-color: #2d2d2d; color: #fff; padding: 20px 0; text-align: center; } .logo { font-size: 36px; font-weight: bold; } nav ul { list-style: none; } nav li { display: inline; margin: 0 15px; } nav a { text-decoration: none; color: #fff; font-weight: bold; font-size: 18px; } /* イントロセクション（ホーム）のスタイル */ .intro { background-image: url('intro-background.jpg'); background-size: cover; color: #fff; text-align: center; padding: 100px 0; } .intro h1 { font-size: 48px; margin-bottom: 20px; } /* ポートフォリオセクションのスタイル */ .portfolio { background-color: #f4f4f4; padding: 40px 0; } .portfolio h2 { text-align: center; font-size: 36px; } /* ポートフォリオグリッドのスタイル */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .portfolio-item { position: relative; overflow: hidden; box-sizing: border-box; /* 余白を要素の幅と高さに含める */ margin-bottom: 20px; /* 下部の余白 */ background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: auto; /* イメージの高さを自動調整 */ width: 100%; /* 例: 幅を100%に */ } .portfolio-item img { max-width: 100%; height: auto; width: 100%; /* 画像を親要素に合わせて幅を100%に */ height: auto; /* アスペクト比を維持 */ } /* コンタクトセクションのスタイル */ .contact { background-color: #333; color: #fff; text-align: center; padding: 100px 0; } .contact h2 { font-size: 36px; } /* フッターのスタイル */ .footer { background-color: #2d2d2d; color: #fff; text-align: center; padding: 20px 0; } .contact-info, .social-media { margin: 20px 0; } .social-media a { margin: 0 10px; } .portfolio-item { /* 既存のスタイル */ display: inline-block; vertical-align: middle; width: 200; } /* フェードインの初期設定 */ .fadein { opacity: 0; transform: translateY(20px); /* 下から上にスライドさせる */ transition: opacity 0.5s, transform 0.5s; } /* フェードインアクティブ時の設定 */ .fade-in-active { opacity: 1; transform: translateY(0); /* 上にスライドさせない */ } これでhtmlのdiv要素のクラスにfadeinを追加したんですが、 飲んで寝ますか（笑 結構お酒、好きな人多いですよね。
補足
補足情報です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <script src="js/fadein.js"></script> <script src="js/masonry.js"></script> <title>Illustfolio 3風のポートフォリオ</title> <body> <header> <div class="logo">Illustfolio</div> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Welcome to my Portfolio</h1> <p>Explore my artwork and designs.</p> </section> <section id="portfolio"> <h2>Portfolio</h2> <div class="portfolio-grid text-center"> <!-- div要素に変更 --> <div class="portfolio-item fadein"> <img src="img/img1.jpg" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img5.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img6.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img1.jpg" class="text-center" alt="Artwork 1"> <p>Artwork 1</p> </div> <div class="portfolio-item fadein"> <img src="img/img2.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img3.jpg" alt="Artwork 2"> <p>Artwork 2</p> </div> <div class="portfolio-item fadein"> <img src="img/img4.jpg" alt="Artwork 2"> <