jQuery

raindrops.js 水面アニメーション

1. はじめに

『raindrops.js』は水面に滴が落ちるアニメーションです。

完成系は下記になります。

Gifが高速なので動画ファイルを貼っておきます。

2. ファイルをダウンロードする。

GitHub : raindrops-js-github.com

公式サイト : raindrops-js.com

以前以下の記事にて導入と設置をしていますのでわからない方はそちらをご覧くだ

もっとみる

particles.js 背景アニメーション

1. はじめに

『particles.js』は背景に幾何学模様や雪などの模様をカスタマイズできる。

今回の完成形です。

2. 導入

プラグインを公式GitHubからダウンロードする。

公式サイト:particles-js-github.com

ダウンロード方法がわからない場合は以前の記事をご覧ください。

3. ファイルの設置と読み込みを記述

今回使用するファイルは『「particl

もっとみる

lazyload(lazysizes)による画像の遅延読み込み

画像などを遅延読み込みをするlazyloadを使った手法をご紹介します。
今回はlazyloaderの中でも軽量なlazysizesというライブラリを使った方法で話します。

1.ライブラリを読み込ませる

<script src="lazysizes.min.js" async></script>

lazysizes.min.jsを読み込ませる。lazysizesの実行タイミングをwindow

もっとみる

「高校文化連盟」webシステムのこと:「web展覧会システム」機能を追加しました。 僕の本職はソフト会社の社長なのです(社員0人)。

コロナの影響で、「美術・書道・写真・華道」といった文化部の展示会の中止が相次いでいます。10年前から弊社で運用している新潟県文化連盟のグループウエアに画像エントリー機能を追加しました。

これから、展覧会モジュールを作っていきます。この2つの機能によって、ネット上で、作品を展覧会を行えます。生徒の創作活動をサポートする事ができるのです。

来年度より全国の都道府県高校文化連盟の皆様にお使いいただく

もっとみる
ありがとう。DMいただければ、お礼に「幸運な病」献本差し上げます。
2

plainなJavaScriptで書くAjax

cssでアニメーションを作るようになると、jQueryの出番がないサイトも多くなってきます。

個人的にはjQueryなしではセレクタ指定の仕方よりも、plain(素の)JavaScriptでAjaxどう書くんだ?となるので、まとめておきたい。

まずはjQueryでどう書いているか。

JavaScript(jQueryあり)

var ajaxUrl = '';$.ajax({ cache:

もっとみる

Djangoで個人的にハマった事。その4

個人的な備忘録です^^
ハマったって程ではないけど少し期間経った時に忘れてそうなので残しておこうかと。

1.__init__() got an unexpected keyword argument 'instance'エラー

forms.pyで定義したフォームを生成しようとしたらエラーが発生した。
元々ちゃんと動いてたのにな〜って思ったらFormをforms.ModelForm⇨forms.

もっとみる
スキありがとうございますm(^ ^)m

コーダーがjQueryを覚えていく、使っていく方法

コーディングを勉強して、HTMLの組み方やCSSの設定ができるようになった人が次に取り組みたいのがプログラムの部分。というわけでjQueryへの取り組み方について書いてみます。

リッチコンテンツ

現在のWebサイトはアニメーションすることが一般的になっています。画像が横に移動したり、Webページが上下に移動したり、文字が動いたりするとエンドユーザの目を引くことが多いからですね。これら動きのある

もっとみる

Djangoで個人的にハマった事。その2

個人的な備忘録です。
もっとスマートな書き方やもっと適切な方法があるんだろうなと思うけど、期限間に合わせるために力技使ってるとこもあります^^;
気付いたら適時更新や修正していきたい。

1.カスタムタグ定義
サジェスト機能でhiddenにキー値を、inputTextに値を設定する為にmodels.pyの__str__でキー値と値をパイプ区切りの文字列で返却。
キーを取得するためのカスタムタグと、

もっとみる
スキありがとうございますm(^ ^)m
2

animatedModal.jsの使い方 モーダルウィンドウ

1. はじめに

『animatedModal.js』はフルスクリーンモーダルウィンドウを表示してくれる『jQueryプラグイン』です。

下記の様な感じになります。

2. 必要なファイルのダウンロードと設置

公式ページからダウンロードする。

公式ページ : animated-modal-js.com

公式ページの中段あたりに『DOWNLOAD VERSION 1.0』をクリックしてダウン

もっとみる

リッチコンテンツ

最近のホームページデザインは、一周して昔のような動くデザインに戻ったようです。
昔はFlashやjavascriptを使ってトップページに動きのある箇所を作っていました。
最近の流行はjQueryのinview等を使って、スクロールされた時に画面内に入ったらcssで細かくアニメーションさせるのが主流のようです。
たまにストリーミング動画を背景にしたりするものも見られます。
リッチコンテンツと呼ばれ

もっとみる
ありがとうございます
5