ウェブサイトの任意の要素ににp5.jsを出力する

皆さまごきげんよう!

未だ正月病が抜けきらずボーッと生きてますが、そんな時こそ
”やる気が出るまで待っていないで、とりあえず始めてみる”
ことを今から実践していきたいと思います!
不思議なことに、気づけば夢中になってやっていますからお試しください(笑)


さて本日は前回の続きになりますが、p5で作ったスケッチを今度は任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsを出力する” の続きを読む

ウェブサイトの背景画像にp5.jsを使う方法

皆さま、明けましておめでとうございます。

今年は兎にも角にもアウトプットの年にしていこうと思っております!
(毎年同じことを言っている様な気もしますが気のせいでしょう😅)
どうぞ宜しくお願いしますm(_ _)m

さて、本日はp5.jsで作った作品をウェブサイトの背景画像にするにはどうするか?の備忘録です。動画を使わなくても、画面に動きが出て目を引くこと間違いなしですよ!
意外と簡単に出来ますのでサクッとやってみましょう。

“ウェブサイトの背景画像にp5.jsを使う方法” の続きを読む

コンテンツをプロテクトしてくれるcss

皆さまご機嫌よう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしましたが、私のワードプレスのテーマといつのまにか互換性が無くなってしまったのでしょうか?原因不明なのですが、全く効いていないことに最近気付きました((((( ;゚Д゚)))ガクガクブルブル

そこで今回は、一行でコンテンツをプロテクトしてくれるcssのご紹介です。
“コンテンツをプロテクトしてくれるcss” の続きを読む

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

Photo on Foter.com

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

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

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

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

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

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

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。
“cssアニメーションで文字を点滅させてみよう” の続きを読む

ワードプレスをカスタマイズする方法

皆さま、ごきげんよう。
ワードプレスのカスタマイズといえば色々な方法があると思いますが、本日は私のカスタマイズの仕方について語ってみたいと思います。
twenty seventeenをベースにしたこのブログをカスタマイズした時の注意点や、調べ方についての備忘録です。

ベースとなるテーマを決める

“ワードプレスをカスタマイズする方法” の続きを読む

position: sticky; がスクロールで要素を固定するのに便利すぎた件

皆さまごきげんよう!
今日はCSSのposition: sticky; がとても便利だったので備忘録としてご紹介します(^^)

ちょっと前に当ブログでご紹介したプラグインQ2W3 Fixed Widgetですが、ワードプレスの更新をして以降、ページにエラー表示が出る様になってしまいまして(´ω`。)
プラグインは便利ですが、何かの更新の度に必ずしも互換性が保たれる保証はありませんし、プラグインを頼らずに何か出来ないかと調べたところ…とても簡単にほぼ同じことが出来てしまうcssがあったんです!

それがposition: sticky;です!
“position: sticky; がスクロールで要素を固定するのに便利すぎた件” の続きを読む

スマホでもパララックスを実装してみよう、の巻

皆さまごきげんよう!梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか?

皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪

さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。
“スマホでもパララックスを実装してみよう、の巻” の続きを読む

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

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

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

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

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

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

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

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

jQueryで雪を降らせてみよう

皆さまこんにちは!

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

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

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

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