目標
開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina
前提
【Ruby on Rails】初回アクセス時に一度だけ表示（jquery.cookie.js使用）
こちらに少し手を加えた形となりますので、
コードをそのまま使うとcookieがなくなるまでは表示出来ません。
実際のコード
app/views/layouts/application.html.erb
<divclass="indication-left"></div> # 追加
<divclass="indication-right"></div> # 追加
<divclass="box"><p>下記の表示終了ボタンを押すと、<br>更新しても見ることは出来ません。<br>新しいブラウザを立ち上げると表示されます。
</p><button>表示終了</button></div>app/assets/stylesheets/application.css
/* 追加 *//* ここから */.indication-left,.indication-right{position:fixed;top:0;width:100%;height:100vh;background-image:url("image1.jpg");background-size:cover;background-position:center;z-index:1040;transition:3s;}.indication-left{left:0;clip:rect(0px50vw100vh0px);}.indication-right{right:0;clip:rect(0px100vw100vh50vw);}.leftslide{transform:translateX(-100%);}.rightslide{transform:translateX(100%);}/* ここまで */.box{position:absolute;top:40%;left:35%;width:400px;height:200px;background-color:#ffffff;z-index:1050;/* 変更 */}.boxp{padding:15px;}.boxbutton{display:block;margin:0auto;}app/assets/javascripts/application.js
$(function(){$(".indication").show();if($.cookie('Flg')=='on'){$(".box").hide();// indicationの子ではなくなったので追加$(".indication-right").hide();// 追加$(".indication-left").hide();// 追加}else{$(".box").show();// 追加$(".indication-right").show();// 追加$(".indication-left").show();// 追加}$(".box button").click(function(){$(".indication-right").addClass("rightslide");// 追加$(".indication-left").addClass("leftslide");// 追加$(".box").fadeOut();// 追加$.cookie('Flg','on',{expires:1,path:'/'});});});z-indexについて
bootstrapを使用する場合、今回のような機能の実装では
.fixed-topよりも高い位置に表示する必要があったため、
1030より高い数値を指定しております。
bootstrap.css
.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030;}clip: rect( ); について
clip要素とは画像などの要素について、切り抜き領域の外にある内容を表示せず、
切り抜き領域を指定するプロパティです。
指定方法はrectととなり、rectの長さには
rect(上端からの距離, 右端からの距離, 下端からの距離, 左端からの距離)のように、
上から時計回りの順でコンマで区切って4つの値を指定します。
右側の画像clip: rect(0px 50vw 100vh 0px);
左側の画像clip: rect(0px 100vw 100vh 50vw);
まとめ
jqueryを使用せず、cssのinputを使用した方法もあるため、
両方の知識を入れておくのは大事だと思います。
近々更新できればと思います。
またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら https://twitter.com/japwork