WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

2018-08-21から1日間の記事一覧

object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは? jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…