Webデザイナーの平尾誠です。 普段はソース管理をBitbucketとSourcetreeでやってます。 GitHubはわからない。かなしい。 だけどエンジニアとのファイル共有をするならGitでしょてことで、僕もこれから学習します。 Git…
この記事を読む
「コーディング」の記事一覧
この記事を読む
慣性スクロールで余韻をもたせるプラグイン jquery.easeScroll.js
慣性スクロール系プラグインは沢山あるんですが、いつもページ下に変な余白が出来たりします。 とにかくうまくいった試しがない。 マウススクロールをスムーズに動かしたい 慣性がついた余韻があるスクロールがしたい って人にへ向けた記事です。 慣性ス…
この記事を読む
お手軽なスマホでジャイロを用いたparallax.js
これ以上ないんじゃないかってくらい簡単で便利なJsのプラグインを発見！ スマホで見たら傾けたときに、ふわふわっと傾きます。 これは携帯に内蔵されているジャイロセンサーを使用したものです。 PCで見たときはカーソルに追従するようにクラス名を付…
この記事を読む
【jquery】ユーザビリティをよくするサンプルコードまとめ
制作現場では決まって時間がない。 だから決まって使うソースコードは使いまわしたいですよね。 コピペで使える便利なコードを、役割別にまとめました。 今後もどんどん追加していくので、ブックマークとしておくと困った時に役に立つかも。 コードばかり…
この記事を読む
特定の時間で表示を変更する時限式javascript
今年のエイプリルフールは休日です。 休みの日に出社しなくてもいいように、特定の時間が来たら表示して、終わったら消す。 そんなソースコードを紹介します。 時限式で実装できるのでとてもおすすめです。 [crayon-5bf0a94b70b115…
この記事を読む
写真をインスタ風にするCSSフィルターセット”Instagram.cssとfilter.css”
下手にPhotoshopで加工するよりinstagramの方がいけてる時あるよね正直。 デフォルトであるフィルタセットを使った方が、風合いが出ていいなって。統一感出すの簡単やし。 そんな時のCSSフィルターセットのInstagram.css…
この記事を読む
テキストにインパクトを与えるBlotter.jsをこれから多用しそうな予感
テキストにとてもインパクトを与えることができるJavascriptを発見しました。 その名もBlotter.jsです。 読み込んでテキスト打ち替えておしまい。超簡単。 Blotter.jsをダウンロード 公式サイトはこちらです。 https…
この記事を読む
Javascriptの慣性スクロールはSCROLL MANAGERを使う
とっても便利なススクロール系Jsを発見しました。 しかもMITライセンスときたら、使わせてもらうしかない。 では手を合わせて。いただきます。 SCROLL MANAGER とりあえず見てもらえるとわかります。 アニメーションが小気味良くて気…
この記事を読む
画像スライダーを作るのにSwiper.js以外のプラグインはもう要らない
かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特徴は下記の通りです。…
この記事を読む
Adobe XDとSketchで飲食店のサイトを作る【後編】
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます！ そして前…
この記事を読む
wow.jsでスクロールをトリガーにしてアニメーションさせる
wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けていますがテッパンですね。 …
この記事を読む
jqueryを使ってレスポンシブサイトでパララックスを使う
僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように工夫したい→パララッ…
この記事を読む
jqueryでマウススクロールのスピードを調整する
スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。 スクロールのスピードを調整すると文章をじっくり読ませることができます。 コピペして使えるjquery [crayon…
この記事を読む
サムネイルがアニメーションしてループするスライダー
よくサイトの横幅いっぱいに画像が流れていくやつをみます。 カルーセルスライダーと同じものなんですが、もっとダイエットしているシンプルなものを作りたかったので、調べていました。 じゃあ見つけました。 いつも参考にさせてもらっている http:…
この記事を読む
ブックマーク必須 コピペして使うCSSアニメーションのスニペット 「animista」の使い方
めっちゃアニメーションの微調整がめんどくさいWebデザイナーの平尾誠です。 とはいえ、Web制作においてアニメーションはユーザビリティにおいて、今やなくてはならない存在です。 でも公開間近にアニメーションを追加しろ！！なんて言われることも弱…
この記事を読む
レスポンシブでの画像の振り分け方
先日、Webデザイナーでおそらく知らない人はいないだろうブログ・Webクリエイターボックスを読んでいてobject-fitプロパティなるものが衝撃だった！ 知らないCSSがまだまだ出てくるんだなーと。 1行追加でOK！CSSだけで画像をトリ…
この記事を読む
実装あるある・YOUTUBEのサムネイルをオリジナル画像にしたい。
同じようなマークアップを何度かしたことがあります。youtubeのオリジナルサムネイル機能を使うとかそういう話ではなくて、iframeの上に画像を乗せてクリックしたら動画が始まるってやつを作ります。とってもシンプルなのでyoutubeのAP…
この記事を読む
jqueryでsliderを自作するなら
Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。 だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使ってください。 HT…
この記事を読む
jQueryで画面の一番下までスクロールしたかどうかを判定
Webデザイナーの平尾誠です。よくスクロールイベントを使うことがあるので備忘録。 jqueryを使って画面の一番下までスクロールしたかどうかを判定します。 ドキュメントの高さ – ウィンドウの高さ 単純に引いて値を求めて、着火するという仕組…
この記事を読む
Node.js初心者が使いやすいejsの便利なスニペット
LIG.incのWebでデザイナー平尾誠です。フロントエンドの開発環境が近年複雑すぎてついていけていない僕です。HTMLでコーディングすると、特にwordpressを想定しているブログなんかのコーディングをするととってもHTMLが長くなって…