スクロール　ふわっと 　　テキスト　画像　css3

これＯＫ！

 

コピペ可能なサンプルサイト

https://gatch.site/css-fadein-animation/

スクロール時に対応しているソースがページ下の方にある。

※padやスマホの挙動は実機じゃないとスクロールの動きが確認出来ないことがある。ブラウザの簡易デバイスの画角にしたら動かないことがあるのでサーバーでは動くので大丈夫。

work/テキストアニメーション/text-anime-tsest/index9.htmlに稼働確認

 

自社ページでも稼働中

new-chance/profile/

 

https://gatch.site/css-fadein-animation/

フェードインサンプル ⑤ スクロール　の箇所参照！

最後は、スクロール時にフェードインするサンプルです。

スクロールに関しては、残念ながら css のみではできないので、javascript を使用します。ごめんなさい m(_ _)m

jQuery などのプラグインの使用せずに使えるコードですのでご安心を。

下記がデモになります。画面をスクロールすると表示され、上に戻ると非表示になります。

スクロールフェードインアニメーション
<div class="css-fade5">
  スクロールフェードインアニメーション
</div>

<style>
  .css-fade5--in {
    // アニメーション設定
    animation-name: fade-in5;
    animation-duration: 1s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 0; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in5 {
    0% {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    $(window).on({
      scroll: function(e) {
        var startY = document.querySelector('.css-fade5').getBoundingClientRect().top, //表示させたい対象
          windowHeight = window.innerHeight, // ブラウザの高さ
          offset = (windowHeight / 3) * 2 //オフセット 画面の2/3
        // 表示
        if (startY < offset) {
          document.querySelector('.css-fade5').classList.add('css-fade5--in')
          // ブラウザの外になったら消す
        } else if (startY > windowHeight) {
          document.querySelector('.css-fade5').classList.remove('css-fade5--in')
        }
      },
    })
  })
</script>

 

 

 

ＣＳＳに関しての基本的解説は↓

 

アニメーションを定義する

「animation-name」でアニメーション名を定義しますが、好きな英数字でオッケーです。今回は「fadein」にしています。

「@keyframes fadein」のように定義したアニメーション名を使用します。

「animation-duration」はアニメーションの長さを指定するプロパティで、今回は「2s」 なので「2秒」ということですね。

1sだとFirefoxでカクつきが目立ったりするので2sとしています。

@keyframesでアニメーションを制御

「@keyframes」はアニメーションの流れを制御するための記述です。「from」が開始、「to」が終了ですが、必要に応じて30%、70%など途中にもルールを増やすことができます。

Cocoonを使用している方は注意！

「from〜to」は「0%〜100%」と数字で指定することも可能ですが、Cocoonの「高速化設定」でCSSを縮小していると「0%」で指定した時にアニメーションが動かない不具合があります。

これはCocoonでHTML、CSS、JavaScriptの縮小に使用している「PHP Function to Minify HTML, CSS and JavaScript」というライブラリが原因のようです。

いずれは不具合が改善されるかもしれませんが、とりあえず「0%」ではなく「from」を使っておけば問題ありません。

「opacity」が透明度を指定するプロパティで、今回だと開始時に0.0（透明）、終了時に1.0（不透明）でフェードイン効果を表現しています。

他にも例えば「from { color:#000; }（黒）」、「to { color:#fff; }（白）」と指定すれば、黒から白へ色が変化するアニメーションが追加されます。

transformで変形を制御

「transform」は要素を変形させるプロパティです。移動(translate)、縮尺(scale)、回転(rotate)、傾斜(skew)、奥行き(perspective)、自由変形(matrix)など色々ありますが、今回は「移動(translate)」を使用しています。

「translateY」がY軸（縦方向）、「translateX」にするとX軸（横方向）の動きを指定できます。

今回だと開始時が「translateY(20px)」で下方向に20pxの位置、終了時が「translateY(0)」で元の位置に戻る指定ですね。

これを「translateY(-20px)」と負の値にすると、上方向に20px動くことになります。

ベンダープレフィックスはいらないよ

最近はブラウザのことを気にせずにCSSのアニメーションを気軽に使えるようになりました。「animation」プロパティは -webkit-、 -moz- などのベンダープレフィックスも必要なくなっています。

iOS 8.0以下と、Android 4以下に対応させる場合は -webkit-のベンダープレフィックスが必要ですが、2018年7月現在でiOS 8.0のシェアは0.5%、Android 4以下も10%未満なので無視して良いと思います。

 

 

work/テキストアニメーション/text-anime-tsest/index9.htmlに稼働確認

 

自社サイトでも動いている

スマホもＯＫ

(簡易確認のＱＲコードをスマホでテスト確認の場合は動かないが、サーバー側では大丈夫)

 

 

ＣＳＳ

 

<style>

.css-fade5 {}

 

.css-fade5–in {
-webkit-animation-name: fade-in5;
animation-name: fade-in5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes fade-in5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
}

@keyframes fade-in5 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

</style>

 

ｈｔｍｌ

<script>
document.addEventListener(‘DOMContentLoaded’, function() {
$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.css-fade5‘).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の3/3
// 表示
if (startY < offset) {
document.querySelector(‘.css-fade5‘).classList.add(‘css-fade5–in‘)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.css-fade5‘).classList.remove(‘css-fade5–in‘)
}
},
})
})
</script>

<div class=”row mb-md-5 mb-3 justify-content-center”>

<div class=”col-md-6 mt-4 text-center css-fade5“>
<img src=”../image/profile/item2.gif” class=”img-fluid mx-auto d-block” alt=”history”/>
<p>会社沿革</p>
</div>

</div>

 

 

 

もし外部jsにして読み込むらなら

 

$(function() {

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation001’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation001’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation001’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation002’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation002’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation002’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation003’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット 画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation003’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation003’).classList.remove(‘animation-feadin1’)
}
},
})

});

 

 

 

ここから下の情報は不確定ややってもならなかったり、一部できたりなのであまり参考にはならないので注意

 

専務からの情報

 

「スクロールするとふわっとなる」

で検索すると、こんなのがありますが、

 

https://theorthodoxworks.com/web-design/scrollanimation/ 

テキストアニメーションテスト/index8.html

 

css3のアニメーションを使うとできる。

css3アニメーション　ふわっとで下記見つかった。↑の意味についてわかる

https://web-ashibi.net/archives/1952

 

 

これだとＰＣはなるがスマホがならない！！↓

index8.html一連を参考サイトと照らしてまとめてみる

 

cssのソース

<style>

#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;
}

.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

</style>

 

 

html

※このスクリプトはスクロールとアニメーション対応したやつ

<script>
$(function() {

$(‘#animation‘).css(‘visibility’,’hidden’);
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$(‘#animation‘).each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition – windowHeight + 100){
$(this).addClass(“fadeInDown“);
}
});
});

});
</script>

 

<div>
<p id=”animation”>ここの文字が現れる</p>
</div>

 

 

 

 

 

 

https://web-loid.net/web/scroll-effect-js/

 

https://beginners-high.com/scroll-display/ 

 

https://qiita.com/dee909/items/99bf69ddd06fe087f045