[JAVA] [Ruby on Rails] Beim ersten Anmelden ・ So teilen Sie den Bildschirm mit jQuery in zwei Hälften

Ziel

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

[Ruby on Rails] Wird beim ersten Zugriff nur einmal angezeigt (mit jquery.cookie.js) Es wird also eine leicht modifizierte Form sein Wenn Sie den Code so verwenden, wie er ist, wird er erst angezeigt, wenn das Cookie verschwunden ist.

Tatsächlicher Code

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

<div class="indication-left"></div> #hinzufügen
<div class="indication-right"></div> #hinzufügen
<div class="box">
  <p>Wenn Sie die Display-End-Taste unten drücken,<br>Sie können es nicht sehen, selbst wenn Sie es aktualisieren.<br>
Es wird angezeigt, wenn Sie einen neuen Browser starten.
  </p>
  <button>Ende der Anzeige</button>
</div>

app/assets/stylesheets/application.css

/*hinzufügen*/
/*von hier*/
 .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%);
}
/*Bisher*/


.box{
  position: absolute;
  top: 40%;
  left: 35%;
  width: 400px;
  height: 200px; 
  background-color: #ffffff;
  z-index: 1050; /*Veränderung*/
}
.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(); //Hinzugefügt, weil es kein Kind der Anzeige mehr ist
    $(".indication-right").hide(); //hinzufügen
    $(".indication-left").hide(); //hinzufügen
  }else{  
    $(".box").show(); //hinzufügen
    $(".indication-right").show(); //hinzufügen
    $(".indication-left").show(); //hinzufügen
  }
  $(".box button").click(function(){
    $(".indication-right").addClass("rightslide"); //hinzufügen
    $(".indication-left").addClass("leftslide"); //hinzufügen
    $(".box").fadeOut(); //hinzufügen
    $.cookie('Flg', 'on', { expires: 1, path: '/' });
  });
});

Über den Z-Index

Bei Verwendung von Bootstrap bei der Implementierung einer Funktion wie dieser Zeit Weil es höher als .fixed-top angezeigt werden musste Wir haben einen Wert höher als 1030 angegeben.

bootstrap.css

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

Clip: rect ();

Was ist ein Clip-Element? Bei Elementen wie Bildern wird der Inhalt außerhalb des Zuschneidebereichs nicht angezeigt. Eine Eigenschaft, die den Zuschneidebereich angibt. Die Spezifikationsmethode ist rect und die Länge von rect ist rect Wie rect (Abstand von der Oberkante, Abstand von der rechten Kante, Abstand von der Unterkante, Abstand von der linken Kante), Geben Sie vier Werte im Uhrzeigersinn von oben an, die durch Kommas getrennt sind.

Bild rechts `Clip: rect (0px 50vw 100vh 0px);` Bild links `Clip: rect (0px 100vw 100vh 50vw);`

Zusammenfassung

Da es auch eine Methode gibt, die CSS-Eingabe anstelle von JQuery verwendet, Ich denke, es ist wichtig, beide Kenntnisse einzubeziehen. Ich hoffe es bald zu aktualisieren.

Auf Twitter werden auch Technologien und Ideen hochgeladen, die nicht auf Qiita hochgeladen wurden Ich wäre Ihnen dankbar, wenn Sie mir folgen könnten. Klicken Sie hier für Details https://twitter.com/japwork