menu
menu

キーワード検索

 

最近の投稿

スクロールで要素の拡大縮小と移動

  • Labs

jQuery

こんにちは(・∀・)

スクロール量に連動して要素が拡大したり縮小したり移動したりします。

Contents

  1. jQueryで位置を取得してCSSで要素に変化
  2. サンプル1
  3. サンプル2
  4. jQueryで位置を取得して要素に変化
  5. サンプル3
  6. サンプル4

jQueryで位置を取得してCSSで要素に変化

jQueryでスクロールした画面の位置を取得してCSSで要素に変化を付けます。

サンプル1

スクロールすると画面外にある要素が大きくなりながら画面内に入って来ます。サンプルではlineですが要素の高さを大きく取ればboxとなり箱が大きくなったり小さくなったりします。画面の位置の取得はjQueryで行い、要素に動きをつけるのはCSSで行います。

jQueryを使用するのでHTMLの<head>内にjQuery 1.x snippetを入力します。
Google Hosted Libraries


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML

<div class="container ">
  <div class="box1"></div>
</div>
<div class="container ">
  <div class="box2"></div>
</div>
<div class="container ">
  <div class="box3"></div>
</div>
CSS

.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 28px;
  color: #444;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .box1 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box2 {
  position: absolute;
  height: 5px;
  background: #9fb7d4;
}
.container .box3 {
  position: relative;
  height: 5px;
  background: #9fb7d4;
}
    @keyframes anim1 {
      100% { right: 0; }
    }
    @keyframes anim2 {
          0% { right: 0; }
    }
    @keyframes anim3 {
      100% { left: 0; }
    }
    @keyframes anim4 {
          0% { left: 0; }
    }
.container .box2,
.container .box3 {
  width: 100%;
}
JavaScript

$(function() {
$('.container .box2').css({'display':'none','right':'-2000px'});
$('.container .box3').css({'display':'none','left':'-2000px'});
$(window).scroll(function () {
$('.container').each(function(){
var obj = $(this).offset().top;    
var scroll = $(window).scrollTop();
var winH = $(window).height();
if (scroll > obj - winH) {
$('.box2,.box3',this).fadeIn();
$('.box2',this).css({'animation':'0.8s forwards anim1'});
$('.box3',this).css({'animation':'0.8s forwards anim3'});
} else {
$('.box2,.box3',this).fadeOut();
$('.box2',this).css({'animation':'0.8s backwards anim2'});
$('.box3',this).css({'animation':'0.8s backwards anim4'});
}
});
});
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

サンプル2

スクロールすると要素が移動します。画面の外にある要素がスクロールすると画面の中に入ってきます。スクロールを戻すと外に出ていきます。こちらも画面の位置取得はjQueryで行い、要素の動きに関してはCSSで行います。

サンプル1同様<head>内にjQuery 1.x snippetを入力します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML

<div class="container ">
  <div class="box1"><p>box1</p></div>
</div>
<div class="container ">
  <div class="box2"><p>box2</p></div>
</div>
<div class="container ">
  <div class="box3"><p>box3</p></div>
</div>
CSS

.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 28px;
  color: #fff;
  background: #ccc;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .box1 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box2 {
  position: absolute;
  min-height: 100vh;
  background: #9fb7d4;
  box-sizing: border-box;
  text-align: left;
  width: 100%;
  padding: 10px;
}
.container .box3 {
  position: relative;
  min-height: 100vh;
  background: #9fb7d4;
  box-sizing: border-box;
  text-align: left;
  width: 100%;
  padding: 10px;
}
    @keyframes anim1 {
      100% { right: 0; }
    }
    @keyframes anim2 {
          0% { right: 0; }
    }
    @keyframes anim3 {
      100% { transform: translate(0, 0); }
    }
    @keyframes anim4 {
          0% { transform: translate(0, 0); }
    }
@media (min-width: 768px) {
.container .box2,
.container .box3 {
  width: 900px;
}
/* ** */}
JavaScript

$(function() {
$('.container .box2').css('right','-300px');
$('.container .box3').css('left','-300px');
$(window).scroll(function () {
$('.container').each(function(){
var obj = $(this).offset().top;    
var scroll = $(window).scrollTop();
var winH = $(window).height();
if (scroll > obj - winH / 2) {
$('.box2,.box3',this).fadeIn();
$('.box2',this).css({'animation': '0.8s forwards anim1'});
$('.box3',this).css({'animation': '0.8s forwards anim3'});
} else {
$('.box2,.box3',this).fadeOut();
$('.box2',this).css({'animation': '0.8s backwards anim2'});
$('.box3',this).css({'animation': '0.8s backwards anim4'});
}
});
});
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

jQueryで位置を取得して要素に変化

jQueryでスクロールした画面の位置を取得して要素に変化を付けます。

サンプル3

スクロールすると画面外にある要素が大きくなりながら画面内に入って来ます。このサンプルも要素の高さの無いlineですが要素に高さを大きく取ればboxとなり箱が大きくなります。こちらは画面の位置の取得も要素の動きもjQueryで行います。

他のサンプル同様<head>内にjQuery 1.x snippetを入力します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML

<div class="container ">
  <div class="box1"></div>
</div>
<div class="container ">
  <div class="box2"></div>
</div>
<div class="container ">
  <div class="box3"></div>
</div>
CSS

.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 28px;
  color: #444;
  background: #fff;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .box1 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box2 {
  position: absolute;
  height: 5px;
  background: #9fb7d4;
  width: 100%;
}
.container .box3 {
  position: relative;
  height: 5px;
  background: #9fb7d4;
  width: 100%;
}
JavaScript

$(function () {
$('.container .box2').css({'right':'0','width':'0'});
$('.container .box3').css({'left':'0','width':'0'});
$('.container .box2,.container .box3').each(function () {
var winH = $(window).height();
var obj = $(this);
var offset = obj.offset().top;
pos = 0,
$(window).scroll(function () {
scroll = $(window).scrollTop();
pos = (1 - (offset - scroll) / winH) * 2 * 100;
if (scroll > offset - winH) {
obj.width(pos + '%');
}
});
});
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

参考

[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法

サンプル4

スクロールすると画面外にある要素が大きくなりながら画面内に入って来ます。こちらは画面の位置の取得も要素の動きもjQueryで行います。

他のサンプル同様<head>内にjQuery 1.x snippetを入力します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML

<div class="container ">
  <div class="box1"></div>
</div>
<div class="container ">
  <div class="box2"></div>
</div>
<div class="container ">
  <div class="box3"></div>
</div>
CSS

.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 28px;
  color: #fff;
  background: #ccc;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .box1 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box2 {
  position: absolute;
  min-height: 100vh;
  background: #9fb7d4;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box3 {
  position: relative;
  min-height: 100vh;
  background: #9fb7d4;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
/* ** */}
JavaScript

$(function () {
$('.container .box2').css({'right':'0','width':'0'});
$('.container .box3').css({'left':'0','width':'0'});
$('.container .box2,.container .box3').each(function () {
var winH = $(window).height();
var obj = $(this);
var offset = obj.offset().top;
pos = 0;
$(window).scroll(function () {
scroll = $(window).scrollTop();
pos = (1 - (offset - scroll) / winH) * 2 * 100;
if (pos > 100) {pos = 100;}
if (scroll > offset - winH) {
obj.css({'width': pos + '%'});
}
});
});
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード


いかがでしたでしょうか、スクロール量に連動して要素が変化するのでパララックス効果系のレイアウトテンプレートで使うと良いかもしれません。

関連リンク

labs

  • カテゴリー:Labs