【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 | TechAcademyマガジン
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 フリーで使えるjQueryのプラグインをまとめています。jQueryは初心者でも扱いやすく最も普及しているJavaScriptのライブラリです。Webサイトの印象も大きく変わるプラグインばかりなので、ぜひ使ってみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事
skrollrでパララックスのランディングページを作ってみよう〜追記あり〜 – Freyja's Ramblings
2022.1.16 更新 皆さまこんにちは。 本日はskrollr再び！skrollrを使ってペラいちのランディングページを作ってみます。 まずはこちらにDEMOを作ってみましたのでご覧ください。 （※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m ) skrollrってなに？ パララックス（視差）効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。 skrollrをダウンロード skrollrの基本的な使い方は前回の記事をどうぞ。 ⚫︎パララックスが簡単に実装出来る！skrollrの使い方 ⚫︎skrollrを使ってシングルページのパララックスサイトを作ってみました スクロールで画像にパースペクティブ感を出す 今回は大きく分けてセクシ
パララックスが簡単に実装出来る！skrollrの使い方
2022.1.16 更新 皆さまこんにちは。 本日はパララックス(視差効果)が簡単に実装出来るskrollrというライブラリをを使ってみましたので、ご紹介しようと思います。 デモを作ってみましたので、こちらをご覧下さい。 skrollr.jsをダウンロードし、htmlファイルに読み込む まずGitHubからskrollr.jsをダウンロードします。 html側にはskrollr.min.jsファイルとjqueryを読み込ませます。 下のコードをhtmlのどこかにペースト、以上です。簡単ですね！ <script src="js/skrollr.min.js"></script> <script> var s = skrollr.init(); </script> デモではほぼ全てのdivにdata属性をつけて動かしています。 ポイントは、 data-○○=”ここに普通にcssを書く”色はrg
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集 | 125naroom / デザインするところ（会社）です。
jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても The post 【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集 first appeared on 125naroom / デザインするところ（会社）です。.
WebサイトにYouTubeの動画を大量に埋め込んでも重くならないようにする方法 ｜ 株式会社ティウェブ
こんにちは、ティウェブ藤園です。 動画を埋め込んだWebサイトをよく見かけるようになりました。 Webサイトに動画を埋め込むにあたっては、 YouTubeに動画をアップして、それをWebサイトに 表示させる方法がよく使われている手法と思います。 ですが先日、１ページに80個以上（！）の YouTube動画を一覧化して埋め込む案件があり、 加えてスマートフォンサイトということで、 いかに軽量化するかを考える必要がありました。 ※ちなみに、80個以上のYouTube動画を 通常の埋め込み方法であるiframeタグの貼り付けで行うと、 ページが重すぎて読み込みエラーとなり、ページ自体が表示されませんでした。。。 ■動画のサムネイル画像を使う 実は、YouTubeはサムネイル画像は簡単に取得できることをご存知でしょうか？ – サムネイル画像呼び出し例 – サムネイル画像を埋め込むコード 「YouT
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
面白い動きや便利な機能をJSで実装！ その6：クリックで画像を拡大表示させるアニメーション | 東京のホームページ制作・WEB制作会社 マーカーネット
記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機能をJSで実装！ その5：ちょっと変わったマウスオーバーの応用編 面白い動きや便利な機能をJSで実装！ その4：ちょっと変わったマウスオーバーを実装してみました。 面白い動きや便利な機能をJSで実装！ その3：一目で印象に残るアニメーション背景を作成！ 面白い動きや便利な機能をJSで実装！ その2：いろんな種類のグラフを簡単に作成！ 面白い動きや便利な機能をJSで実装！ その1：簡単にグラフを作成する方法！
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
画像等を回転して見せる事ができるjQueryプラグイン-Roundabout
リストでマークアップした要素をくるくる回転させて見せる事ができるJQueryのプラグイン、Roundaboutを使ってみました。 「サンプル」も作りました。 スタンダードでは要素が奥行きがあるようにくるくる回転しますが、オプションで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。 ダウンロード ダウンロード：fredleblanc/roundabout · GitHub 使い方 スタンダード htmlはulのリスト形式で記入し、回転させたいものをliの中に記入します。 cssはulの横幅（回転するボックスが並んだ横幅より少し大きいくらいのサイズ）と、liの横と縦のサイズを指定します。 ヘッド内でjQuery本体とプラグインファイルを読み込みます。 <script type="text/javascript" src="https://aj
奥行きのある回転ができるjQuery – jQuery Roundabout
奥行きのある回転ができるjavascriptのjQuery Roundaboutを試してみました。 jQueryを使用していますので、まずはjQueryをダウンロードして読み込みます。 jQueryを設置したら、次にjQuery Roundaboutをダウンロードします。以下のページから jQuery Roundabout ダウンロードをしたら、HTMLに読み込みます。
【jQuery】ボタンや画像をクリックして要素を回転させて裏側に仕込んだ要素を表示する方法 | Kansuke program note
現時点でのHTMLタグとCSSは下記のようになっています。 HTMLタグ <div id="rotate-area"> <div class="rotate-target omote" id="omote"> <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p> </div> <div class="rotate-target ura" id="ura"> <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p> </div> </div> CSS .r
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります） | 125naroom / デザインするところ（会社）です。
<main> <section> <div class="one"> <div class="bg _01"></div> <div class="onebox"> <img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt=""> <p>1st</p> </div> </div> </section> <section> <div class="one"> <div class="bg _02"></div> <div class="onebox"> <img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt=""> <p>2nd</p> </div> </div> </section> <section> <div class=
つい移動したくなっちゃう…⁉おもしろCSSタブがコピペで実装できる！【アニメーション】｜デシノン
CSSで使えるおもしろタブ【アニメーションあり】をまとめてみました！ codepenから引用しています おもしろタブ【アニメーションあり】 コピペで実装 スマホの中にタブ See the Pen Snapchat Tabs Switching by Praveen Bisht (@prvnbist) on CodePen. アンテナタブ See the Pen Features tabs with click css-animation by Danil Goncharenko (@Danil89) on CodePen. プニッとタブが移動 See the Pen Fluid tab bar by Mikael Ainalem (@ainalem) on CodePen. ファイルでタブ！！ See the Pen css tabs by massimo (@_massimo) on C
動きが面白い！チェックしたいjQueryプラグイン9選
ホームページにダイナミックな動きや便利な機能を実装する時に役立つのが、jQueryプラグインです。 jQueryプラグインは、数行のコードを差し込むだけでいいほど実装が簡単で、HTMLやCSSだけではできないような複雑な動きを表現することができます。 しかし、そんなjQueryプラグインも、たくさんあってどれがいいかわかりません。 そこで今回は、2017年最初にチェックしたいjQueryプラグインを紹介していきます。 言葉だけで説明するのは難しいので、デモサイトへのリンクもご用意しました。 ぜひデモも合わせてご覧ください。 2017年最初にチェックしたいjQueryプラグイン9選 1. DateBox ダウンロード / デモ DateBoxは、ブラウザやデバイスにかかわらず、テキストボックスに同じように表示することができるカレンダーや時間のプルダウンを実装することができるjQueryプラグ
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！ | Web Design DAY
スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」。主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ユーザーに面白いUX（ユーザーエクスペリエンス）を与えることができるプラグインですので、使い方を詳しく解説していきます。
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
Fancy Button 2016年を代表する鮮やかな配色に、オーバー気味のドロップシャドウが美しい、ボタン・ホバー用エフェクト。 See the Pen Fancy Button by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen. Big Fancy 3D Rotating SVG Button マウスホバーに合わせて、立体的に回転します。 See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen. Blue Light Button 青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。 See the Pen Blue light button by Toshiyuki TAKAHASHI (@g
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
いつか使いたいアニメーションJS/CSSメモ - Qiita
