javascriptで作ったカウントダウンタイマーをワードプレスに実装する

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちら javascriptでカウントダウンタイマーを作る

ワードプレスに実装してみる

前回作ったscriptの部分を、新たにjsファイル(○◯.js)にしてFTPサーバの任意の場所に保存します。
“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む

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

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

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

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

jQueryで座標を取得してみる

どうも!前回からちょっと間が空いてしまいましたが、すっかり花粉の季節ですね(>< ); 皆さまいかがお過ごしでしょうか?私はマスクとメガネの日々を過ごしております。マスクとメガネ、二つも耳に掛かっていると本当にストレスなんですよね(´・ω・`)…
さて、今回はjQueryで座標を取得してみようの巻です。
マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
このような物を作ってみます。↓

zahyo-wp01

目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.ソース
“jQueryで座標を取得してみる” の続きを読む

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

皆さまごきげんよう!
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか?
大晦日までには不要なものを全部捨ててやろう!と張り切っている私ですが、まだ何も手を付けていません(^^;

ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた!伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた(笑)『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう!」なんて本当に出来るのでしょうか?!(^^;A

ま、それはさておき(笑)今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
“ワードプレスの背景に雪を降らせてみよう” の続きを読む

jQueryで雪を降らせてみよう

皆さまこんにちは!

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

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

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

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

jQuery でタブを実装してみよう!

皆さまこんにちは!
暑さ寒さも彼岸まで。ようやく過ごしやすい季節になってまいりましたね!スポーツの秋、読書の秋、色々な秋がありますが、私はやはり「食欲の秋」でしょうか(笑)
さて本日は勉学の秋、jQueryとcssを連携させて、タブでページを切り替えて表示させてみようと思います。
“jQuery でタブを実装してみよう!” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

皆さまこんにちは!厳しい残暑の候、いかがお過ごしですか?
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。

〜その壱〜を読んでからでないと何のこっちゃ?だと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
前回の記事はこちらです。

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜

インターネッツの皆様こんにちは!
各地で猛暑記録更新ですね〜(++); こう毎日毎日暑いと、もはや出掛ける気力も無いのでブログが捗ります(笑)

本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみよう!の巻です。

ちょっと間が空いてしまいましたが、前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでからの方がより分かりやすいと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。
masonryって石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む

skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

パララックスもすっかり定着した感のある今日この頃( ˘ω˘)…

webデザイナー同志の皆さま、こんにちは(^^)ゞ
本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみようの巻です。
まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます!まずはダウンロードしてみよう。
“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

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

お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;

さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。

デモを作ってみましたので、こちらをご覧下さい。

まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね!

<script src="js/skrollr.min.js"></script>
  <script>
      var s = skrollr.init();
  </script>

デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…

  1. data-○○=”ここに普通にcssを書けばよい”
  2. 色はrgb(a)かhsl(a)で指定する。
  3. 単位を揃える。%とかpxとかを混ぜて使わない。
  4. ベンダプレフィックスは必要なし。
  5. skrollrにはmodeが二つあって、[absolute mode] とは、スクロール量で変化させるモード。
  6. [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。

“パララックスが簡単に実装出来る!skrollrの使い方” の続きを読む