목표

개발 환경

루비 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

전제

【Ruby on Rails】초회 액세스시에 한 번만 표시(jquery.cookie.js 사용)
여기에 조금 손을 더한 형태가되므로,
코드를 그대로 사용하면 쿠키가 없어질 때까지 표시할 수 없습니다.

실제 코드

app/views/layouts/application.html.erb

<div class="indication-left"></div> # 追加
<div class="indication-right"></div> # 追加
<div class="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(0px 50vw 100vh 0px);
}
.indication-right{
  right: 0;
  clip: rect(0px 100vw 100vh 50vw);
}
.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; /* 変更 */
}
.box p{
    padding: 15px;
}
.box button{
  display: block;
  margin: 0 auto;
}

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(상단으로부터의 거리, 우단으로부터의 거리, 하단으로부터의 거리, 좌단으로부터의 거리)와 같이,
위에서 시계 방향으로 쉼표로 구분하여 네 개의 값을 지정합니다.

오른쪽 이미지 clip: rect(0px 50vw 100vh 0px);왼쪽 이미지 clip: rect(0px 100vw 100vh 50vw);

요약

jquery를 사용하지 않고 css의 input을 사용하는 방법도 있기 때문에,
두 지식을 모두 넣는 것이 중요하다고 생각합니다.
곧 업데이트할 수 있으면 좋겠습니다.

또 twitter에서는 Qiita에는 업하고 있지 않은 기술이나 생각도 업하고 있으므로,
좋으면 팔로우 해 주시면 기쁩니다.
자세한 내용은 여기 htps : // 라고 해서 r. 이 m / 그럼 p를 rk