CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました

2023/11/28 147 users CSS ライブラリ HTML テクニック 動作

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦... 続きを読む

高坂 on Twitter: "スケッチ1枚からイラストやアニメーション、3Dモデルをリアルタイムに自動生成する実験をしています。 UIのスライダーでパーツの形状や色、質感を変更でき、ランダムな選

2022/09/16 119 users アニメーション 質感 リアルタイム 形状 実験

スケッチ1枚からイラストやアニメーション、3Dモデルをリアルタイムに自動生成する実験をしています。 UIのスライダーでパーツの形状や色、質感を変更でき、ランダムな選択も可能です。 クリエイターさんから絵を描いたことがない方まで、創… https://t.co/SwT91BcJqI 続きを読む

タコの滑り台は芸術品？　類似遊具を訴えた裁判で判決：朝日新聞デジタル

2021/04/28 118 users 滑り台 原告 被告 ダコ 判決

公園にある「タコの滑り台」は、著作物として保護されるべき芸術品かどうか――。この点が争われた著作権侵害訴訟の判決が28日、東京地裁であった。裁判長が示した判断とは……。 原告は、タコの足がスライダーや階段状になっている滑り台を1970年代に開発したデザイン会社（東京都）。被告の遊具製作会社（同）が、これとよ... 続きを読む

iPhoneの「長押し裏メニュー」いくつ知ってる？　空白ボタン「長押し」が便利すぎる！ | 文春オンライン

2019/03/29 59 users iPhone スワ 文春オンライン 手元 機種

いま、この記事をiPhoneでご覧の方、あるいは手元にiPhoneがあるという方は、iPhoneのコントロールセンターを表示して、明るさ調整のスライダーを、そのまま1秒ほど長押ししてみてください。コントロールセンターは、ホームボタンのない機種なら画面の右上から下に、ホームボタンのある機種なら画面の下の端から上にスワ... 続きを読む

Vue.jsベースのオープンソースUIコンポーネントフレームワーク・「Vuesax」 | かちびと.net

2018/09/07 54 users グリッド コンポーネント タブ Vue.js カラースキーム

Vuesax VuesaxはVue.jsベースのUIコンポーネントフレームワークです。Vue.jsを使ったアプリケーション開発をサポートしてくれます。カラースキームやグリッド、フォーム、タブなどの基本UIはもちろん、スライダーやカード、ページネーションなども用意されており、それぞれのコンポーネントではさらに細かなスタイルを選... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users モーダル コリス アコーディオン パララックスエフェクト ほか

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js | コリス

2018/04/16 51 users コリス jQuery カルーセル Glide.js CSS

jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 ... 続きを読む

Google、動画で群衆の騒音のなかから1人の音声を分離する技術 - PC Watch

2018/04/13 65 users 群衆 騒音 Goole 音声 YouTube

サンプル動画。スライダーが中心の「ALL」にあるのが元の状態。「RORY」や「JOHN」にスライドさせると、ほとんどその人物だけの音声になる 　米Googleは11日(現地時間)、騒音のある中で複数人が会話をしているような動画のなかから、特定の人の音声だけを分離する技術を開発したと発表した。 　この技術の根底にあるのは機械学習で、GooleではYouTubeに上がっている10万本の高画質動画を選出... 続きを読む

Webデザインでスライダーが効果を発揮するとき | UX MILK

2018/02/28 68 users UX MILK webデザイン 効果 Agency 賛否両論

Alan Smithは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置く SPINX Digital Agency と連携して仕事をしています。 Webデザインの スライダー や スライダーコントロール の使用について、デザイナーにとっては賛否両論です。好きな人もいれば、嫌いな人もいます。タイミングが悪いカルーセルパネルや、ギャラリーの... 続きを読む

[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider | コリス

2017/11/08 67 users スクリプト コリス 単体 HTML 軽量

スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny Slider Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 シン... 続きを読む

JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる | コリス

2017/10/17 93 users 見栄え スクロール スワイプ コリス アニメーション

スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScript... 続きを読む

レスポンシブに対応しててCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい – Rriver

2017/09/07 57 users Rriver カルーセル レスポンシブ CSS プラグイン

ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応していて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に長し 襷に短し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できる... 続きを読む

Lightroom専用編集コントローラーを3000円台で作るロマンセッティングを紹介する！ | studio9

2017/08/11 64 users studio9 Lightroom 3000円台 マウス 種類

Lightroomの現像パラメータは様々な種類があり、その一つ一つをマウスを使いながら調整しなければなりませんが、これらを専用の物理ノブ（つまみ）やスライダーでグリグリ調整出来たら楽しそうですよね。ということで今回はLightroomの専用コントローラーを3000円台で実現する方法を紹介します。 Lightroom専用コントローラーでグリグリ編集したい！ Lightroomの現像パラメータは露光量... 続きを読む

目的にあったJavaScriptのライブラリを探す時にかなり便利、JavaScript専門の検索エンジン -searchlibs | コリス

2017/06/18 133 users カルーセル コリス スクロールエフェクト ナビゲーション 目的

スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、ア ...記事の続きを読む 続きを読む

『Conan Exiles』陰茎スライダーはXbox One版に実装されない、家庭用の下半身露出は完全アウト | AUTOMATON

2017/03/09 93 users AUTOMATON Conan Exiles 下半身露出

オープンワールド・サバイバルゲーム『Conan Exiles』を販売するFuncomは、今春のリリースを予定しているXbox One版にいわゆる“陰茎スライダー”が実装されない可能性が高いことを明らかにした。同作はキャラクターエディットに男性器の大きさを調整できるスライダーを備えていることに加えて、男性キャラクターの陰茎と睾丸がジャンプしたりしゃがんだりするたびにUnreal Engine 4の物... 続きを読む

痛いニュース(ﾉ∀`) : 【WBC】 山田のホームラン、ファンがキャッチしてしまい二塁打に - ライブドアブログ

2017/03/07 138 users 打球 ライブドアブログ 一直線 ＷＢＣ 球場

【WBC】 山田のホームラン、ファンがキャッチしてしまい二塁打に 1 名前： チキン ★＠＼(^o^)／ ：2017/03/07(火) 20:54:05.89 ID:CAP_USER9.net 四回、２死二塁での３打席目。２ボール１ストライクから４球目、１２２キロのスライダーを狙った。打球は一直線に左翼方向へ。そのままスタンドに消えたかに思われたが、三塁審判は二塁打の判定。球場が一時騒然となった。... 続きを読む

最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ | コリス

2017/02/15 353 users CSS コリス テクニック スマホアプリ タイムライン

Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、 ...記事の続きを読む 続きを読む

『Conan Exiles』陰茎調整と性器物理に見る常識という名の没入感、乳揺ればかりがリアルじゃない | AUTOMATON

2017/02/07 296 users AUTOMATON Conan Exiles 没入感 常識

先月末にSteamで早期アクセス販売が始まったオープンワールドサバイバル『Conan Exiles』が、ゲームと直接的に関係のない部分で大いに脚光を浴びている。同作はキャラクターエディットに男性器の大きさを調整できるスライダーを備えていることに加えて、男性キャラクターの陰茎と睾丸はジャンプしたりしゃがんだりするたびに、Unreal Engine 4の物理演算によって実際に揺れる。これまでペニスの造... 続きを読む

ウェブ制作で差がつく！コピペ可能なHTML/CSSスニペット50個まとめ 2016年10月度 - PhotoshopVIP

2016/10/21 129 users Ｒｕｎ ホバーエフェクト PhotoshopVIP 一味 工夫

ウェブ制作で差がつくテクニックを コピー&ペーストで利用できる HTML/CSS スニペット をまとめてご紹介します。最新のデザインテクニックを駆使したレイアウトやスライダー、ボタンエフェクト、ホバーエフェクトなど ユーザーがたのしむことができる 工夫のつまった作品が数多く公開されています。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみてみましょう。 「Run... 続きを読む

[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch | コリス

2016/01/25 60 users コリス スクリプト アニメーション カーテン 古いＩＥ

縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch... 続きを読む

フォトショやイラレが物理コントローラーのツマミ・フェーダーで操作可能になるモジュール式コントローラー「Palette」 - GIGAZINE

2016/01/21 242 users GIGAZINE イラレ フォトショ Palette ダイヤル

Adobeが提供しているPhotoshopやIllustratorの操作を、マウスやキーボードとは別にボタンやフェーダー(スライダー)、ダイヤルなどで行うことができるコントローラーが「 Palette 」です。Paletteは各コントローラーにソフトウェアの機能を割り当てることで、ハードウェアコントロールを可能にし、より直感的な操作を行うことができるようになっています。 Palette Gear:... 続きを読む

[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider | コリス

2015/12/04 54 users jQuery Unslider コリス スクリプト スライド

シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。 キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量 スクリプトは6KBで、超軽量です。 スライドの方向は多... 続きを読む

[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop | コリス

2015/09/01 72 users コリス stylesheet rotate スクリプト

アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="pa... 続きを読む

[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat | コリス

2015/07/30 69 users chocolat lightbox コリス ウィンドウ デモ

デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。 スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。 Chocolatの特徴 個人ユーザーからプロのWeb制作者まで 専門的な知識がなくても簡単に実... 続きを読む

jQueryを使ったスライダーの作り方とその仕組み｜あぽぶろ

2015/07/21 79 users jQuery 作り方

Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することができます。 自分で作ることができるようになると仕様をプ... 続きを読む