よくある、スクロールに連動して要素がふわっとあらわれるのを実現するスクリプトやプラグインがあれば教えて下さい

あと、スクロールに連動せず、背景が固定されて、切り替わる方法も知りたいです

さらに、動画を背景画像のように扱う方法も知りたいデス

スレッドにわける必要があるかとおもいましたが、一気に聞いちゃいました

m.ts10806

2019/11/01 12:26

スレッドわけられていてもわけられていなくても丸投げです。自身が調べたこと試したことも必要ですし、文字だけで「こういうもの」を伝えるのは無理があります。せめて自身のイメージに近い動きをしているサイトなど出典を提示してください

行動規範の内容に同意します

回答2件

jQueryも視野にいれているならほとんどanimate処理でできます。
ちょっと拡張的なことをやるならjQuery-uiも一緒に呼んでおくとよいでしょう

sample

数字が変わるくらいはjQueryでできますが

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('#fuwa').css({opacity:0}).animate({opacity:1},1000);
5});
6</script>
7<div id="fuwa">ふわっと</div>

uiなら色を返るとか直接数字で書かなくても調整してくれます

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<script>
4$(function(){
5  $('#fuwa').css({opacity:0,backgroundColor:"red",color:"yellow"}).animate({opacity:1,backgroundColor:"blue",color:"aqua"},1000);
6});
7</script>
8<div id="fuwa">ふわっと</div>

投稿2019/11/01 12:27

編集2019/11/01 12:55

yambejp

総合スコア114839

tomix

2019/11/01 12:43

jQuery-uiですか、モバイルＵｉ作った時に使った以来いじってませんが、相当バージョンが変わってるんだと思います。拡張的って具体的にどんなことですか

tomix

2019/11/01 23:14

ふわっとはできました。でもスクロールに連動する部分は記述が必要ですよね

tomix

2019/11/01 23:20

でも、CSSで指定できるのはわかりやすいですね

行動規範の内容に同意します

スクロールに連動して要素がふわっとあらわれるのを実現するスクリプトやプラグインがあれば教えて下さい

検索すればいくらでも見つかると思いますがほとんどはwindow.scrollで発火してoffsetで要素の位置を取得してscrollTopで表示領域の上の位置を取得して画面領域を引いてifでfadeInやらfadeOutやらを制御してます。

別の質問の使い回しですが以下のようなjQueryを書くことで
footerが表示領域に入ったら#topBtnをフェードイン
表示領域外になったらフェードアウトすることができます。
（#topBtnはあらかじめdisplay:noneしてあるとする）

HTMl
1
2<header>
3</header>
4
5<div class="contents">
6
7<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
8ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
9ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
10ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
11ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
12ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
13ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
14ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
15ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
16ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
17ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
18ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
19ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
20ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
21ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
22ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
23ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
24ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
25ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
26ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
27ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
28ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
29ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
30ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
31
32 <a href="#" class="topBtn" id="topBtn"><img src="img/pagetop.png" alt="ページトップ"></a>
33
34                    <footer>
35                     <div class="footer">
36                        <ul class="clearfix">
37                          <li>
38                            <a href="#">sample</a>
39                          </li>
40                          <li>
41                            <a href="#">sample</a>
42                          </li>
43                          <li>
44                            <a href="#">sample</a>
45                          </li>
46                          <li>
47                            <a href="#">sample</a>
48                          </li>
49                          <li>
50                            <a href="#">sample</a>
51                          </li>
52                          <li>
53                            <a href="#">sample</a>
54                          </li>
55                          <li>
56                            <a href="#">sample</a>
57                          </li>
58                          <li>
59                            <a href="#">sample</a>
60                          </li>
61                          <li>
62                            <a href="#">sample</a>
63                          </li>
64                          <li>
65                            <a href="#">sample</a>
66                          </li>
67                          <li>
68                            <a href="#">sample</a>
69                          </li>
70
71                          </ul>
72                        </div>
73                      <!-- footer -->
74                </footer>
75
76                </div>
77

CSs
1
2body {
3    font-family: "Verdana", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo","   sans-serif";
4    color: #000;
5    background:#fff;
6    font-size:0.9em;    
7}
8
9.contents{
10    max-width:950px;
11    background:#fff;
12    margin:0 auto;
13    line-height:140%;
14    position:relative;
15}
16
17/*フッター*/
18
19.footer{
20    position: relative;
21    background:#960;
22    padding: 10px 0 20px 0;
23    overflow: hidden;
24    border-radius:10px;
25    -webkit-border-radius:10px;
26    -moz-border-radius:10px;
27    margin-top:25px;
28    height:30px;
29}
30
31.footer  ul{
32    width: 90%;
33    margin:0 auto;
34}
35
36.footer li {
37    float: left;
38    width: 140px;
39    font-size: 11px;
40    text-align: left;
41}
42
43.footer li a{
44    color:#fff;
45    text-decoration:none;
46}
47
48.footer li a:before{
49    content:"□ ";
50}
51
52
53.topBtn {
54  position:fixed;
55  right:0px;
56  display:block;
57}
58
59#topBtn {
60  position: fixed;
61  bottom: 0;
62  display: none
63}

jQuery
1$(window).scroll(function(){ //スクロールされたら関数実行
2  var footer = $('footer').offset().top - $(window).height(); //footerのページ上からの座標 - ウィンドウサイズ
3  var now = $(document).scrollTop(); // ページ上からの現在位置
4  if(now>footer){
5    $('#topBtn').fadeIn('slow'); //フェードイン
6  } else {
7    $('#topBtn').fadeOut('slow'); //フェードアウト
8  }
9});

サンプル
簡単に解説入れときました。

footerのページ上からの座標 - ウィンドウサイズ

の部分ですがウィンドウサイズを引かないとウインドウの上まで要素が行かないとフェードインしなくなってしまいます。

暇な時間があったので作ってみました。

HTML
1<div id=box1>
2  hogehoge~
3</div>
4<div id=box2>
5  hogehoge~
6</div>
7<div id=box3>
8  hohohoho~
9</div>
10<div id=box4>
11  hogehoge
12</div>

CSS
1* {
2  margin: 0;
3  padding: 0
4}
5div {
6  height: 400px;
7  opacity: 0
8}
9#box1{
10  background: blue
11}
12#box2{
13  background: yellow
14}
15#box3{
16  background: green
17}
18#box4{
19  background: brown
20}

jQuery
1$(window).on('load scroll',function(){
2  var height = $(window).height();
3  var now = $(document).scrollTop();
4  for(i=1;i<=4;i++){
5    var element = $('#box'+i);
6    var footer = element.offset().top - height;
7    if(now>footer){
8      element.animate({opacity:1.0},{duration:500,easing:'swing'});
9    }
10  }
11});