cssアニメーションで文字を点滅させてみよう

2022.1.16 更新

皆さまごきげんよう。
サイトのどこかに小さな動きがあると一瞬目を惹きますよね。
本日はcssで文字を点滅させてみようと思います。

1.CSS animationを使って文字を点滅させる

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。

“cssアニメーションで文字を点滅させてみよう” の続きを読む

jQueryでティッカーを作ってみよう

2022.1.23 更新

皆さまごきげんよう。

よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。

ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの?ということで、 本日はjQueryで電光掲示板(ティッカー)を作ってみようと思います。

流す文章が一つのみなら css3 のアニメーションでも良いのですが、文章がいくつかあり、その文章が増えたり減ったりする場合、jQueryでプログラムを書いておくと便利なのです。

それでは早速やってみましょう。

目次

  1. css3でアニメーションの設定をする
  2. jQueryで関数を作る
  3. setTimeout関数でタイマーをセットする
“jQueryでティッカーを作ってみよう” の続きを読む

ウェブサイトに雪を降らせる!jQueryの背景アニメーションの作り方

2022.1.10 更新

皆さまごきげんよう。

本日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。

目次

  1. cssをワードプレス用に書き換える
  2. ワードプレス用にjsファイルを作る
  3. ワードプレスに外部ファイルを読み込ませる
“ウェブサイトに雪を降らせる!jQueryの背景アニメーションの作り方” の続きを読む

jQueryで雪を降らせてみよう

2022.1.29 更新

皆さまごきげんよう。

本日はjQueryで雪を降らせてみようの巻です。

今回はdivを雪の一粒に仕立て、jQueryでランダムな数値を取得・複製し、それをcssのアニメーションでループさせて雪を降らせてみようと思います。

今回作ってみるものはこちらです。

目次

  1. htmlファイルを作る
  2. windowsサイズを取得する
  3. ランダムな数値を取得して、forで繰り返し処理を行う
  4. cssでアニメーション設定をする
“jQueryで雪を降らせてみよう” の続きを読む

skrollrを使ってパララックスのシングルページサイトを作ってみました

2022.1.16 更新

skrollrでパララックスしよう

本日は 、簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使ってパララックスのシングルページサイトを作ってみましたので、取り入れ方をご説明します。

前回の記事をお読みになるとスムーズに理解できますので、どうぞご覧ください。

パララックスが簡単に実装できる! skrollr の使い方

“skrollrを使ってパララックスのシングルページサイトを作ってみました” の続きを読む

©2012 freyjasrm.com