jqueryを使ってレスポンシブサイトでパララックスを表現する
僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように工夫したい→パララックスを使って奥行きを見せるに行き着きました。 パララックスを使ったプラグインはたくさんありますが、これ決定版です。 パララックスのプラグインは無数にあります。だけど古いものはレスポンシブに対応していないものがとても多いです。 だけどこのRELLAX.jsはレスポンシブのサイトでも、classを付与するだけで問題なく使用することができます。 RELLAX.jsの使い方
【jQuery】ページのスクロール量をプログレスバーで視覚的に表示する［Scrolline.js］の使い方
ウェブサイトの上部にプログレスバーを設置して、スクロール量を視覚的に表示してくれるプラグイン［Scrolline.js］を紹介します。 まずはサンプルをどうぞ。 Scrolline.js : https://on-ze.com/demo/jquery-scrolline.js/ シングルページで、長文を読ませるようなサイトで真価を発揮しそうですね。 導入方法は以下より。 ［Scrolline.js］の実装方法 スクリプトの配布サイト GitHub より、必要なファイルをダウンロードしてきます。 GitHub : https://github.com/anthonyly/Scrolline.js ダウンロードした圧縮ファイル『Scrolline.js-master.zip』を解凍すると『jquery.scrolline.js』というスクリプトが梱包されています。 基本的に必要なのはこのJav
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」 タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能とは、例えばショップサイトで画像付きの商品一覧ページをタイルレイアウトで表示している場合、商品の色や機能など、特徴ごとに商品リストをリアルタイムに並べ替えるようなことができるものです。 「Masonry」と同じように自動でグリッドレイアウトを表示して、フィルター機能も付いているプラグインで有名なものとしては、「isotope」というプラグインがありますが、こちらはGPLv3ライセンスの下で商用利用の場合は有料となってしまいます。 そこで、「Masonry」の
【Labs】表示しているブラウザの高さを取得してCSSのheightに指定
こんにちは（・∀・） 今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。 さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか... JavaScriptネイティブ版はこちら【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2です。 CSSで高さ100%を指定する方法はこちらの【Labs】CSSで要素の高さ100%を指定する方法をご覧ください。 jQueryで取得した高さをCSSのheightに指定 jQueryで表示画面サ
jQueryで一歩先を行くハンバーガーメニューを実装する方法 | SONICMOOV LAB
まりぞーです(∩°ω°∩) PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作ってみました。 以前作成した初心者向けのアコーディオンメニューはこちらです。 初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 今回もデモを用意しました。 ご確認ください。 目次 ハンバーガーメニュー 概要 HTML jQuery CSS DEMO 1 : アコーディオンメニュー 概要 HTML jQuery DEMO 2 : 多階層アコーディオンメニュー 概要 HTML jQuery DEMO 3 : コンテンツの格納 概要 HTML jQuery まとめ ハンバーガーメニュー 概要 ハンバーガーの構造は下記のようになります。また、上記のアニメーションのように静止したメニューではなく、にゅーっと
スクロールに応じて要素を固定する PrettyScrollをリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スクロール時にスクロール量に応じて要素を固定するためのJavaScriptを公開しました。そういったJavaScriptは世間でこれまでもいくつか公開されていたのですが、「どの範囲まで固定するか」また「スマホ時はスクロールを中断するか否か」などそういった多くのシチュエーションに耐えうるJavaScriptがなかったので、今回、実際に案件レベルで使えるように一からJavaScriptを書いて、公開するに至りました。 https://appleple.github.io/pretty-scroll/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。
Magnific PopupでYouTubeの動画を実装するときの注意点 | どすぶいブログ
一定期間更新がないため広告を表示しています
jQueryスライダープラグイン9選！スライドショーを手軽に作成
JavaScriptは非常に便利ですが、ゼロスクラッチでイチからコーディングを行うのは非常に大変です。そのため、何らかのフレームワークやライブラリを使うのが標準的ですが、その中でもjQueryはいまだに根強い人気を誇っています。 「脱jQuery」という言葉も耳にしますが、プラグインを読み込むだけで基本機能のほとんどが実装できてしまうjQueryプラグインは、初心者には大変ありがたいものです。 今回は、その中でも手軽で便利なjQueryスライダープラグイン9選をご紹介します。2018年に新規に立ち上げるサイトなどに、こうしたプラグインを採用してみましょう。 ▼こちらもチェック▼ UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン15選 手軽で便利なjQueryスライダープラグイン9選 1. slick slickは、最も便利で手軽に使えるjQueryスライダープラグイ
FlexSlider：スライダー・カルーセルアニメーションjQueryプラグイン (1) FlexSliderの導入 | Web技術指南書
FlexSliderはECサイト構築プログラムで有名なWooCommerceが公開している画像・コンテンツスライダーjQueryプラグインです。スライドを1枚ずつ表示するスライダーから、複数のスライドを同時に表示するカルーセルの設定も可能です。 このページでは、FlexSliderをWebサイトで使用するための導入から基本的な使い方を紹介しています。
手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIA
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリです。SPA（シングル・ページ・アプリケーション）やゲーム・スペシャルコンテンツの演出に役立ちます。 たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。 JavaScriptライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 shuffle-text: JavaScript Text Effect library. shuffle-text を使ってみよう 本記事では、JavaScriptライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです JavaScript Advent Calendar 2017 - Qiitaの2日目の記事です. 何故この記事を書こうと思ったか JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます. なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します. また, 私がweb開発を開始したのは3年前ぐらいから
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法｜BLACKFLAG
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。 そんなマテリアルデザインの一種として ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。 その動作をjQueryとCSSを使って実装する マテリアルデザイン風ボタンを作ってみたので紹介してみます。 「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示 画面上にあるボタンをクリックすると そのクリックしたところをポイントとして 円形の波動が広がるアニメーションを実行させます。 クリックしたポイントからアニメーションを実装することで 「ボタンをクリックした」ということと クリックした場所が視覚的に明確に分かるようになる効果があります。 このボタン動作の全体構成について まずはHTMLから。 ◆HTML <div id="linkArea">
要素を遅らせて表示させるjQueryのサンプル
jQuery書く コードは以下です。 $(function(){ var hide = $('h1,#contents'); //隠すhtmlタグを指定 var title = $('h1'); //タイトルのタグを指定 var cont = $('#contents'); //コンテンツのタグを指定 hide.addClass('none'); //変数hideにcssのclass"none"を指定 title.fadeIn(1000, function(){ //変数titleをフェードインさせ、その後上から移動させる $(this).animate({top : 0}, 500); }); cont.fadeIn(1000, function(){ //変数contをフェードインさせ、その後#footerを表示と移動 $('#footer').animate({width: 700,
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
スクロールを監視してヘッダーバーを表示/非表示させるjQueryプラグイン「jquery.cb-slideheader.js」
前回は『jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法』という記事を書きました。内容としては、スクロールに合わせてヘッダーバーを表示/非表示させる機能の実装方法となります。今回は、そこで紹介した実装方法を元に汎用的に使うためのjQueryプラグインを作ってみたので紹介させていただきます。使用頻度は高いと思いますので、ぜひ当記事をお読みの上お使いいただければと思っています。 jquery.cb-slideheader.js概要「jquery.cb-slideheader.js」は、ページのスクロールに合わせてヘッダーバーをスライドさせて表示/非表示させる機能を実装するためのjQueryプラグインです。 maechabin/jquery.cb-slideheader.js – GitHub jquery.cb-slideheader.js – n
jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法
久々にUI実装系の記事を書きます。Google Analyticsで当ブログのオーガニック検索キーワードを見ていると、「スクロール」、「ヘッダーバー」を使った複合検索でのアクセスが目立っていたりします。確かに最近はスクロールを合わせてヘッダーバーを表示させたり、非表示にさせたりするUIが至るところで見受けられるようになっています。自分もそれほど気にはしていませんでしたが、今回どんな方法で実装できるか試してみることにしました。いくつか紹介していきます。 はじめに – ヘッダーバーの準備早速、スクロールするとスライドして現れる「ヘッダバー」の実装方法について説明していきます。「ヘッダーバーはページの読み込み時は非表示となっており、ページを下にスクロールすると表示される」という機能を実装していきます。 ベースとなるヘッダーバー HTML / CSSまず今回の実装のベースとなるヘッダーバーを以下の
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。
株式会社オンズ 開発ブログ 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。 スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。 その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。 タッチイベントとは、その名のとおりスマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことで、以下の４つのタイプの機能が用意されています。 touchstart ： タッチしたときに発生する touchmove ： タッチしたまま動かしたときに発生する touchend ： タッチ状態から離れたときに発生する touchcancel ： タッチ中に電話がかかってきた場合などに発生する（通常は使わない） 具体的にわかりやすいように、ここではスマ
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
