スクロールで指定した要素が表示された時にclassを追加する
スクロールで画面内に要素が表示されたらアニメーションを行う実装をすることがよくあるので、指定した要素が画面内に表示された時にclassを追加するという処理を作ってみます。 サンプルコード まずはclass付与の関数を作って実装してみます。 HTML <div class="contents"> <section class="section"> <div class="sample sample1"></div> </section> <section class="section"> <div class="sample sample2"></div> </section> <section class="section"> <div class="sample sample3"></div> </section> </div> .sampleに.is-showというclassが付くとフ
初心者向け！コピペで簡単にレスポンシブに強いパララックスを実装する＜parallax＞ | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
こんにちは。 佐藤です。 みなさんwebサイトにおけるパララックスをご存知でしょうか？ ざっくりと言うとパララックスは動くスピードなどに差を付けて 目を引くようなデザインにすること言います。 webでは主にスクロール量に応じて背景などを動かし スクロールと要素の動きに差をつけるのが一般的です。 例を挙げるとふぁーむ大根島様の背景の木や野菜などがそうですね。 きっとパララックスという言葉を知らなくても ほとんどの人がこの動きを見たことあるのではないでしょうか？ 今日はこのパララックスを簡単に実装する方法をご紹介します。 実装にはjavascriptを使っていきます。 ちなみにスクロール量に応じて要素を動かすこと自体はとても簡単で 以下内容でも一応はそれっぽく動かせます。 var $window = $(window); $window.on('load resize', parallax);
ページ遷移の際にフェードアウト・インするアニメーションを実装する | ホームページTIPS
3CSSのスタイリングはこのようにします。 body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#fff; /* 背景カラー */ z-index: 9999; /* 一番手前に */ pointer-events: none; /* 他の要素にアクセス可能にするためにポインターイベントは無効に */ opacity: 0; /* 初期値では非表示 */ -webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */ -ms- transition: opacity .8s ease; -moz- transition: opacity .8s ease; transition:
jQuery で画像をプリロード | Web Design Leaves
画像ファイルを前もって読み込んでおくプリロードに関する個人的なメモ。 ロールオーバーなどにより画像を表示する場合、切り替える画像のロードに時間がかかり、画像がちらつくことがあるので、それらの画像ファイルを前もって読み込んでおく方法。 目次
jQueryのとネイティブの寸法系メソッドの違い - Qiita
jQueryの寸法系のメソッドは、DOMに対して大幅な変更が入っている部分もあります。 メソッド名が統一されていない例 IEがDHTMLとして入れたものをそのまま引き継いでいるという歴史的経緯もあってか、寸法系のプロパティは通常の要素とwindowやdocumentで別物になっている例も多く、jQueryがそれを吸収していたりもします。 たとえば、scrollTopやscrollLeftはスクロールするエレメントにあるプロパティですが、windowやdocumentにはないので、これらでは代わりにwindow.pageYOffsetやwindow.pageXOffsetを取り出しています。 4段階の取得メソッド jQueryでは、幅・高さの取得系メソッドは、3つ・4段階に分かれています。 width/height…中身とパディングの間が基準 innerWidth/innerHeight…パ
jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編
昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教
【jQuery入門】load()でHTMLを読み込む方法！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、HTMLファイルなどを読み込んで画面に出力することができる「load()」メソッドについて学習をしていきましょう！ この記事では、 「load()」とは？ load()の使い方 functionを設定するには？ セレクタ指定について ajax()とload()の違いについて 「load()」とは？ それでは、まず最初に「load()」メソッドの基本的な知識から学んでいきましょう。「load()」は、任意のファイルをHTMLコンテンツとして取得＆出力することができるメソッドになります。 ここで重要なのは、取得したファイルをHTMLコンテンツとして出力できるという点です。例えば以下のようなHTMLファイルがあるとします。 header.html <!— ヘッダー部分だけを記述 --> footer.html <!— フッター部分だけを記述 --> そ
jqPagination, a jQuery pagination plugin (obviously)
Introduction jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid r
日常の生活と仕事を雑記するコーダーのブログ | CattleMute
こちらの記事で触れていたとおり、とある企業の人より相談があったので、Google Apps Scriptでメッセージルールからブラウザ版のGmailの転送・送信を行うアドオンを開発してました。 当初はGoogle Cloud Platformに載っけてフリーウェアとして配信しようと審査に入ろうとしましたが、アドオンの仕様上、どうしても制限付きスコープを使わなければならなかったもので・・・それで審査受けようとしたもんだからもうとにかく焦った。 二次審査的なものにハイグレードな高級車買えるような金額が必要なんて知らないよ！ 同じようなアドオンないなぁないなぁと、いやに閑散としてると思っていたらこういうことだったか。 確かにただ自動転送とか送信を行うだけのために回収できそうにない金額を払ってまで作る人なんてそりゃいないよなぁ・・・。 まぁ、そんなこんなでとりあえずのところデベロッパーアドオンとし
シングルページをラクして作る！横スクロール系jQueryプラグインならこの10本
おしゃれなキャンペーンサイトで見かける、横スクロールのシングルページ。jQueryのプラグインを使えば、あまり苦労せずに作れるかもしれません。 今回はコンテンツを水平にスクロールできる便利なjQueryのプラグインを10個ご紹介します。 （追記：2016年3月に更新。本記事で紹介されているプラグインとデモをすべて最新バージョンにアップデートしました。さらにいくつか新しいものも追加しています。バージョンアップされていないプラグインは除外しました） 1. ScrollMagic ScrollMagicを使えば、現在のスクロール位置を簡単に見つけられます。容量も軽く（6KB gzip圧縮）、モバイル対応もしています。水平・垂直、両方向のスクロールに対応しています。 （デモはこちら） 2. jInvertScroll jInvertScrollは容量の軽いjQueryプラグインです。視差効果を使っ
jQueryプラグインの作り方
jQueryのプラグインを作る（基本編） jQueryの基本的なプラグインの作り方を公式サイトのマニュアルを元に自分なりの解釈を交えてまとめておきます。 jQuery: How to Create a Basic PluginjQueryのオブジェクトメソッド jQueryの基本的なメソッドの書き方です。これは全てのa要素にstyle属性がインラインで設定されます。 jQueryのオブジェクトは、$.fnオブジェクトからこれらのメソッドを取得します。このオブジェクトには全てのjQueryオブジェクトメソッドが含まれています。 $( "a" ).css( "color", "red" ); つまり、jQueryのプラグインを作るには$.fnオブジェクトに独自のメソッドを設定することで作成することができます。 プラグインの基本 以下の例では、$.fnオブジェクトにgreenifyという独自メソ
jQueryでシンプルなループスライダーを作る
JavaScriptというかjQueryのお勉強。 練習がてらコンテンツスライダーを作ってみました。 この手のものはチュートリアルもプラグインも山ほどありますが、必要な機能だけあって好きに使えるものが欲しかったので1から作りました。 プラグインをお求めの方は「jQuery.simpleLoopSlider.js」をどうぞ。 欲しかった機能シンプルに動くコンテンツスライダー。ループ機能。最後の次は最初、最初の前は最後、という感じで動く。進む、戻るナビゲーション。自動でページネーションを設置。これをやります。 デモとダウンロードは以下からどうぞ。 jQuery Simple Loop Slider DEMO デモファイルをダウンロード HTMLとCSS<div id="slider"> <div class="slider-view"> <div class="slider-container
(K)jQueryでタブパネルを1ページに複数設置する場合の方法 | web(K)campus|WEBデザイナーのための技術系メモサイト
以前、jQueryで作成する「スマホでも実装可能なサイズ可変型タブパネル」の記事を書きましたが、1ページにタブパネルを複数作成すると、表示がおかしくなります。 「メインページにタブパネル」「サイドバーにタブパネル」と2つ作成すると、お互いの命令が干渉しあってタブ展開がうまくいきません。 複数設置できないと具合の悪い場合もあるので、今回は別案として、複数タブパネルを設置したい場合の備忘録。 以前のやり方でタブを2つ設置すると問題が・・・ 以前のサンプルに例えばコードをごそっとコピーすると、2つ目のタブをクリックしても1つ目のタブが開閉するだけでうまくいきません。 単純に「href」のリンクと「li」のIDの番号を書きなおせばいけそうな感じでしたが、以下のような現象が起こってうまく行きません。 1.最初に表示されるページが2つ目のタブパネルが見えない。 2.どちらか片方のタブをクリックすると他
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
初心者向けfullpage.jsの使い方をまとめました | demodemo - Webデザイン/アプリ開発/フロトエンド開発のスキルデモ
サイトデザインを考えている時、国内海外問わずいろんなサイトを見て参考にさせていただいているのですが、最近PCサイトで多く見かけるのが画面いっぱいのサイトデザイン。 中にはスクロールするごとに、アニメーションで動きがあるものもあって、すごくかっこよくておしゃれな感じなんです。 そんなかっこよくておしゃれなサイトが簡単に作れるフルスクロールするjQueryのプラグインfullpage.jsの使い方をまとめてみました。 私のポートフォリオにも使用してみたので、こちらをベースに紹介していきますね。 ポートフォリオ fullpage.jsの導入方法 fullpage.jsのパッケージをダウンロード CSS/jQueryプラグインファイルをディレクトリにアップ 外部ファイルとしてheadタグに追記 HTMLにID/クラス名を記述 fullPage.jsを実行する fullPage.jsのオプションの設
$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ | WEMO
$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ 2019 8/13 先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。 どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。 コンソールを見てもエラーログは出ていない。 これまで通り記述しているのにconsole.log()さえ動かない…。 という内容でした。非常に焦ったのでその時の原因と対処法をメモしておきます。 結論から言うと、使用するjQueryのバージョンを3に変えたことが原因でした。 jQuery3からはdocument-readyが常に非同期になっている 専門的な細かいことまでは分かりませんが、 jQuery3での変更点を分かりやすくまとめてくれているQiita
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animsition
画面内に要素が入ったら上から順番にクラス名を追加する
css-js - Web production note
はてなID
