[JAVA] [Ruby on Rails] Lors de la première connexion ・ Comment diviser l'écran en deux à l'aide de jQuery

Cible

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

supposition

[Ruby on Rails] Affiché une seule fois lors de la première connexion (en utilisant jquery.cookie.js) Ce sera une forme légèrement modifiée, donc Si vous utilisez le code tel quel, il ne s'affichera pas tant que le cookie n'aura pas disparu.

Code réel

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

<div class="indication-left"></div> #ajouter à
<div class="indication-right"></div> #ajouter à
<div class="box">
  <p>Lorsque vous appuyez sur le bouton de fin d'affichage ci-dessous,<br>Vous ne pouvez pas le voir même si vous le mettez à jour.<br>
Il sera affiché lorsque vous lancerez un nouveau navigateur.
  </p>
  <button>Fin d'affichage</button>
</div>

app/assets/stylesheets/application.css

/*ajouter à*/
/*d'ici*/
 .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%);
}
/*Jusque là*/


.box{
  position: absolute;
  top: 40%;
  left: 35%;
  width: 400px;
  height: 200px; 
  background-color: #ffffff;
  z-index: 1050; /*Changement*/
}
.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(); //Ajouté car ce n'est plus un enfant d'indication
    $(".indication-right").hide(); //ajouter à
    $(".indication-left").hide(); //ajouter à
  }else{  
    $(".box").show(); //ajouter à
    $(".indication-right").show(); //ajouter à
    $(".indication-left").show(); //ajouter à
  }
  $(".box button").click(function(){
    $(".indication-right").addClass("rightslide"); //ajouter à
    $(".indication-left").addClass("leftslide"); //ajouter à
    $(".box").fadeOut(); //ajouter à
    $.cookie('Flg', 'on', { expires: 1, path: '/' });
  });
});

À propos de z-index

Lors de l'utilisation de bootstrap, dans l'implémentation d'une fonction comme celle-ci Parce qu'il devait être affiché plus haut que .fixed-top Nous avons spécifié une valeur supérieure à 1030.

bootstrap.css

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

clip: rect ();

Qu'est-ce qu'un élément de clip? Pour les éléments tels que les images, le contenu en dehors de la zone de recadrage n'est pas affiché. Une propriété qui spécifie la zone de cadrage. La méthode de spécification est rect et la longueur de rect est Comme rect (distance du bord supérieur, distance du bord droit, distance du bord inférieur, distance du bord gauche), Spécifiez quatre valeurs dans le sens horaire à partir du haut, séparées par des virgules.

Image à droite clip: rect (0px 50vw 100vh 0px); Image à gauche `` clip: rect (0px 100vw 100vh 50vw); ``

Résumé

Puisqu'il existe également une méthode utilisant l'entrée css au lieu de jquery, Je pense qu'il est important d'inclure les deux connaissances. J'espère le mettre à jour bientôt.

De plus, sur Twitter, les technologies et les idées qui n'ont pas été téléchargées sur Qiita sont également téléchargées, donc Je vous serais reconnaissant si vous pouviez me suivre. Cliquez ici pour plus de détails https://twitter.com/japwork