- ベストアンサー
初回のローディング画像をフェードアウトさせたい
jsについて質問です。 ①初回のみローディング画像(gif)を表示して、2度目以降は表示しない ②ローディング画像が消えるときはふわっとフェードアウトする ということをやりたいです。 ①のみだけならできたのですが、フェードアウトをいれると、ローディング画像が一瞬で消えてしまったり、ずっとローディング画像が表示されたままだったり、うまくいきませんでした。 参考にしたサイトがclassの追加だったので、フェードアウトはcssでkeyframe変更すればいいのかと思ったのですが、jsを修正すべきでしょうか? ●html <div class="splash"> <div class="splash-animation"> <img src="image/load.gif"> </div> </div> ●css .splash-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #ffffff; z-index: 1000; } .splash.is-active { opacity: 0; visibility: hidden; } .splash-animation.is-active { opacity: 1; visibility: visible; } ●js $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { $(".splash").addClass('is-active'); } else { sessionStorage.setItem('access', 'true'); $(".splash-animation").addClass('is-active'); setTimeout(function () { $(".splash").addClass('is-active'); $(".splash-animation").removeClass('is-active'); }, 3000); } } webStorage(); });
- みんなの回答 (1)
- 専門家の回答
関連するQ&A
- 画像がフェードインしてからフェードアウトする
<!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="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。
- ベストアンサー
- HTML
- javascriptでのフェードイン
javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 (Photologのサムネイル表示での使用を想定しております。) ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} //////////////////////// ///html file/// <html> <head> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryでの画像のフェードインのループ
jQuery初心者です。 jQueryで3枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、1週ループまでは上手くいくのですが、2週目に2枚目の画像で止まってしまいます。 下記だと何故2週目の2枚目で止まるのか?の原因と、スマートな書き方をご教授頂けませんか? <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>
- ベストアンサー
- JavaScript
- 画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。(あまり関係ないと思う部分は省いてます) 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- JavaScript
- jQueryで4枚の画像がフェードアウトで切り替え
4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。 そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが 選択されたような状態になり、 「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。 途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">1</button> <button id="btn02">2</button> <button id="btn03">3</button> <button id="btn04">4</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。 というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。 ご教授いただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでのフェードイン
javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE(6&7)で確認すると「エラー:オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload~」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file(fade.js)/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////
- ベストアンサー
- JavaScript
- フェードアウト時にぶちっと画像が一瞬切れます。
以下のように、アプリ起動時に、フェードインで現れてフェードアウトで消えていくフォームがあります その後に実際に使用するフォームを表示したいと思っています。 ただwindows8だと問題ないのですがXPやwindows7で下記コードを実行するとちょうど Thread.Sleep(4000)という命令以降フェードアウトしていくのですが この時一瞬画像がブチっとコマ落ちしたような現象がおきるのです。 原因がわからず困っております。 どなたか原因がわかるかたいらっしゃいませんでしょうか? お願いします! public class MainClass{ public static void Main(string [] args){ try{ FrontForm frontObj = new FrontForm(); frontObj.StartPosition = FormStartPosition.CenterScreen; frontObj.SetImage("f04.jpg"); frontObj.FormBorderStyle = FormBorderStyle.None; Application .EnableVisualStyles(); Application.Run(frontObj); Application.Run(new Form()); }catch(Exception e){ MessageBox.Show(e.ToString()); } } } public class FrontForm : Form{ //フェードさせるためのタイマーオブジェクト public System.Windows.Forms.Timer TimerObj ; //画面にフェードインアウトで表示させる画像用ラベル public Label labelObj ; //実際に表示させるための画像パス public string imagePath; //フェードインとアウトの境目フラグ public int fadeFlag; //コンストラクタ public FrontForm(){ this.Width = 900; this.Height = 400; this.labelObj = new Label(); this.labelObj.Width = this.ClientSize.Width; this.labelObj.Height = this.ClientSize.Height; this.Controls.Add(this.labelObj); this.Opacity = 0.0F; this.Visible = false; this.fadeFlag = 0; this.Load += new EventHandler(this.RenderFade); } //フェード用画像をセットする public void SetImage (string path){ Bitmap bit = new Bitmap(this.ClientSize.Width,this.ClientSize.Height); Graphics gr = Graphics.FromImage(bit); this.imagePath = path; Image imageObj = Image.FromFile(this.imagePath); gr.DrawImage(imageObj,0,0,this.ClientSize.Width,this.ClientSize.Height); this.labelObj.BackgroundImage =bit; } public void RenderFade(Object sender ,EventArgs e){ //タイマーイベントの作成 this.TimerObj = new System.Windows.Forms.Timer(); this.TimerObj.Tick += new EventHandler(this.RenderMethod); this.TimerObj.Interval = 30; this.TimerObj.Start(); } public void RenderMethod(Object sender ,EventArgs e){ if(this.fadeFlag == 0){ Console.WriteLine(this.Opacity.ToString()); this.Opacity += 0.01F; if(this.Opacity == 1){ this.fadeFlag = 1; Thread.Sleep(4000); } } if(this.fadeFlag == 1){ Console.WriteLine("====" + this.Opacity.ToString() + "===="); this.Opacity = this.Opacity - 0.01F; if(this.Opacity ==0){ this.Close(); } } } }
- ベストアンサー
- C・C++・C#
- 画像の下のテキストにフェードアウト後入力したい
フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------
- ベストアンサー
- JavaScript
- 画像のフェードインについて
最近javascriptでいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、 そのソースの意味を調べていましたら、今まで見たことのない 表記が出てきました。再起処理の中に"+img+"とうのがありますが これはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくの かなと想像してしまいますが、果たしてその解釈も正しいものやら 想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、 数日前に本を読み始めたばかりの初心者です。バカな質問と思わ れるかもしれませんが宜しくお願いいたします。 <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 2; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd); } // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } //-->
- ベストアンサー
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内(tab1~tab3)へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
返信が遅くなり申し訳ありません。 回答いただいたものを参考にjsを修正したところ、理想通りにフェードアウトさせることができました! jsとcssの理解がまだまだ勉強不足だと実感しました。 またお世話になることがあるかと思いますので、そのときはよろしくお願いします。 ありがとうございました!