コーディング

wow.jsでスクロールをトリガーにしてアニメーションさせる

wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けています …

コーディング

jqueryを使ってレスポンシブサイトでパララックスを使う

僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように …

コーディング

jqueryでマウススクロールのスピードを調整する

スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。 スクロールのスピードを調整すると文章をじっくり読ませることができます。 コピペして使えるjque …

コーディング

サムネイルがアニメーションしてループするスライダー

よくサイトの横幅いっぱいに画像が流れていくやつをみます。 カルーセルスライダーと同じものなんですが、もっとダイエットしているシンプルなものを作りたかったので、調べていました。 じゃあ見つけました。 いつも参考にさせてもら …

コーディング

レスポンシブでの画像の振り分け方

先日、Webデザイナーでおそらく知らない人はいないだろうブログ・Webクリエイターボックスを読んでいてobject-fitプロパティなるものが衝撃だった! 知らないCSSがまだまだ出てくるんだなーと。 1行追加でOK!C …

コーディング

実装あるある・YOUTUBEのサムネイルをオリジナル画像にしたい。

同じようなマークアップを何度かしたことがあります。youtubeのオリジナルサムネイル機能を使うとかそういう話ではなくて、iframeの上に画像を乗せてクリックしたら動画が始まるってやつを作ります。とってもシンプルなので …

コーディング

jqueryでsliderを自作するなら

Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。 だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使 …

コーディング

jQueryで画面の一番下までスクロールしたかどうかを判定

Webデザイナーの平尾誠です。よくスクロールイベントを使うことがあるので備忘録。 jqueryを使って画面の一番下までスクロールしたかどうかを判定します。 ドキュメントの高さ – ウィンドウの高さ 単純に引いて値を求めて …

コーディング

Node.js初心者が使いやすいejsの便利なスニペット

LIG.incのWebでデザイナー平尾誠です。フロントエンドの開発環境が近年複雑すぎてついていけていない僕です。HTMLでコーディングすると、特にwordpressを想定しているブログなんかのコーディングをするととっても …

コーディング

そのWordPress大丈夫?今すぐできるセキュリティ対策!

Webデザイナーの平尾誠です。最近のフロントエンドはWordpressもさわれて当然みたいになってしまって悲しいです。そんでまたセキュリティ対策とか素人すぎて悲しいです。 割と頻繁にWordpressの脆弱性が見つかった …