こんにちは！ 今回がらプログラミングでコードを実装させて、自作ホームページの見栄えも良く楽しめるようなレイアウトにするために「楽しめる実装プログラム・コード集」を公開していきたいと思います。
よろしくお願いします😀
これは海外のサイトでも数多く取り入れられている方法ですね。現在は、ふだん皆さんもよくホームページでは多く見られるようになったのではないでしょうか。
最近のWebサイトには、もう定番的な表示方法ですね
[ HTML ]
<img src=” xxxxx ” alt=””> のタグ内に画像ファイルを書いて下さい。
jQueryを読み込みますので、
<head>内には<script src=” https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script>を指定して下さい。
サンプル表の Resources ボタンから JavaScript ファイルのURLをコピペして下さいね。
[ CSS ]
transform: translateY(60px); の値によって、スライドする距離時間を調整させています。（任意に調整）
[ JavaScript ( jQuery ) ]
var target = $(this).offset().top; ターゲットの位置を確認しています。
var scroll = $(window).scrollTop(); スクロール量をここで取得させています。
if (scroll > target – windowHeight){
$(this).css(‘opacity’,’1′);
$(this).css(‘transform’,’translateY(0)’); ターゲットまでスクロールすると、下からフェードインします。
See the Pen NWNdNVg by bens-user (@ben1099user) on CodePen.
数々のものを書いて試したけれど、これが一番
数々のタイプで実装、実行させた中では、コードもそれほど長くないし、調整しやすいと思いますので、おすすめです。 JavaScriptでもっと短いコードで書く事もできるのですが、スクロールする直前に要素が「可視範囲」に入った瞬間に反応し、すでにフェードインした後の状態と感じてしまうので、ここでは公開しませんでした。
コメント