Vue.jsでカテゴリー分けされた画像リストを実装
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
midori - 背景画像を格好よくアニメーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。 今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行ってくれます。 midoriの使い方 サンプルです。画像が切り替わる際にグリッチが行われているのが分かります。 こちらは標準のアニメーション。エフェクトは自分で選択できます。 midoriは主に画像を背景として適用した場合を想定しています。そして画像が切り替わる際にアニメーションしたり、画像に対するエフェクトが指定できます。スタイリッシュな切り替えを指定することで、
CSSだけでサムネイルをクリックすると画像が切り替わるイメージギャラリー
Result こういうやつです。割と今更感な内容ですが書いてなかった気がするので 例によってinputと:checkedを使います css.gallery {/*親*/ display: flex; margin: 10px auto; max-width: 600px; position: relative; padding-top: 66.6666666667%; } .gallery__img {/*表示される大きな画像。エフェクト付き*/ position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in-out; } .gallery__thumb {/*サムネイル*/ padding-top: 6px; margin: 6px; display: block; } .gallery_
Distortion Hover Effect - マウスオーバーで画像を切り替え
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。 その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しかもそのアニメーションがかなり変わっています。 Distortion Hover Effectの使い方 二つの写真がダイナミックに切り替わります。 色の変化もスムーズです。 アニメーションも様々なパターンが用意されています。 自然に変わっているのが分かります。 これは目をひくでしょう。 Distortion Hover Effectを使うとマウスオーバー時に驚くくらい
Beer Slider Responsive & Accessible Before-After Slider
Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be easily implemented by those of you who are more comfortable with jQuery or
[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック
繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニックを紹介します。 2016年のインパクトのある成果物ベスト10には間違いなく入りますね。
![[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b80cbe84952c5181c714203d0bc43c4fa7b61af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052601.png)
[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch -GitHub pageSwitchのデモ pageSwitchの使い方 pageSwitchのデモ pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。 下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
![[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch](https://cdn-ak-scissors.b.st-hatena.com/image/square/fec6bf67d7730443566e7451a2e74cd7133ab866/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012501.png)
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
jQuery HDimg
[ jQuery HDimg ] jQuery plugin to serve double size images on Retina and other high resolution display This plugin is useful to auto load a double size image for high resolution displays. Simply it search for an img with a specific (that you can choose) suffix to use in case of Retina or other high density displays. Demo To see properly this plugin in action you need 2 different devices to see the
Captioner Js @ Nuno Franco da Costa - Freelance Web Developer
Why another caption plugin ? There are lots of caption plugins out there but CaptionerJs was propositally built to create clean and uncluttered HTML. CaptionerJs won’t burry your image inside layers of div's, instead it makes use of figure and figcaption to produce uncluttered and semantically correct HTML. You can write valid HTML, CaptionerJs will make use of title and alt attributes to create t
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
Inspiration for Item Transitions | Codrops
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use
jQuery ---- タブ(画像置換タイプ) - Qiita
jQueryを使ってタブを作ってみます。 このサンプルは自分で使うことを想定してるので作りが少々自分設定になってるますが、サンプル事態はきちんと動きました。 完成品イメージ↓ tab001に完成品をアップしておいたので動きはこっちで見てください。 ファイル構成 index.htmlHTMLのタグのみで、JavaScriptやCSSは外部ファイルで読み込みです。 selector.jsタブをクリックしたときの動きを扱う用のJavaScriptです。 selector.css今回のタブ用のCSSです。 コード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
Slippry - A responsive slider by booncon
Responsive Buzzword? Yes. Important? Very. We got frustrated at the lack of free, responsive sliders, so we wrote our own. Sure, there are some out there, but we found out the hard way, they have two settings or they use soon-to-be-deprecated functions. Oops. Modern HTML5 + CSS3 + jQuery Slippry is written with the future in mind, not the past. We wrote it to work on the latest jQuery functions, C
[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flavio on Twitter: "A little HTML trick you can use to show a different image in dark mode https://t.co/yyFIGAPRcA"
Blindify jQuery plugin - vertical demo #1
IDEA * IDEA
フルスクリーン、入れ子、RWD対応などをサポートしたスライドコンテンツを実装するスクリプト・「SLIDEME!」
