jQueryと自作のJavaScriptの設置方法 | 動くWebデザインアイディア帳
このサイト内に掲載している多くの動きは、比較的難易度が低いjQueryというライブラリを採用しています。 jQueryは、JavaScriptを短く簡単に記述できるライブラリです。 代表的なライブラリはその他にも、React、Vue.js、Angular.js などがあり、使用するライブラリによってソースコードの書き方や難易度は変わってきます。 ここでは、jQueryと、jQueryの文法で書いた自作のJavaScriptをHTMLに設置する方法を解説します。 jQueryの設置方法 jQueryのHTMLへの設置方法は、以下の2つの方法があります。 jQueryのサイトからソースコードをダウンロードして設置する方法jQueryをダウンロードせずにインターネット経由でjQueryを読み込んで設置する方法 今回は2.jQueryをダウンロードせずにインターネット経由でjQueryを読み込んで
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた
TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング 簡単にCSSでカーニング出来るんだーやったーとか思ってたのですが、また興味深いツイートがありました。 ベタ組みは読みにくいからなんでも自動詰め組みを指定しよう、というような書き方には違和感がある。このブログでは句読点の後ろが詰まってしまっているが、これで「読みやすい」と言えるのか。私は違うと思う。/ 文字詰めできるCSSの… https://t.co/ravQr0CPy8 — Fukazawa Kojiro (@witch_d
jQueryで動く「きっかけ」を指定しよう | 動くWebデザインアイディア帳
このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。 「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」 といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。 動くきっかけを指定する基本的な記述
ふわっ（CSS） | 動くWebデザインアイディア帳
See the Pen 4-1 最低限覚えておきたい現れ方 - ふわっ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS アニメーションで実現するフェードインの現れ方です。 このサンプルは、画面を開いたらすぐに動きます。 スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。 HTMLの書き方 <div class="fadeIn">ふわっ（その場で）</div> <div class="fadeUp">ふわっ（下から）</div> <div class="fadeDown">ふわっ（上から）</div> <div class="fadeLeft">ふわっ（左から）<
jQuery とCSS を組み合わせてスクロールをしたら要素を動かす | 動くWebデザインアイディア帳
jQueryとCSSアニメーションを組み合わせてスクロールをしたら要素を動かす方法をご紹介します。 スクロールをしたら要素を動かす仕組み HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。 （例）スクロールをしたらふわっと出現させる 動くきっかけの起点となるクラス名 「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。 See the Pen 「画面が読み込まれた後に動く場合」と「画面がスクロールされたら動く場合」の 動くきっかけの指定をまとめる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. HTMLの準備 ① HTM
順番に現れる（CSS） | 動くWebデザインアイディア帳
See the Pen 4-10 順番に現れる（CSS） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS アニメーションで実現する順番に現れる方法です。 このサンプルは、画面を開いたらすぐに動きます。 スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。 ①スタート時は要素自体を透過0 にするため、opacity:0; を指定する .box{ opacity: 0; } ②動かしたい動き（今回は” ふわっ” を採用）＋動きのスタートを遅らせるCSS animation-delay: 秒数の値;をあわせて指定します。 出現させたい要素の順番に遅延時間を増やしていくと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
