Pannellumを使って複数の360度パノラマVR写真を切り替え表示（JavaScript/jQuery） | miimo Inc.
Pannellumとは PannellumはJavaScript製でプラグイン不要の360度パノラマ写真ビューワです。 画像の拡大・縮小・全画面表示が可能です。 上記のデモは一番シンプルな実装方法ですが、より高度なコントロールボタンをつけたりツアー形式にすることもでき、動画にも対応しています。 GitHubはこちら 公式サンプル・ドキュメントはこちら ソースコード See the Pen Pannellum – 360° Panorama View by もち (@mu_mochi921) on CodePen. ポイント1. サムネイル部分の画像 <li> <a data-item-url="360vr-1.jpg"> <img src="360vr-1-300x300.jpg" alt=""> </a> </li> $('.panorama-navs a').on('click', f
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
getElementsByClassNameで指定したクラスを全消しする
getElementsByClassNameで指定したクラスを全部消す 最近ReactとかAngularとかカッコいいJavaScriptライブラリでてるし、 jQueryを使ったらシロートっぽく思われて嫌だなぁ…と思っているみなさんこんばんわ。たくみです。 今日はjQueryで$('.TARGET_CLASS').removeClass('REMOVE_CLASS');相当のことを pure JavaScriptでする方法を伝授します！ ぶっちゃけjQuery使ったほうが早(ry pure JavaScript大好きの方はご存知かもしれませんが、 document.getElementByIdで取得したDOMにclassList.removeを使うと 指定したクラスが消えますよね。 ですが、document.getElementsByClassNameを使って取得したDOMは そのままだ
【jQuery】シンプルなニュースティッカーが簡単実装！jquery.simpleTicker.jsの使い方
プログラミング 【jQuery】シンプルなニュースティッカーが簡単実装！jquery.simpleTicker.jsの使い方 ニュースティッカーとは ニュースティッカーって何っていう人もいると思うんだけど 下からテキストがシュルッと出てくるものだよ。 この機能の用途としては お知らせ、ニュース、新着情報などを掲載する時に使えるよ。 この機能を簡単にシンプルに表示できるのがjquery.simpleTicker.jsだよ。 サンプルデモページを用意したから見てみてね。 サンプルデモページはこちら simpleTickerの使い方 ファイルのダウンロード まずはjQueryの設置をするよ！ jQueryの公式サイトからファイルをダウンロードしてね。 jQueryの公式サイトはこちら 次にjquery.simpleTicker.jsを入れるために GitHubからダウンロードするよ。 jquer
jqueryでメガドロップダウンメニューを作ろう
メガドロップダウンメニューを今度コーポレートサイトで使う予定です。 だから今のうちに作っておこう。 コピペして使えるようにしたので、こちらをお使いください。 jqueryでメガドロップダウンメニューを作ろう See the Pen mega drop down by makototo9 (@hiraomakoto) on CodePen. 使ったjquery children()メソッド $（セレクタ）.children([selector]) セレクタの子要素を全て選択します。 孫要素は選択されません。 each()メソッド $（セレクタ）.each(ファンクション) セレクタの全ての要素に対して関数を実行します。 css()メソッド $（セレクタ）.css(cssプロパティ) 要素に対してcssスタイル、を追加する場合や、要素に対して設定してあるcssを取得する際に使う ほなね
テキストアニメーションを簡単実装！軽量jQueryプラグイン「Textyle.js」作りました。 | ma-ya's CREATE / WEB DESIGN
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 個人的にテキストアニメーションが好きです。 このサイトでも「Textillate.js」というプラグインを使用してますが、もっとさりげないエフェクトのものが欲しいな〜と思っていました。 Textillateもいいんですけど、ちょっと動きが大げさなんですよね。 というわけで。 エフェクトも実装もシンプル！軽量テキストアニメーションjQueryプラグインを作ってみた 多機能ではないですがちょっとしたJSとCSSの記述で使用できます。 名付けて「Textyle.js」（テキスタイル）。 シンプル機能なので当たり前ですがサイズも1KB以下と軽量です。 詳細は後述しますが、上下左右（斜め含む）からの移動とフェードが可能。エフェクト後に発生させるコールバックの指定も可能です。動きは↓こんな感じ。 特徴 指定要素内テキストをプラグイン
【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法
アンカーリンクを使ってページ内リンクを行う最、ヘッダーを固定にしていると思い通りの動きをしてくれないことがあります。 これは、アンカーリンクのジャンプ先がブラウザ上部を基点に表示されるためです。 ヘッダーは固定のままにしたいですが、スクロールするコンテンツが隠れてしまうのは避けたいところ。コンテンツがヘッダーの高さ分下に表示されればちょうどいいですよね。 これを解消する方法として「CSSに記述する方法」と「jQueryを使う方法」があります。 内容的には比較的易しめなものですが、アンカーリンクがずれてしまう現象って割と発生しやすいものかなと思いましたので、今回のブログで取り上げていこうと思います。
簡単なタブ切り替え機能の実装 | 東京のブランディングデザイン会社 BOEL
<div class="tab_wrap"> <input id="tab1" type="radio" name="tab_btn" checked> <input id="tab2" type="radio" name="tab_btn"> <input id="tab3" type="radio" name="tab_btn"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="ta
jQuery Cheat Sheet
Copying .clone() DOM Insertion, Around .wrap() .wrapAll() .wrapInner() DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text() DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore() DOM Removal .detach() .empty() .remove() .unwrap() DOM Replacement .replaceAll() .replaceWith()
要素が存在するかどうか調べる
JavaScriptで要素が存在するかどうか調べてみます。 サンプルコード 調べ方はいくつか種類があるようですが、jQueryを使わない場合と、jQueryを使う場合から2種類を試してみます。 HTML <div class="hoge"></div> .hogeが存在するかどうかを試してみます。 JavaScript // パターン1 if(document.getElementsByClassName('hoge').length) { console.log("document.getElementsByClassName('hoge').length の結果: true"); } else { console.log("document.getElementsByClassName('hoge').length の結果: false"); } // パターン2 if(documen
【jQuery】シンプルで軽量なjQueryモーダルウィンドウプラグインjQuery Modal | VOYAGER
jQuery Modalはシンプルで軽量なjQueryモーダルウィンドウプラグイン。写真ギャラリー、iframe、およびビデオなどを扱うことができます。 CDNを使用可能。 <!-- Remember to include jQuery 🙂 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/aj
pagePiling.jsで1ページスクロールを実装する方法
今回は1ページスクロールを簡単に実装できるjQueryプラグイン「pagePiling.js」を紹介します。 1ページスクロールでは各セクションを画面いっぱいに表示させ、スクロールするとページのように次のセクションに移動するというものです。 まずは公式のデモで確認してみてください↓ pagePiling.js plugin | Create a stack of scrolling pages pagePiling.jsの使い方 pagePiling.jsは公式ページからダウンロードできます。 ダウンロードしたファイルのうち、「jquery.pagepiling.css」「jquery.pagepiling.min.js」の2つのファイルを読み込みましょう。 <link rel="stylesheet" href="jquery.pagepiling.css"> <script src="
[jQuery] サムネイルをクリックするとメイン画像が入れ替わるレスポンシブ対応のギャラリーを作る
Modified 2014-1-12 更新情報 連続クリック時の不具合解消のため、jQuery コードを一部書き直しました＆キャプションを表示する方法を追記しました。 サムネイル画像をクリックすると、メインの大きい画像が入れ替わる定番のギャラリーを jQuery を使って作る方法です。現在メイン表示されている画像のサムネイルへのカレント機能と、レスポンシブ表示にも対応しています。 IE8+ / iOS8 / Android4.3 / その他のブラウザで動作確認済みです。最低限のシンプルなコードなのでカスタマイズもしやすいと思います。 サンプルデモ ◆ レスポンシブギャラリーデモ｜memocarilog 横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード 画像をサムネイルサイズの画像と
![[jQuery] サムネイルをクリックするとメイン画像が入れ替わるレスポンシブ対応のギャラリーを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/079bc1138835a2ce027e8259d03b6b5f97aa6350/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2F1.jpg)
jQueryでフィルタリング – JavaScript Archives（ジャバスクリプト アーカイブス）
jQueryでできるフィルタリングのご紹介です。 以下がコードサンプルになります。 ▼JavaScript $("button").click(function () { var image = $(this).attr("value"); $("#list li").each(function () { $(this).animate({ "opacity": 0 }, 300, function () { $(this).hide(); if ($(this).hasClass(image) || image == "all") { $(this).show(); $(this).animate({ "opacity": 1 }, 300); } }); }); }); }); ▼CSS button{ font-size:90%; margin-right:10px; display
データをclassとjqueryで判定してカテゴリごとに絞り込みます。 - CodingMania
たくさんのデータをカテゴリで絞り込み、表示・非表示します。 htmlソースは長いですが、表示要素を繰り返しているだけなので、メニューと要素部分の単純構造です。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="tool.js"></script> [tool.js]JavaScript //check panel jQuery(document).ready(function($){ $(function(){ var btn =$(".mod_menu ul li a"); btn.click
要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js | N-LOG
Demoを見る HTML <ul id="btn"> <li data-group="all" class="active alpha">ALL</li> <li data-group="red" class="alpha">RED</li> <li data-group="blue" class="alpha">BLUE</li> <li data-group="green" class="alpha">GREEN</li> <li data-group="yellow" class="alpha">YELLOW</li> </ul> <ul id="animationList"> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["yellow"]'><span class="ye
【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】pagePiling.jsで1ページスクロールを実装する | misoblog
1ページスクロールを簡単に作れるjQueryプラグイン「pagePiling.js」の実装方法についてご紹介します。 各セクションを画面いっぱいに表示できて、スクロールでコンテンツを切り替えていくようなページが作れます。 公式のデモはこちら pagePiling.js plugin | Create a stack of scrolling pages 僕もデモページを作ってみました。 DEMO pagePiling.js | MISOBLOG pagePiling.jsのダウンロード 公式のデモページの「Download」ボタンをクリックして、ファイル一式をダウンロードします。 pagePiling.jsの実装方法ダウンロードしたZIPファイルを解凍し、下記のファイルを読み込みます。 jquery.pagepiling.cssjquery.pagepiling.min.js <link
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TextFill