シームレスな画面遷移アニメーションの Vue Router を使った実装パターン - Katashin .info
2023年9月19日アニメーション,Vue,Vue Router以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。 この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。 シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。 本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。 シームレスな画面遷移アニメーションの難しさ #シーム
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
ミニマルなモーダルライブラリをnpmで公開しました - Qiita
【更新履歴】 2020/10/28 v1.0.0の機能について追記。デモをGithub Pagesに移動。 ミニマルなモーダルライブラリ(MinimalModal.js)を自作してみたので紹介します。 MinimalModal.jsとは TypeScriptで作成された、軽量かつ最小限の機能のモーダルライブラリです。 なんでこのライブラリ作ったの？ Micromodal.jsを使おうと思ったのですが、 背景スクロール無効がなかったり、IE未対応といったところが私の用途には合わなかったため、 いっそのこと作ってしまったほうが早いかなと考え、作ってみました。 機能 モーダル用エレメントのopen属性の有無、及びaria-hiddenのtrue/falseの切り替え (開閉のアニメーションはCSSで実装) 背景をクリックまたはESCキー押下でモーダルを閉じる。 (HTMLの実装次第で背景クリック
八方塞がりなので、不本意ながらJavaScriptだけでつよつよパスワード認証を実装する。 - Qiita
ご注意 今回はお上のやんごとない事情で、仕方なくJSでパスワード認証を作っていますが、基本的には一般的に使われている認証方法…… 例えば簡単なところでいうとBasic認証であったり、Firebaseを使うほうが良いのは間違いありません。 さて…… 静的なファイルしか置けないサーバーを渡されたのだが…… 長くお仕事をしていると、事情都合にがんじがらめになっている要件に出会うことがあります。 静的なファイルしか置けないウェブサーバー サーバー自体の設定は触れない 外部サービスは使ってはいけない でも制限された領域内に情報を置きたい ？？？「◯◯さん、JSでどうにかできませんか？」 あなたはここで怒ることもできますし、鼻で笑ってそっぽを向くこともできます。 ただ僕は大人になってしまい…… 断るに断れない…… そんな事情も出てくるのです。 実際に作ったサンプル <!doctype html> <h
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
高機能で非依存のlightboxスクリプト・「lightgallery.js」
lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 Video等のサポート、iframeやGoogle Mapのサポート、20種から選べるCSS3 transitionsによるアニメーションエフェクト、各SNSへのシェアボタン、ハッシュプラグイン対応、フルスクリーン化対応などなど、よくあるlightboxの機能を詰め込んだようなもので且つ、jQuery等のライブラリに依存せず単体で動作してくれるのが特徴です。モジュールはオートプレイ、動画、フルスクリーン化等がデフォルトでビルトインされているみたいです。ファイルサイズは非圧縮の状態で42KB、圧縮版で24KBほどです。なかなか良いのでは。ライセンスはApache 2.0。 lightgalle
Transitions - Documentation - Vegas Background SlideShow
TransitionsVegas uses CSS3 transitions, older browsers will display a simple fade transition. $elmt.vegas({ slides: [ { src: '/img/slide1.jpg' }, { src: '/img/slide2.jpg' }, { src: '/img/slide3.jpg' } ], transition: 'fade' }); fadefade2slideLeftslideLeft2slideRightslideRight2slideUpslideUp2slideDownslideDown2zoomInzoomIn2zoomOutzoomOut2swirlLeftswirlLeft2swirlRightswirlRight2burnburn2blurblur2flas
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで【2015年版】も発表！ ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ（Library）をランキング形式で発表する。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
ドロップダウンメニューを実現するjQueryのスクリプト改 | Web Mugen
IE6ではa要素以外に:hover擬似クラスを使用できず、min-widthプロパティも効かないので、HTMLヘッダー内に以下のスクリプトを読み込んで対応する。 以下の様にul#dropdownmenu内にリストの入れ子をつくる。入れ子の数に制限はない。 <ul id="dropdownmenu"> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul></li> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul></li> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト
鼎盛国际游戏平台-［诚信第一］
鼎盛国际游戏平台-［诚信第一］是包含了新葡京、威尼斯人、金沙、BBIN电子、MG真人视讯、BET365等多个官方平台，游戏、体育、娱乐的第一首选，点击进入最新的娱乐集团网址:www.782net,www.2007com,www.9159com,www.js333com,使鼎盛国际游戏平台-［诚信第一］成为亚洲一流的娱乐平台,鼎盛国际游戏平台-［诚信第一］,注册免费送28元2015。
FlexSlider 2
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>
画像ローディング中にLoadingアニメーションを表示するjQueryプラグイン「How to Create an Awesome Image Preloader 」｜BLACKFLAG
最近ではWebページ上に多くの画像を表示するような場合には、 読み込むまでにLoadingアニメーションを表示してユーザーのストレスを軽減させる手法をよく見かけますが、 それを簡単に組み込むことができるjQueryプラグイン 「How to Create an Awesome Image Preloader 」が便利そうだったので紹介してみます。 ≫How to Create an Awesome Image Preloader | Nettuts+ ≫DEMO：Image Preloader デモ画面上で動作を確認すると以下の様な感じに。 DEMO：Image Preloader 単純に画像ロード中にLoadingアニメーションを表示するだけでなく 完了後は画像が順々にフェードインしてくる加減が気持ちいい。 Loading中は該当要素に対して「.preloader」のクラスを付加して、
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mgzl.jp