Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
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の配列を使って画
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_
How to Make a CSS-Only Carousel | CSS-Tricks
We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one. So, here’s what we’re making today: There’s no JavaScript here, whatsoever! No jQuery plugins. No trickiness. Just a couple of new-ish CSS properties that I’ve been experimenting with as well as some basic
タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider
デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 Tiny SliderはOwl Carouselにインスパイアされた、多目的用の軽量スライダーを実装するJavaScriptです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 シンプルなスライダーも下記のようなアニメーションを使ったスライダーも、非常に簡単なコードで実装できます。 多目的用のスライダー シンプルなスラ
CSSだけで3Dなカルーセル
Result 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時代になりましたね。 css#slideshow {/*全体*/ margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; background-color: #ddd; box-sizing: border-box; } .entire-content {/*カルーセルの見栄え。perspectiveで奥行きを設定する*/ margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px; } .content-carrousel {/*各画像を包括、アニメーションを設定*/ width: 100%; position: abso
アニメーション&フェードエフェクトで複数画像を表示する
Result css#CrossFade {/*コンテナ配置*/ background: #fff; display: flex; align-items: flex-end; height: 100vh; overflow: hidden; position: relative; } #CrossFade img {/*画像を重ね、透過とアニメーションでフェード効果*/ position: absolute; min-width: 100%; min-height: 100%; height: auto; background: #000; backface-visibility: hidden; opacity: 0; transform: scale(1.4); animation: CrossFade 24s infinite; } #CrossFade img:nth-child
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nextapps-de/spotlight: Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.