js ｜ inview：スクロールして要素が見えたら何か動作する

スクロールして要素が見えたら何か動作する

inview

headタグ内に下記1つのファイルを配置し、htmlにクラスを記述し、cssの設定をします。 ・jquery.inview.min.js ※inviewを使う際は全体を囲うmainやwrapperにoverflow: hidden;を指定して、画面がぐらぐら動くのを防ぎましょう。
ソースをコピー!!

inview Vo.01

画像とテキストが右から表示

HTML

              <div class="inview-right">
  <img src="img/01.jpg" alt="">
  <p>画像とテキストが右から表示</p>
</div>

css

              .inview-right {
  opacity: 0;
  transform: translateX(50%);
  transition: 1s .6s;
}
.inview-right.appear {
  opacity: 1;
  transform: translateX(0);
}

js

              $('.inview-right').on('inview', function(){
$(this).addClass('appear');
});

inview Vo.02

画像とテキストが中央から拡大しながら表示

HTML

              <div class="inview-big">
  <img src="img/01.jpg" alt="">
  <p>画像とテキストが中央から拡大しながら表示</p>
</div>

css

              .inview-big {
  opacity: 0;
  transform: scale(0.1);
  transition: 1s .6s;
}
.inview-big.appear {
  opacity: 1;
  transform: scale(1);
}

js

              $('.inview-big').on('inview', function(){
    $(this).addClass('appear');
});

inview Vo.03

画像とテキストが下から縮小しながら表示

HTML

              <div class="inview-down-small">
  <img src="img/01.jpg" alt="">
  <p>画像とテキストが下から縮小しながら表示</p>
</div>

css

              .inview-down-small {
  opacity: 0;
  transform: translateY(500px) scale(1.5);
  transition: 1s .6s;
}
.inview-down-small.appear {
  opacity: 1;
  transform: translateY(0) scale(1);
}

js

              $('.inview-down-small').on('inview', function(){
  $(this).addClass('appear');
});

inview Vo.04

画像は左から、テキストは右からスライドしながら表示

HTML

              <div>
  <img src="img/01.jpg" class="inview-left" alt="">
  <p class="inview-right">画像は左から、テキストは右からスライドしながら表示</p>
</div>

css

              .inview-left {
  opacity: 0;
  transform: translateX(-50%);
  transition: 1s .6s;
}
.inview-left.appear {
  opacity: 1;
  transform: translateX(0);
}
.inview-right {
  opacity: 0;
  transform: translateX(50%);
  transition: 1s .6s;
}
.inview-right.appear {
  opacity: 1;
  transform: translateX(0);
}

js

              $('.inview-left').on('inview', function(){
  $(this).addClass('appear');
});
$('.inview-right').on('inview', function(){
  $(this).addClass('appear');
});

inview Vo.05

斜めの背景色のみ左からスライドしながら表示

HTML

              <div class="inview-back-ground">
  <img src="img/01.jpg" alt="">
  <p>斜めの背景色のみ左からスライドしながら表示</p>
</div>

css

              .inview-back-ground {
  position: relative;
  padding-top: 200px;
  margin-bottom: 100px;
  color: pink;
}
.inview-back-ground::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  background-color: #333;
  transition: 1s .6s;
  opacity: 0;
  transform: skewY(-7deg) translateY(90px) translateX(-100%);
  z-index: -1;
}
.inview-back-ground.appear::after {
  opacity: 1;
  transform: skewY(-7deg) translateY(90px) translateX(0);
}
.inview-back-ground img {
  width: 80%;
}

js

              $('.inview-back-ground').on('inview', function(){
  $(this).addClass('appear');
});

inview Vo.06

背景画像ごと中央から拡大しながら表示

HTML

            <div class="inview-back-ground-img">
  <p>背景画像ごと中央から拡大しながら表示</p>
</div>

css

            .inview-back-ground-img {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  width: 100%;
  height: 80vh;
  background-image: url(img/01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s .6s;
  opacity: 0;
  transform: scale(0);
}
.inview-back-ground-img.appear{
  opacity: 1;
  transform: scale(1);
}
.inview-back-ground-img p {
  padding: 2%;
  background-color: rgba( 256, 256, 256, 0.6);
}

js

            $('.inview-back-ground-img').on('inview', function(){
  $(this).addClass('appear');
});
TOPページへ戻る
​