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

2022.1.16 更新

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

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

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

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

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

皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの?!ということで、(笑) 本日はjQueryで電光掲示板のようなもの(ティッカー)を作ってみようと思います。

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

それでは早速やってみましょう。
“jQueryでティッカーを作ってみよう” の続きを読む

ワードプレスの背景に雪を降らせてみよう

2022.1.10 更新

皆さまごきげんよう。

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

目次

  1. cssをワードプレス用に書き換える
  2. ワードプレス用にjsファイルを作る
  3. ワードプレスに外部ファイルを読み込ませる
“ワードプレスの背景に雪を降らせてみよう” の続きを読む

jQueryで雪を降らせてみよう

皆さまこんにちは!

早いもので今年も残すところあと1ヶ月、光陰矢の如し、ですね。皆さま今年の目標は達成出来ましたでしょうか?
私は残念ながら、未だ何ひとつ達成出来ないままムダに年だけ取るという(笑)ってまだまだあと残り1ヶ月、最後まで頑張りますよ!(^^;A

ま、それはさておき(笑)今日はちょっと季節を感じる、jQueryで雪を降らせてみようの巻です。

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

今回作ってみるものはこちら♪
“jQueryで雪を降らせてみよう” の続きを読む

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

2022.1.16 更新

skrollrでパララックスしよう

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

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

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

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