[Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery

Target

Development environment

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Premise

[Ruby on Rails] Displayed only once when accessing for the first time (using jquery.cookie.js) It will be a slightly modified form, so If you use the code as it is, it cannot be displayed until the cookie is gone.

Actual code

erb:app/views/layouts/application.html.erb

<div class="indication-left"></div> #add to
<div class="indication-right"></div> #add to
<div class="box">
  <p>When you press the display end button below,<br>You cannot see it even if you update it.<br>
It will be displayed when you launch a new browser.
  </p>
  <button>End of display</button>
</div>

app/assets/stylesheets/application.css

/*add to*/
/*from here*/
 .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%);
}
/*So far*/


.box{
  position: absolute;
  top: 40%;
  left: 35%;
  width: 400px;
  height: 200px; 
  background-color: #ffffff;
  z-index: 1050; /*Change*/
}
.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(); //Added because it is no longer a child of indication
    $(".indication-right").hide(); //add to
    $(".indication-left").hide(); //add to
  }else{  
    $(".box").show(); //add to
    $(".indication-right").show(); //add to
    $(".indication-left").show(); //add to
  }
  $(".box button").click(function(){
    $(".indication-right").addClass("rightslide"); //add to
    $(".indication-left").addClass("leftslide"); //add to
    $(".box").fadeOut(); //add to
    $.cookie('Flg', 'on', { expires: 1, path: '/' });
  });
});

About z-index

When using bootstrap, in the implementation of a function like this time Because it had to be displayed higher than .fixed-top We have specified a value higher than 1030.

bootstrap.css

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

About clip: rect ();

What is a clip element? For elements such as images, the contents outside the crop area are not displayed. A property that specifies the crop area. The specification method is rect, and the length of rect is Like rect (distance from the top edge, distance from the right edge, distance from the bottom edge, distance from the left edge), Specify four values in clockwise order from the top, separated by commas.

Image on the right ``` clip: rect (0px 50vw 100vh 0px);`` Image on the left ``clip: rect (0px 100vw 100vh 50vw);` ``

Summary

Since there is also a method using css input without using jquery, I think it's important to include both knowledge. I hope to update it soon.

Also, on twitter, technologies and ideas that have not been uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork