【SANGO】シェアボタンを浮き上がらせるカスタマイズ方法

.sns-btn__item i {
  padding: .37em;
  font-size: 2.2em;
}
.sns-btn__item a {
  border-radius: 50%;
  width: 4.3em;
  height: 4.3em;
  opacity:.9;
}
.sns-btn ul li a:hover {
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width:480px){
  .sns-btn__item {
    margin: 0 0.4em;
  }
}
.tw a {
  background: #7dcdf7!important;
}
.fb a {
  background: #7c9dec!important;
}
.hatebu a {
    background: #7cb1ec!important;
}
.line a {
  background: #8ed97a!important;
}
.pkt a {
    background: #f99593!important;
}
.tw a, .fb a, .hatebu a, , .line a, .pkt a{
  color: white;
}
.share_txt {
  display:none;
}

.sns-shere-float{
  animation:sns-shere-float 1.7s ease 0s;
}
.sns-shere-float2{
  animation:sns-shere-float2 1.7s ease 0s;
}
.sns-shere-float3{
  animation:sns-shere-float3 1.7s ease 0s;
}
.sns-shere-float4{
  animation:sns-shere-float4 1.7s ease 0s;
}
.sns-shere-float5{
  animation:sns-shere-float5 1.7s ease 0s;
}
.sns-shere-float-mozi{
  animation:sns-shere-float-mozi 2s ease 0s;
}
@keyframes sns-shere-float{
  0%{
    opacity:0;
  }
  5%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@keyframes sns-shere-float2{
  0%{
    opacity:0;
  }
  20%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@keyframes sns-shere-float3{
  0%{
    opacity:0;
  }
  35%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@keyframes sns-shere-float4{
  0%{
    opacity:0;
  }
  50%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@keyframes sns-shere-float5{
  0%{
    opacity:0;
  }
  65%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@keyframes sns-shere-float-mozi{
  0%{
    opacity:0;
  }
  80%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}

//記事下のSNSボタンの浮き上がり
$(window).scroll(function () {
  let sns_shere_button1 = $(".sns-btn ul li:nth-child(1)");
  let sns_shere_button2 = $(".sns-btn ul li:nth-child(2)");
  let sns_shere_button3 = $(".sns-btn ul li:nth-child(3)");
  let sns_shere_button4 = $(".sns-btn ul li:nth-child(4)");
  let sns_shere_button5 = $(".sns-btn ul li:nth-child(5)");
  let sns_shere_mozi = $(".sns-btn__title");
  $(".entry-content .sns-btn ul").each(function () {
    let sns_shere_position = $(this).offset().top;
    let diff = sns_shere_position - $(window).height();
    if ($(window).scrollTop() > diff) {
      sns_shere_button1.addClass("sns-shere-float");
      sns_shere_button2.addClass("sns-shere-float2");
      sns_shere_button3.addClass("sns-shere-float3");
      sns_shere_button3.addClass("sns-shere-float4");
      sns_shere_button3.addClass("sns-shere-float5");
      sns_shere_mozi.addClass("sns-shere-float-mozi");
    } else {//2回目以降に上からスクロールした時も動かしたい場合
      sns_shere_button1.removeClass("sns-shere-float");
      sns_shere_button2.removeClass("sns-shere-float2");
      sns_shere_button3.removeClass("sns-shere-float3");
      sns_shere_button3.removeClass("sns-shere-float4");
      sns_shere_button3.removeClass("sns-shere-float5");
      sns_shere_mozi.removeClass("sns-shere-float-mozi");
    }
  });
});