ゴリゴリのJSが書けなくても使える！ アニメーションライブラリ「Lottie」を使ってみた。 | MONSTER DIVE
Lottie（ロッティー）とは Airbnbから登場したiOS, Android, React Native対応のアニメーションライブラリです。 After Effectsで作成したアニメーションを簡単にWebで実装できるものです。 メリット 簡単に実装できる（ゴリゴリのJavaScriptがわからなくても使える） iOS, Android, React Native対応モバイル端末で使用できる 軽量なのでスマホでもアニメーションができる Lottieを使うために必要なもの Bodymovin After Effectsで作成したアニメーションをjsonに書き出す時に必要になる拡張プラグイン。 lottie.min.js 上記二つのファイルは https://github.com/airbnb/lottie-web よりダウンロードしてください。 Bodymovinの場所 Lottie-w
YouTubeのサムネイル画像をクリックしたら埋め込みiframeを読み込むjQuery
やりたいこと 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。 16:9のレスポンシブ対応をする。 サムネイル画像と埋め込みiframeで表示位置がズレないようにする。 サンプル https://hi3103.net/study/1902-loadytlater/ 用意するもの 埋め込みたいYouTube動画のID 再生ページのURLのパラメータにある文字列を控える https://www.youtube.com/watch?v=【動画ID】 ソース HTML imgタグのソースに指定しているYouTubeサムネイル画像は、以下のエントリーを参考にURLを取得。 YouTubeの動画のサムネイル取得が思った以上に簡単だった件 | EMiAC-Works <div class="embed-res
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
（良くないけど）ページに複数のjQueryを読み込む。 - Qiita
どういう状況？ とあるWebサービスの、全てのページに入れるJS製共通コンポーネントを作成、反映することになった！ が、ページには既にjQueryが読み込まれ、且つjQueryプラグインが拡張されているような状態。順当な対応であれば、追加する共通コンポーネント側で、jQueryが読み込まれているかどうかを判定し、読み込まれていなければ読み込む、という対応になるだろうか。というかjQueryのバージョンくらい管理しろよという話でもあるけれども。 ググったら jQuery.noConflict(true) なるもので、複数バージョンのjQueryを存在させておけるらしいが、挙動が色々不明瞭なので、色々検証してみた。 お題目 ひとまず謎の jQuery.noConflict(true) を詠んでみる。 jQuery.noConflict(true) を呼ぶ事で、呼ぶ前と何が変わるのか どう使うべ
1画面内でバージョンの異なるjQueryを共存させるには - もやもやエンジニア
あんまり同じような問題に直面している人は少ないとは思いますが。。。 まず、普通にjQueryを2個呼んでみます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> このようにした場合、jQueryのグローバルオブジェクトである「$」または「jQuery」は後勝ちになるので、alert($().jquery)とかやると1.9.0が表示されます。1.3.2のjQueryオブジェクトは上書かれて消えてしまって
【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方
ここで紹介する［Vide］は、ウェブページの背景全面で動画を再生するjQueryプラグインです。 まずはサンプルをご覧ください。 ［Vide］：サンプル・サイト 使用するプラグインのダウンロードは以下、公式サイトからどうぞ。 ［Vide］：公式サイト 準備として、動画ファイルをサーバー上の任意の場所に設置しておきます。 なお、動画ファイルの形式は「.mp4」をメインにして、他に「.ogv」と「.webm」形式も用意しておくと、ほぼすべてのブラウザに対応できます。 またムービーが読み込まれるまでの間に静止画を表示させておくこともできますが、この場合は同じフォルダ内に「.png」形式の同名の画像ファイルを用意しておくとプラグイン側で自動的に読み込んでくれる仕様になっています。 もし「.png」の画像が存在しない場合、続いて「.jpg」「.gif」の画像ファイルを検出します。 ここでは仮に、ルー
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
画面中央に表示するモーダルウィンドウを実装したい ｜ Tips Note by TAM
画面中央に表示するモーダルウィンドウをjQueryで実装してみました。 ■HTML <div id="modal-main">モーダルウィンドウ</div> <!-- #contents START --> <div id="contents"> <p><a id="modal-open">【クリックでモーダルウィンドウを開きます。】</a></p> <p class="page-txt">ここからページ本文<br> <br> ↓↓↓ スクロールしてください ↓↓↓</p> </div> <!--/#contents--> ■CSS #contents { z-index: 0; font-size: 16px; } .page-txt { margin: 30px 0 0; height: 2000px; } #modal-open { color: #cc0000; } /* モーダル
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。
今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider：サンプル・デモ 特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の１つです。 実装方法は以下のとおり。 ［bxSlider］の設置方法 最初に［bxSlider］の本体ファイルをダウンロードします。 リンクは以下より。 bxSlider：ダウンロード フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxs
$(function(){}) と $(window).on('load',function(){}) の違い - Qiita
ページ読み込み時に処理を実行したい場合、いろいろな書き方があると思います。 このあたりの違いをまとめました。 種類 jQueryのready と jsで昔から愛用されているonload がある。 ready $(function(){ alert('Hello'); }); //または $(document).ready(function() { alert('Hello'); }); //または jQuery(function() { alert('Hello'); }); //または jQuery(document).ready(function(){ alert('Hello'); }); //JavaScript document.addEventListener('DOMContentLoaded', function(){ alert('Hello'); }, false);
[jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する
jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul, li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。 これを解決するには 1 枚目の画像だけ src で画像 URL を指定します。 2 枚目以降は data-lazy attribute に image url を指定します。 そして .slick() method に lazyLoad オプションを設定してあげれば OK です。 $('#js-banner-area').slick({ lazyLoad: 'progressive' }); Lazy Loading のサンプルは slick - the last carousel you’ll ever n
slickのスライダー画像が一瞬大きくなる件 - Qiita
画像が一瞬大きくなる現象はこのように起きるのだと思う。 HTMLロード JavaScript実行、slickの初期化 画像のロード完了 一瞬実サイズで画像表示される slickがスライダー内におさまる画像サイズに変更する lazyLoadを使って解決 細かい説明の前に解決法から書いてしまおう。lazyLoadオプションとlazyLoadedイベントを使って解決！自動再生にも対応。 // // この中はクラスを過程。よってthisを使っている。 // // ロードすべき画像数 this.num_images = $('.slider').find("img").size(); // ロードされた画像数 this.num_loaded_images = 0; // 自動再生中ならtrue this.is_autoplaying = false $('.slider').slick({ slid
[jQuery] ドラッグ&ドロップをカンタン実装！【はじめの一歩編】
jQuery カンタンなToDoリストです。左のリスト項目をドラッグして右のエリアにドロップしてみてください。色が変わって、チェックマーク（✓）も付きます。チェックマークをクリックすると登録したToDoリストが消えます。 今回はこのドラッグとドロップをどうやって実装するか、を説明します！ 【要素をドラッグさせる】のは超簡単！ まずはjQueryUI！ 素のjQueryだけでは難しいので、jQueryUIというものを適用します。といってもやり方はhead内に以下を記述するだけです。 [html] <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"> <script src="//ajax.googleapis
![[jQuery] ドラッグ&ドロップをカンタン実装！【はじめの一歩編】](https://cdn-ak-scissors.b.st-hatena.com/image/square/1942b0a335d20107c43128fcfa999fca6049b976/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F08%2Fdrag_drop1.jpg)
[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】
jQuery メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。 ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！ また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。 この記事はJQuery UI – SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。 指定要素にドラッグ&ドロップさせる系 ドロップ先を限定する場合に使うメソッドです。 紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。 connectToSortable
![[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】](https://cdn-ak-scissors.b.st-hatena.com/image/square/69a7b29b01c5f90cc61760a95830b09e780c3069/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F08%2Fdrag_drop2.jpg)
jQueryでフォームの入力チェック | kizukiウェブスクール川越校5階
ウェブ制作において、jQueryが最も使用される機会が多いのが、フォームのバリデーションチェック機能。 バリデーションチェックとは、メールアドレスなら「xxx@xx.xx」という入力形式になっているか？必須項目はちゃんと記入されているか？を確認し、もし誤りがあればそれを閲覧者に知らせる機能のこと。 jquery-form-validatorを使った入力チェック Position-absolute「jquery-form-validator」 フォームの入力事項をチェックするバリデーション用プラグインは数あれど、このjquery-form-validatorは多機能な上に、設定が非常にわかりやすいのでおすすめ。 ちなみに導入例のデモはこちら。 確認してもらえば分かるとおり、送信ボタンを押すタイミングだけではなく、項目を入力して（あるいは入力しないで）フォーカスが移るタイミングでもバリデーショ
Bridge Word
This shop will be powered by Are you the store owner? Log in here
商用利用可のフリーjQuery Lightboxプラグインまとめ
写真の拡大やギャラリーページなどに良く利用される... / レスポンシブデザイン対応Lightboxプラグイ... / Swipebox | A touchable j...他...全12件 写真の拡大やギャラリーページなどに良く利用されるプラグイン。近年のサイト制作で使わないことがない最もポピュラーなプラグインです。 最近ではスマートフォン対応の有料プラグインも続々登場。さらに便利に使いやすく進化してはいますが、商用だと有料化が進んで、以前に比べると無料のプラグインを見つけ辛くなりました。 そこで、ここでは最近のフリーで使えて商用利用可能なLightboxプラグインをご紹介いたします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報