タグ

ブックマーク / coco-factory.jp (6)

  • 動くWebデザインアイデア帳

    サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】:ugokuweb 【パスワード】:指定のページ数を【半角数字3桁】で入力 (例)30ページの場合は 030 と入力 ※黄色をご購入の方:7-2「検索」の表紙ページ数 ※ピンク(実践編)をご購入の方:9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 (jQueryのバージョン、プラグインのソースコードの書き方を含む) ソースコードの書

    動くWebデザインアイデア帳
    kjtec
    kjtec 2022/07/26
  • 順番に現れる(CSS×JS) | 動くWebデザインアイディア帳

    See the Pen 4-12 順番に現れる(CSS×JS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね!↑ 動きを実現する仕組み 要素の動き自体はCSSアニメーションで制御し、動きのスタートを遅らせるCSS animation-delayの秒数を、jQueryを使って制御する。 画面を開いたらすぐ動かす + スクロールをして動かす 両方に対応。 [使用するライブラリ] * jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。

    順番に現れる(CSS×JS) | 動くWebデザインアイディア帳
    kjtec
    kjtec 2022/07/26
  • 動くWebデザインアイデア帳

    サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】:ugokuweb 【パスワード】:指定のページ数を【半角数字3桁】で入力 (例)30ページの場合は 030 と入力 ※黄色をご購入の方:7-2「検索」の表紙ページ数 ※ピンク(実践編)をご購入の方:9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 (jQueryのバージョン、プラグインのソースコードの書き方を含む) ソースコードの書

    動くWebデザインアイデア帳
    kjtec
    kjtec 2022/01/25
  • 縦線が動いてスクロールを促す | 動くWebデザインアイディア帳

    /*====== 9-1-1 縦線が動いてスクロールを促す =======*/ /*スクロールダウン全体の場所*/ .scrolldown1{ /*描画位置※位置は適宜調整してください*/ position:absolute; left:50%; bottom:10px; /*全体の高さ*/ height:50px; } /*Scrollテキストの描写*/ .scrolldown1 span{ /*描画位置*/ position: absolute; left:-15px; top: -15px; /*テキストの形状*/ color: #eee; font-size: 0.7rem; letter-spacing: 0.05em; } /* 線の描写 */ .scrolldown1::after{ content: ""; /*描画位置*/ position: absolute; top:

    縦線が動いてスクロールを促す | 動くWebデザインアイディア帳
    kjtec
    kjtec 2021/09/28
  • 動くWebデザインアイデア帳

    サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】:ugokuweb 【パスワード】:指定のページ数を【半角数字3桁】で入力 (例)30ページの場合は 030 と入力 ※黄色をご購入の方:7-2「検索」の表紙ページ数 ※ピンク(実践編)をご購入の方:9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 (jQueryのバージョン、プラグインのソースコードの書き方を含む) ソースコードの書

    動くWebデザインアイデア帳
    kjtec
    kjtec 2021/05/19
  • 動くWebデザインアイデア帳

    サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】:ugokuweb 【パスワード】:指定のページ数を【半角数字3桁】で入力 (例)30ページの場合は 030 と入力 ※黄色をご購入の方:7-2「検索」の表紙ページ数 ※ピンク(実践編)をご購入の方:9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 (jQueryのバージョン、プラグインのソースコードの書き方を含む) ソースコードの書

    動くWebデザインアイデア帳
    kjtec
    kjtec 2021/05/19
  • 1