【Labs】スクロールで要素の拡大縮小と移動 - web design lab
home > labs > 【Labs】スクロールで要素の拡大縮小と移動

12月更新・前月(11月)の人気記事トップ10 12/07/2023

  1. ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  2. ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
  3. ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  4. ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  5. ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  6. (圏外↑) 【jQuery】入門11. switch文による条件分岐
  7. (圏外↑) 【Mac】Safariでソースコードを見る方法
  8. ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  9. (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
  10. (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー 【Labs】jQueryでフラッシュみたいな動きのリンクボタン

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


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

こんにちは（・∀・）

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

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】jQueryでフラッシュみたいな動きのリンクボタン
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村