【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。(シンプルバージョン) – WEBDESIGNDAY
<body> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--center"></span> <span class="menu__line menu__line--bottom"></span> </a> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">Works</a></li> <li class="gnav__menu__item"><a href="">
【jQuery入門】lengthプロパティの使い方まとめ | 侍エンジニアブログ
こんにちは！フリーランスの桃太郎です。 jQueryにて要素の数を取得したり、要素そのものが存在するか確認する際によく使われるlengthプロパティがあります。 この記事では ・lengthとは？ ・lengthの基本的な使い方 という基礎的な内容から、 ・lengthで要素が存在するか判定する方法 ・sizeメソッドとの比較 など実践的な内容についても解説していきます。 jQueryのlengthプロパティについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！ lengthの基本 まずはlengthプロパティについて基本的なことから解説を進めます。 lengthとは？ lengthプロパティは元々JavaScriptにて標準で用意されているもので、文字列の長さや配列の要素数などを取得するためのプロパティです。 jQueryではそのlengthプロパティを
JavaScriptで要素を削除する方法を現役エンジニアが解説【初心者向け】
要素、子要素、親要素とは 要素とは、HTMLの開始タグから終了タグまでのひとまとまりのことを指します。 <section>コンテンツ</section> 上記はコンテンツという文字列の内容が含まれたsection要素です。 また、要素は階層によって分かれています。 子要素とは、ある要素から見て、下の階層にあたる要素のことです。 <section> <h3>タイトル</h3> <p>内容</p> </section> section要素から見てh3要素は子要素です。 さらにp要素はh3要素からは子要素、section要素からは孫要素です。 親要素とは、子要素とは反対にある要素から見て、上の階層にあたる要素のことです。 <main> <section>コンテンツ</section> </main> section要素から見た場合、main要素が親要素です。 逆にmain要素から見た場合には、s
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
【jQuery】水面に滴る雨を再現した［Raindrops.js］でウェブページに癒しと冷涼感を。
夏ですね！ 例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。 さて。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。 ［Raindrops.js］と名付けられたこのプラグインは、ボックス要素を水面に見立て、降り注ぐ雨の様子を演出します。 まずは実際に使ってみたサンプルをご覧ください。 ［jQuery Raindrops.js］実装サンプル 導入方法は比較的簡単です。 ［Raindrops.js］の使い方まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。 ［Raindrops.js］配布サイト：http://daniellaharel.com/raindrops/ 基本的なことですが［Raindrops.js］はjQueryプラグインなので単体では動きません。 別途「jquery.js」
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
Pogo Slider Creator Opencart module
Usage Pogo slider does not generate any navigation buttons. It provides a simple api to control the slider and you can use this api when creating your own buttons. It does however provide some default button styling classes. Example Markup HTML <div class="pogoSlider"> <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000" style="background-image:url(img/slide1.jpg);">
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
【jQuery】斬新な動きのスライドショーが魅力の［Fullscreen Slit Slider］の使い方
投稿日：2015年10月25日 更新日：2015年10月25日 JavaScript, jQuery 2275文字：約4分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/3615 今日は大胆な動きのスライドショーが魅力のjQueryプラグイン［Fullscreen Slit Slider］を紹介します。 まずは実際に［Fullscreen Slit Slider］を使ったサンプルをご覧ください。 実装サンプル：ONZE Fullscreen Slit Slider こちらのサンプルではカスタム仕様で「フルスクリーン対応、」「2.5秒ごとに自動再生」「キーボードの左右でスライダーを制御可能」にしています。 スライダーが切り替わるタイミングで上下左右に大胆なスリットが入り、ダイナミックな動きで次のコンテンツが表示されていきます。 見ていても気持ちイ
フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日本語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日本語解説] http://blog.asial.co.jp/1158 date-fns https://github.com/date-fns/date-fns dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートでき
マウスを乗せると背景画像が動く
Result jQuerydistance = 100; sensitivity = 17; var distHalf = distance / 2; var parW = $('#par').width(), parH = $('#par').height(); $('.layer').each(function() { var layer = $(this); pixPos = distance * (layer.index() + 1); pixPosHalf = distHalf * (layer.index() + 1); layer.width('+=' + pixPos); layer.height('+=' + pixPos); layer.animate({left: '-' + pixPosHalf }, 0); layer.animate({top: '-' + pi
要素をランダムで指定数分だけ表示
Result jQuery//全部非表示にする $('.someList li').hide(); // リストをシャッフルする var items = $('.someList li').get().sort(function() { return Math.round(Math.random()) - 0.5; }).slice(0, 3); // ランダムで3つだけ抽出して表示 $(items).show();html<ul class="someList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul>viaShow a Random Numbe
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
Raindrops.js
FoldScroll
本をめくるようなエフェクトを実装できるjQueryプラグインまとめ！
