【jQuery】スクロール量に連動したアニメーションを追加する［ScrollMe］の使い方
ウェブサイトに「スクロール・エフェクト」を導入したい。 そんな要望を叶えるためのオススメのjQueryプラグイン［ScrollMe］を紹介します。 このプラグインをオススメする最大の理由は、わずか1行のJavaScriptのコードも必要なく機能すること。 基本的にはスクリプトファイルを読み込むだけで、あとはカスタムデータ属性によるマークアップで設定していきます。 ほんとうにJavaScriptのコードは1文字も書きません。 公式サイトにてサンプルと実装方法が紹介されていますね。 ScrollMe : http://scrollme.nckprsn.com 詳しい使い方は以下より。 ［ScrollMe］のダウンロード まずはGitHubからスクリプト本体ファイルをダウンロードします。 https://github.com/nckprsn/scrollme 上記サイトより、右上にある「Down
Gimmick log｜jQueryやWordPressの情報を中心に紹介しています
DESIGN 2020.05.18 Webデザイナー、ディレクターが工数削減して複数サイトを効率よく運営するには
jQueryでアニメーションをループさせる方法｜Gimmick log
公開日：2015.11.10 更新日：2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました
クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、
【jQuery】レスポンシブ対応の［Skippr.］でシンプルなスライドショーを実装。
レスポンシブ対応のスライドショーを実装するためのプラグイン［Skippr］は、ファイルの容量も小さく動作も軽快なので、特にシングルページのウェブデザインを構築する際にオススメです。 導入方法も簡単なので初心者の方でもハードルはそれほど高くないでしょう。 まずはプラグインの入手方法から。 以下のサイトにアクセスして、スライドショーの中の［Download］をクリックするとファイルのダウンロードがはじまります。 Skippr. : http://iamapioneer.com/plugins/skippr/ いくつかのファイルが同時にダウンロードされますが、基本的に必要なのは［jquery.skippr.css］と［jquery.skippr.js］の２つ。 他に［reset.css］と［style.css］も重要ですが、これらのに記述された設定は１つのスタイルシートにまとめてしまったほうがい
今更だけどretina対応を考えてみた[簡単] | Cntlog
そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。 高解像度用の画像に対応させる方法 1.読み込ませる画像の大きさを半分にする。 メリット：簡単 デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） 2.JavaScriptライブラリを使う（今回はRetina.js） メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい） デメリット：読み込む画像の数が増えるので、通信量が増える。 3.Media Queriesを使って高解像度用のデ
![今更だけどretina対応を考えてみた[簡単] | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2d915aad5d9cf326a23609f76e3bd321549b28/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2Fcropped-01.jpg)
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする | ITハット
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする 毎日インスピレーションを受けるため、ハイクオリティーなWebサイトを探すのが日課になっています。そこで、もったいないなと思うのがTwitterタイムラインウィジェットが白く、浮いてしまっているということです。せっかく、美しいデザインのサイトなのにTwitterウィジェットで台無しになってしまっていました。そこで、今回はTwitterウィジェットを自由にカスタマイズする方法を紹介します。 ウィジェット作成 まず、Twitterのページへ行き、自分のアイコンをクリックします。 設定をクリックします。 左のメニューからウィジェットを選びます。 新規作成をクリックします。 特に設定するところはありませんが、オプションで@ツイートを除外したい場合はチェックをはずしましょう。設定が終わったらウィジェットを作成を
トップへ戻るボタンを簡単5分で実装【jQuery】 - ホームページ制作会社 横浜 株式会社ウィル
スマートフォンサイトなど、スクロールが長いページが多くなってきましたね。 そんな中、ワンタップで「スルスル〜」とトップへ戻る便利な機能をjQueryで簡単に設置しましょう。 jQueryの知識は、ほとんど入りません。 まずは、コピペで！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://bqworks.com/slider-pro/
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」
VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」
https://infinityforest.net/home/archives/1787