ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/09/21
NEW
【週刊ドットインストール】 レッスン制作の進捗、256times「クラス一覧」が少しリニューアル
PREMIUM
実践!アプリ紹介ページに動きをつけよう
JavaScriptを使ってアプリ紹介ページに動きをつける方法について学んでいきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
【旧版】実践!アプリ紹介ページを作ろう
(全24回)
PREMIUM
PREMIUM
0%
詳解JavaScript Intersection Observer API編
(全13回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(14)
質問と回答
(18)
未完了
#01 JavaScriptで動きをつけていこう
(02:06)
無料公開中
開発環境
完成版の確認
未完了
#02 アニメーションの設定をしていこう
(02:52)
無料公開中
animateクラスの付与
アニメーションの設定
未完了
#03 Intersection Observer APIを使おう
(02:46)
無料公開中
main.jsの作成
Intersection Observer APIによる監視
未完了
#04 要素をふわっと表示させよう
(02:27)
appearクラスの付与
監視の停止
未完了
#05 要素が左右から現れるようにしよう
(02:30)
.slide-from-left、.slide-from-right
アニメーションの設定
overflow: hidden
未完了
#06 要素が現れるタイミングをずらそう
(01:52)
.delay、.delay-more
動作確認
未完了
#07 ヘッダーを固定配置しよう
(02:57)
position: fixed
余白の調整
scrolledクラスの設定
未完了
#08 スクロールしたか監視していこう
(03:02)
inViewObserverの設定
onScrollObserverの設定
未完了
#09 ヘッダーのスタイルを切り替えよう
(02:41)
scrolledクラスの付与
アニメーションの設定
未完了
#10 z-indexで要素の重なりを制御しよう
(02:31)
要素の重なり
z-index
未完了
#11 Bootstrap Iconsを使ってみよう
(02:42)
z-index
Bootstrap Iconsの導入
未完了
#12 アイコンのスタイルを整えよう
(02:46)
position: fixed
アイコンのスタイリング
scrolledクラスの設定
未完了
#13 スクロールしたらアイコンを表示しよう
(01:28)
scrolledクラスの付与
動作確認
未完了
#14 トップに戻る動きを制御しよう
(02:48)
戻るボタンの挙動
クリックイベントの設定
behavior: 'smooth'
#03 Intersection Observer APIを使おう
なぜ今回は options を定義せず、そのまま引数として渡しているのですか?
2022年6月3日
#04 要素をふわっと表示させよう
監視対象が 1 つの時も引数で配列を受け取るのですか?
2022年11月20日
クラス名の指定に . をつけるときとつけないときの違いはなんですか?
2022年2月18日
const target = document ... としていないのに、なぜ target が使えるのですか?
2022年2月18日
#05 要素が左右から現れるようにしよう
スクロールバーに関して、右横方向へはスクロールしますが、左横方向へはしません
2022年6月10日
#06 要素が現れるタイミングをずらそう
transition: .3s とすると transition-delay: .3s としたときと挙動が変わります
2022年2月16日
#07 ヘッダーを固定配置しよう
box-shadow の数値は常に教材と同じ値にするほうが良いのでしょうか?
2022年6月3日
position:fixed; にすると DotinstallWalking とダウンロードがくっつきます
2022年6月10日
header を position: fixed; とすると、 header の背景が変わるのはなぜですか?
2022年4月4日
header に top: 0; を設定するのはなぜですか?
2022年3月24日
CSS でクラスの前にスペースを入れる場合とそうでない場合の違いは何ですか?
2022年2月10日
#08 スクロールしたか監視していこう
空要素の div は実際にはどのような形をしているのですか?
2022年2月18日
threshold がない場合、どのように callback 関数が呼ばれるのですか?
2022年1月27日
#09 ヘッダーのスタイルを切り替えよう
なぜ target 要素が交差しない事がスクロールした事を意味するのですか?
2023年4月30日
ページ最上部を表示した際、空要素は root と交差した状態なのですか?
2022年9月24日
const を関数定義より後ろに書いてもエラーにならないのはなぜですか?
2022年3月24日
#14 トップに戻る動きを制御しよう
scrollTo でトップに戻れるのに、どうして a タグで挟むのでしょうか?
2022年9月3日
スクロールがスムーズに動きません
2022年1月27日
リリース情報(note)
今週は『実践!アプリ紹介ページに動きをつけよう』をリリースしました。
関連キーワード
基礎講座
(379)
初心者向け
(378)
HTML
(116)
CSS
(117)
JavaScript
(155)
Web制作
(31)
詳細情報
最終更新日
2021年12月2日
バージョン情報
Chrome 96 / VS Code 1.61.3