#縦型ブラインド | Explore Tumblr Posts and Blogs

fukuinorisuke · 7 years

Quote

目撃証言 (とおりすがり) 2009-09-20 09:50:34 　あの日のことを昨日のように思い出します。あの機体後部の窓際にすわっていらした赤い服の、あの若い女性はだれだったのでしょう。超低空で尾根を越えてきた見覚えのない垂直尾翼の小さなスマートな機体が私の目の前を通り過ぎるとき。ほとんどの窓がブラインドをおろしていて外が見えないようになっていた。その数少ない開いている窓に座っていた赤い服の彼女。私が手を振ると座席から立ち上がり両手の平でガラス窓をバンバンとたたいて何か叫んでいた。その娘の叫びが助けてといっているように見えたので不思議に思った。生き残った方たちの中で尾根すれすれに飛び越えていくとき自衛隊の車を見たと証言されていた人がいたと思うがそれはたぶん私のことではないだろうか。自衛隊がジープの後ろにトレーラーを引いていることがあるが、私はそうした格好でそこにいた。　その機体は私たちの視界に入ってくるまで異常なエンジンの使い方をしていた。飛行機の場合空ぶかしはしない。ましてレシプロならいざ知らずジェットエンジンはそんな使い方は命取りだと認識していた。ゴーヒューンゴーヒューンとエンジンの出力を細かに上げ下げしている。私の目の前を通過するときはフルスロットルになっていた。　フラップをかなり下げ主脚を出してまるで着陸態勢のようだった。当然その地域には空港が無く着陸はできないのだが、その機体は上昇をはじめた。まるでレシプロ機のように頭をあまり上げずに上昇していく。その飛び方は安定していて異常は特に見えない。さっきまでのエンジンの使い方はなんだったんだろうと思った。　その機体の後ろ姿を見ていた。私の記憶にない垂直尾翼の形。きれいな三角形をした垂直尾翼の頂上付近に後ろにわずかにパイプのようなものが出ていてラジコン機にあるようなアンテナコードのようなものがたなびいていた。そしてその後ろに長くテールコーンが伸びている。つまり垂直尾翼が通常より前に付いているように見えた。　私は自分で操縦桿を握って離着陸をしたことのある者だ。飛行機には普通の人より詳しい。その私に見たことのない新型機と目に映った。外見的に何処か破壊されているような場所は見えない。唯一私の認識では垂直尾翼の面積が小さいように思った。それだけだった。その後の報道で隔壁破壊によって機体後部に大きな損傷をおっていたと報道されたため私はあの機体が１２３便だったとは思わなかった。　その機は上昇していったあと右に小さく旋回して佐久方面へ機首を向け急降下していった。そのあと山の向こうへ行ってしまった。派手な操縦をするなあとこのへんは訓練空域か何かなのかなと思った。また例のヒューンゴーが始まり遠ざかっていく音だけが響いていた。その時、今度はやはり低速でエンジン出力を絞って山肌を縫うように一機のＦ４ファントムが飛来した。その機は樹木のわずか数メートル上を神業のような飛行技術で飛び越えていく。嘘だろう私は叫んでいた。そのＦ４は確かに自衛隊機だと思う。日の丸が付いていたと思うのだが。記憶が確かでない。その混乱の原因が彼のかぶっていた派手めのヘルメットだ。あのトップガンのかぶるようなヘルメットと目があったときの感じだ。外人だったかもしれないような印象がある。彼はこちらをちらっと見た。　わずか数秒間の出来事だがあまりのことに印象深く記憶に残っている。そのＦ４はフル実戦装備の機体であった。見慣れたサイドワインダーだけでなく四角い箱断面の大型ミサイルも装備していたように思う。それがさっきの大型機を追うように飛んでいったのだ。まるでその飛び方はレーダーを回避して隠密に飛行する訓練をしているかのようだった。　私はその“訓練機”達が飛び去った方向をじっと見ていました。もうあのジェット音は聞こえません。その刹那。ピカッと閃光が、そして弧を描いて二本のリングが広がりバシリっと鋭い直雷のような音。その後二三秒してドーンゴロゴロゴロと遠雷のような音が広がりえっなんだこの雷。まだこちらは雲もなく雷雨にはなりそうもないのだが。でも山の天気は変わりやすいので早めに撤退しようと車に戻った。　目的地に向かう途中あのニュースを聞いたのだが、さっきの飛行機は違うよねとそうだよあれはチャンと飛んでいたじゃない。そう、素人目には何の異常もなくコントロールされて無事に飛んでいる飛行機。そのものだったのです。テレビの報道のように後部がめちゃめちゃに壊れてバレルロールという激しいゆれに翻弄されたコントロールできない飛行機にはみじんも見えなかった。　飛行機には詳しいはずの私が、新型機かと思ったのは、その破壊されたはずの垂直尾翼がナイフで切ったように真っ直ぐにきれいに切り取られた形をしていたからだ。まるで初めからそうした形で作られたようにしか見えなかったのです。それだけではありません。散々報道されたあの隔壁破壊を感じさせるテールコーン廻りの破壊が全く見えなかったのだ。ですから二〇年後になって発売されたあの本を読むまで、あの機体が１２３便であった事に気づきませんでした。　それからあらゆる資料を調べ、ある事実に気付きました。その結論は今回は陳べずにこの目撃事実のみをお知らせいたします。あの赤い服の娘さんはどうなったのでしょう。あの死体がそうだったのでしょうか。頭頂部を前後に割られ脳味噌が吹き飛んだあの死体。膝と左手を地面に付け右手を挙げて助けを呼ぶような姿のまま。蝋人形のように固まって生きているかのように見えたあの女性。座った姿のままやはり頭頂部を吹き飛ばされた男性。彼らの死に方の意味は。

JAL123便墜落事故－真相を追う－闇夜に蠢くもの(5) - (新) 日本の黒い霧

1 note · View note

chihilog · 5 years

Photo

みなさんは窓まわりに何を取りつけていますか？カーテン、ブラインド、ロールスクリーン……。窓の装飾を「ウィンドウトリートメント」というそうですが、最近はいろいろな種類があって、どれをつけようか迷ってしまいますよね。なかでも「窓まわりがスッキリする」と人気の高いブラインドに、縦型があるって知っていましたか？それが「バーチカルブラインド」。モダンな印象でデザイン性が高く、優しい光を取り込める「… http://bit.ly/2GaNkDg http://bit.ly/2G1uEXs

#Pinterest #インテリア

0 notes

carguytimes · 5 years

Text

【DEBUT】ランドローバーディスカバリー.さらに安全性が高まった2019年モデル登場！

運転支援システムが充実した「ディスカバリー」2019年モデル。ジャガー・ランドローバー・ジャパンは、ディスカバリーの2019年モデルの詳細を発表、全国のジャガー・ランドローバー・ジャパン正規販売ディーラーにて受注がスタートした。 2019年モデルでまず筆頭に挙げるべきは、充実したドライバー支援システムを標準装備したことだ。エマージェンシーブレーキやレーン・キープ・アシスト、ブラインド・スポット・アシスト360 度パーキングエイドのほか、パークアシスト（縦列駐車・出庫/並列駐車支援システム）やサラウンドカメラ、さらにアダプティブ・クルーズ・コントロール（ACC）などを装備する。特に都市部での使用では有り難いデバイスが揃ったと言えるだろう。また、2019年モデルの新たな機能として、制限速度などの標識をインストゥルメントクラスターやヘッドアップディスプレイに表示するトラフィック・サイン・レコグニションと、後席乗員が降車する際に、接近する車を検知して注意を促すクリアエグジット・モニターを標準装備したことが挙げられる。これに加えて、車線を認識して中央の走行を維持し、30km/h 以上であれば車線のない道路でも前車を追従するステアリングアシスト機能付きACCをオプション設定した。アクティブ派の「GO-OUT EDITION」ランドローバーのブランド誕生 70 周年を記念した、特別仕様車「DISCOVERY GO-OUT EDITION」を40 台限定で導入したのも大きなトピックだ。家族や仲間とともに冒険に出かけ（GO OUT）、アクティブなライフスタイルを提案する。「DISCOVERY GO-OUT EDITION」は、ディスカバリーの特徴であるフルサイズ 7 シートの設定をリモートで変更できる「リモート・インテリジェント・シートフォールド」をはじめ、ヒーテッド・ステアリングホイールやヒートシーター、各種キャリアアクセサリーの装着が可能なルーフレールなど、アウトドアライフに応える装備を充実させた特別仕様車。パノラミックルーフや、500mlのボトルが4本収納でき、温度を5度に保つフロントセンターコンソール・クーラーボックスなど、快適性や利便性も兼ね備える。エクステリアカラーは、フジホワイト、コリスグレー、ロワールブルーの3色。インテリアカラーはエボニーで統一した。今年は、これまでSUVには無縁と思われていた超高級車ブランドや純スポーツカーメーカーが次々とラグジュアリーSUVを発表した年だった。おそらく来年以降もこの傾向は続くだろう。ラグジュアリーSUVは群雄割拠、乱世の時代に突入した観がある。このカテゴリーで、ランドローバーは自他共に認める老舗。彼らにとっては、需要が高まっている好機に乗じてシェアを拡大すべきときを迎えているように思う。今回、概要が発表になったディスカバリー2019 年モデルが、乱世を生き延びるランドローバーが放つ「一の矢」であることは間違いない。【車両本体価格（税込）】 3.0リッターV型6気筒ガソリン・エンジン搭載モデル DISCOVERY HSE　8,509,000円 DISCOVERY HSE LUXURY　9,733,000円 3.0リッターV型6気筒ディーゼル・エンジン搭載モデル DISCOVERY HSE　8,709,000円 DISCOVERY HSE LUXURY　9,933,000円 DISCOVERY GO-OUT EDITION （限定40台／3リッターV型6気筒ディーゼル・エンジン） 9,499,000円【関連リンク】ランドローバーコール TEL 0120-18-5568 https://www.landrover.co.jp/ TEXT／相原俊樹（Toshiki AIHARA）（GENROQ Web編集部）あわせて読みたい * 【TOPIC】720Sスパイダー？マクラーレンが最新モデルを12月に発表すると公表。 * 【初試乗】打倒ポルシェを狙う「マセラティレヴァンテトロフェオ & GTS」《動画レポート》 * 【DEBUT】最新世代のeDriveテクノロジーを搭載した「BMW 330e」登場！ * 【NEWS】ジャガーランドローバー、今度は「信号と会話を交わす」技術を開発！ * 【NEWS】マクラーレンのカーボン技術センターにウィリアム王子とキャサリン妃が来場。 http://dlvr.it/QrqGrt

0 notes

rakugoinfo · 4 years

Text

ウッドブラインドタチカワブラインドフォレティアエグゼ 50

#落語 #立川らく次 [GadgetGan]秋から冬、春にかけては、防寒対策として次のものも準備するとよいでしょう ... タチカワブラインドウッドブラインドブラインドカーテン木製ブラインド立川ブラインドバーチカルブラインド縦型ブラインドブラインドリベット掃除カーテンレール ...

#rakugo

0 notes

osakiakiko · 2 years

Photo

#Repost @nichibei.blind ・・・バーチカルブラインドは横から差し込む光を遮るために、太陽高度が低い北欧で生まれたといわれています。北欧のモダンハウスをイメージしたリビングと相性抜群です。バーチカルブラインド「アルペジオ」フェスタⅡ　A9727（クールグレイ） #nichibei #ニチベイブラインド #ニチベイ #ブラインド #縦型ブラインド #タテ型ブラインド #アルペジオ #おしゃれな家 #お家時間を彩る #窓際インテリア #オシャレな家 #おしゃれな家づくり #こだわりのある家 #理想のお家 #こだわりのマイホーム #窓周り #家づくり #マイホーム記録 #暮らしをデザイン #お家づくり記録 #北欧モダンな家 #理想の家づくり #窓辺インテリア #大きな窓があるおうち #心地いい家 #住まい #暮らしを楽しむ#ペンダントライト #osakiakikoworks https://www.instagram.com/p/CZeDrOxF121/?utm_medium=tumblr

0 notes

413-request-entity-too-large · 5 years

Text

Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。

スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。

これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。

ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。

コンテンツ目次

1. イメージスライダー系

2. テキストエフェクト系

3. テキストエフェクト系スニペット

4. ページレイアウト系

5. ナビゲーションメニュー系

6. ローディングアニメーション系

7. SVGアニメーション系

8. 便利、面白系スニペット

9. 未来SF系

10. ゲーム系

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ

イメージスライダー系スニペット

Showtime Parallax Effect

See the Pen Showtime Parallax Effect by Ali Klein (@AliKlein) on CodePen.

Variable Fonts Experiment

スライドに合わせてフォントの太さが変化する、Variableフォントを実際に活用したサンプル例として。

See the Pen Variable Fonts Experiment by Supremo (@SupremoHQ) on CodePen.

Ghibli Slider

スタジオジブリの海外公開作品をスライド形式でまとめており、画像のトランジションにはあのキャラクターも登場です。

See the Pen Ghibli Slider by Adam Kuhn (@cobra_winfrey) on CodePen.

Animated Portrait w/ GSAP 2.0

下部に配置してあるボタンをクリックすることで、写真立てがインタラクティブに切り替わるスライダーエフェクト。

See the Pen Animated Portrait w/ GSAP 2.0 by Darin (@dsenneff) on CodePen.

React Slider w/ Hover Effect

React.JSに対応した3Dホバーエフェクト付きのイメージスライダー。

See the Pen React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen.

テキストエフェクト系スニペット

Movin bodymovin

Airbnbから登場したiOS、 Android、React Native対応のアニメーションライブラリ「Lottie」をつかったサンプル例で、最近のアップデートによりAfter Effectsプラグインも公開されました。

See the Pen Movin bodymovin by kittons (@airnan) on CodePen.

Splitting: Laser Write

See the Pen Splitting: Laser Write by Martin Pitt (@nexii) on CodePen.

Variable font animation

タイミングに合わせてVariableフォントの太さを変更することで、まるで呼吸をしているようなアニメーションが完成です。

See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen.

Animated Verbs II

Variableフォントを利用することで、まるで文字テキストが生きているようなアニメーションが魅力的。

See the Pen Animated Verbs II by Ryan Mulligan (@hexagoncircle) on CodePen.

Animated Verbs

上記スニペットに続き、文字テキストがジャンプしている様子をCSSで表現しています。

See the Pen Animated Verbs by Ryan Mulligan (@hexagoncircle) on CodePen.

Procedurally Generated CSS Numbers

お好みの数字を入力しボタンをクリックすると、カラフルでユニークなタイルでその数字を表現します。

See the Pen Procedurally Generated CSS Numbers by Adam Kuhn (@cobra_winfrey) on CodePen.

CSS Neon Sign

CSSのみを利用してネオンライトのような光を表現できるスニペット。

See the Pen CSS Neon Sign by Ananya Neogi (@ananyaneogi) on CodePen.

Cassie!

筆記体を手書きしたような表現豊かなアニメーションで再現したテキストエフェクト用スニペット。

See the Pen Cassie! by Cassie Evans (@cassie-codes) on CodePen.

Matrix digital rain (animated version)

CSSアニメーションを利用して、文字テキストがずらずらと表示される某映画のようなエフェクトを実現しています。

See the Pen Matrix digital rain (animated version) by yuanchuan (@yuanchuan) on CodePen.

Variable Fonts | Compressa

文字テキストにマウスカーソルを合わせることで、フォントの太さを瞬時に変更でき、Variableフォントの可能性を感じるスニペット。

See the Pen Variable Fonts | Compressa by Juan Fuentes (@JuanFuentes) on CodePen.

ボタンエフェクト系スニペット

Order confirm animation

ボタンをクリックすると、トラックが荷物を受け取り、商品の配達に向かうアニメーションが素敵です。

See the Pen Order confirm animation by Aaron Iker (@aaroniker) on CodePen.

Call to Action Hype Man

ボタンをクリックしようとすると、後ろから落書きのようなキャラクターが登場するアニメーション付き。

See the Pen Call to Action Hype Man by Mariusz Dabrowski (@MarioD) on CodePen.

https://codepen.io/aaroniker/pen/KjJQER

ボタンをクリックするとダウンロードが開始され、進捗状況をアニメーション付きプログレスバーで確認できるエフェクト。

See the Pen Download button animation by Aaron Iker (@aaroniker) on CodePen.

Mouse cursor pointing to cta

ボタンをクリックしようとマウスを周辺に移動させると、ポインターカーソルがボタンの方向を指差します。

See the Pen Mouse cursor pointing to cta by Aaron Iker (@aaroniker) on CodePen.

Paint Drop Hover

マウスクリックしたポジションに応じて、インクが垂れたようなドリップを表示するホバーエフェクト。

See the Pen Paint Drop Hover by Mariusz Dabrowski (@MarioD) on CodePen.

ページレイアウト系スニペット

CSS Grid: Magazine Layouts

CSS Gridレイアウトを活用することで、まるで雑誌のようなレイアウトを自由自在に作り上げます。フルスクリーンでの表示推奨です。

See the Pen CSS Grid: Magazine Layouts by Olivia Ng (@oliviale) on CodePen.

CSS Grid: Coupons!

まるで地元スーパーのチラシのようなレイアウトをCSS Gridで実現したレイアウト例。

See the Pen CSS Grid: Coupons! by Olivia Ng (@oliviale) on CodePen.

Color this sofa! – SVG + Blend Mode trick

ソファの色と背景色をSVGとCSSブレンドモードを使って、リアルタイムにプレビューできる機能。Generate Randomでランダムで色が決まります。

See the Pen Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton) on CodePen.

Anime.js Ease Visualizer

アニメーションにおけるイージングを分かりやすくまとめ、視覚化したAnime．js用ライブラリ。

See the Pen Anime.js Ease Visualizer by Julian Garnier (@juliangarnier) on CodePen.

Agency website POC

これまでの制作実績をまとめたポートフォリオ用レイアウトで、マウススクロールとクリックのみで進めることができるコンテンツ遷移にも注目です。

See the Pen Agency website POC by Jamie Coulter (@jcoulterdesign) on CodePen.

Twotwentytwo.se – smooth scroll with skew effect

マウスをスクロールさせると画像や文字テキストが歪みながらスムーズに表示される仕掛け。

See the Pen Twotwentytwo.se – smooth scroll with skew effect by jesper landberg (@ReGGae) on CodePen.

How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript

サムネイル画像で振り分けソートできる機能のついた、CSS GridとFlexboxを組み合わせたレイアウトサンプル例。

See the Pen How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

To-do list

残っているタスクをクリックすると、チェックマークがアニメーション付きで点灯するToDoリスト用レイアウト。

See the Pen To-do list by Sabine Robart (@_Sabine) on CodePen.

CSS Gradient Counter List

リスト表示の番号を美しいグラデーションを使って、少しずつ色を変化させるCSS小技テクニック。

See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen.

Assorted cards & images (CSS Grid + BEM)

CSS Gridを利用することで、これまでは難しかったレイアウトをより手軽に、そして自由に作成できるようになりました。

See the Pen Assorted cards & images (CSS Grid + BEM) by Stephen Lee (@abcretrograde) on CodePen.

Bubble Toggle

トグルをクリックすると、泡がぱちんと弾けながら切り替わります。

See the Pen Bubble Toggle by Chris Gannon (@chrisgannon) on CodePen.

Pro Illustration (click the toggle!)

トグルを使うことでブラインドの開閉を行うことができるアニメーションイラストレーション。

See the Pen Pro Illustration (click the toggle!) by Klare (@klare) on CodePen.

Pure CSS Bulb Switch

CSSのみでスタイリングした淡い光が印象的だったトグルスイッチ。

See the Pen Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg) on CodePen.

CSS – Frosted Glass

背景にぼかしガラスを重ねたようなエフェクトをCSSのみで実現したテクニック。

See the Pen CSS – Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.

CSS Particles

画面全体を縦横無尽に飛び回るカラフルなシェイプをCSSアニメーションで描いたデモサンプル。

See the Pen CSS Particles by rx0079 (@re0079) on CodePen.

Clip Clop Clippity Clop [CSS Only]

走る馬をクリックすると、どのようにCSSでスタイリングしたのかスローモーションで確認できます。

See the Pen Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg) on CodePen.

Dither / Dissolve CSS Gradients

さまざまなシェイプをCSSスタイリングで描き、そこにザラザラとしたグランジ感も一緒に追加していきます。

See the Pen Dither / Dissolve CSS Gradients by David J. Aldred (@DavidJAldred) on CodePen.

Zdog and Goo

��インボーカラーのサークル円が立体的に回転しながら、形を変化させていくユニークなスニペット。

See the Pen Zdog and Goo by Chris Gannon (@chrisgannon) on CodePen.

Pure CSS Only Portrait – Isla

CSSのみでスタイリングされたとは思えないほどリアルな少女の表情を描いたポートレイトイラスト。

See the Pen Pure CSS Only Portrait – Isla by Ben Evans (@ivorjetski) on CodePen.

CSS-only chronometer

CSSのみでデザインされたストップウォッチで、再生と停止ボタンを見事に稼働するテクニック。

See the Pen CSS-only chronometer by Tamer Aydn (@tameraydin) on CodePen.

Pixi Sprite Bubbles

マウスをドラッグしたところから、ぷくぷくと泡が飛び出てくるエフェクト。

See the Pen Pixi Sprite Bubbles by Juan Fuentes (@JuanFuentes) on CodePen.

Simple CSS Waves | Mobile & Full width

ゆらゆらと波のように揺れながら変化する様子をCSSで表現したテクニックで、モバイル端末でもうまく表示することができます。

See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen.

コンテンツがどれくらい残っているのか確認できる、トップへ戻るボタンのつくり方。

See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

Cursor with progress indicator

上記サンプル同様に、コンテンツがどのくらい残っているかを確認できますが、こちらではマウスカーソル自体を使っています。

See the Pen Cursor with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

Google-like Thanos disintegration

表示されているカード型コンテンツをクリックすると、灰のようになって散るアニメーション。

See the Pen Google-like Thanos disintegration by Johan Fagerbeg (@birjolaxew) on CodePen.

ナビゲーションメニュー系スニペット

Untitled

表示されたアイコンをクリックすると、詳細が文字テキスト付きで表示されるナビゲーションメニューで、モバイルアプリなどで便利な使い方かもしれません。

See the Pen jONPjoV by Steve Gardner (@ste-vg) on CodePen.

Transparent Navbar & Hero

Bootstrapフレームワークでナビメニューとヒーローイメージを重ねた透明なデザインが特長で、レスポンシブにも対応しています。

See the Pen Transparent Navbar & Hero by Allen Pavic (@alvic) on CodePen.

Responsive Bootstrap mega menu

こちらもBootstrapフレームワークのナビメニューを拡張し、メガメニューでさまざまなコンテンツをまとめて表示できるスニペット。

See the Pen Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps) on CodePen.

Wobbly underline

各アイコンをクリックすると、下線ラインがグラグラしながらアニメーション変化するシンプルなナビメニュー。

See the Pen Wobbly underline by Mikael Ainalem (@ainalem) on CodePen.

Fork This Nav

シンプルで明快なナビメニューにCSSスタイリングを加えることで、ユニークなアニメーションが印象的なハンバーガーメニューの展開を表現しています。

See the Pen Fork This Nav by Ryan Mulligan (@hexagoncircle) on CodePen.

ローディングアニメーション系スニペット

フォントの間を飛び回る点が見ていて飽きないローディング画面。

See the Pen Loading by Katherine Kato (@kathykato) on CodePen.

Cassette Tape Loader

カセットテープがくるくると回転するオールドスクールなローディングアニメーション。

See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen.

Loader turbulence

ゆらゆらと揺れながら文字テキストが表示されるなどタービュランス、乱気流を表現しています。

See the Pen Loader turbulence by Damien Montastier (@damienmontastier) on CodePen.

CurveBall

赤と青それぞれの半円がコロコロ転がることで、サークル円を作り出すローディングアニメーション。

See the Pen CurveBall by Chris Gannon (@chrisgannon) on CodePen.

Rotating Rounded Triangles Animation (SCSS)

丸みのある三角形が規則的に動くことで、目の錯覚を利用して立体的に見えるローディング画面。

See the Pen Rotating Rounded Triangles Animation (SCSS) by Mark Miscavage (@markmiscavage) on CodePen.

CSS Loading Animations

シンプルな図形を組み合わせて完成したローディングアニメーション6種類をまとめたライブラリ。

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

custom css wave loader

CSSをつかって水面の波紋を表現したローディングアニメーション。

See the Pen custom css wave loader by CSS Points (@csspoints) on CodePen.

SVGアニメーション系スニペット

3-Layer Cloud Composite

3つのSVGレイヤーを重ねることで、立体的でよりリアルな雲模様を表現できるCSSスタイリング。

See the Pen 3-Layer Cloud Composite by BEAU.HAUS (@beauhaus) on CodePen.

便利、面白系スニペット系スニペット

Sunbeams

背景の画像に合わせて、光が差し込む様子をアニメーション付きで表現しています。

See the Pen Sunbeams by Ko.Yelie (@ko-yelie) on CodePen.

Sketchpad

カンバス上を鉛筆をつかって自由にお絵かきできるスケッチパッドで、鉛筆の色を変更したり、描いたスケッチをPNGで保存することもできます。

See the Pen Sketchpad by Brad Arnett (@bradarnett) on CodePen.

Neon Clock (Using React Hooks)

現在時刻をネオンサインで表示しながら、正確な時間を文字テキストでも伝えます。

See the Pen Neon Clock (Using React Hooks) by Ganesh Prasad (@gnsp) on CodePen.

Image glitch effect

CSSのみを利用することで、画面全体にグリッチエフェクトを再現できるテクニック。

See the Pen Image glitch effect by Alain (@AlainBarrios) on CodePen.

Vue-controlled Wall-E

マウスカーソルに合わせて動くコミカルなDisneyの某キャラクターを再現したスニペット。クリックすると音が出る仕掛けも。

See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.

Strandbeest walk

マウスの動きに合わせて進行方向や速度が変化していきます。

See the Pen Strandbeest walk by Nick Watton (@2Mogs) on CodePen.

CSSCities

大都市の街並みをCSSのみでスタイリング、デザインしたユニークな作品。ポップアップで飛び出るエフェクトにも注目です。

See the Pen CSSCities by Adam Kuhn (@cobra_winfrey) on CodePen.

100 years of Bauhaus

ドイツのバウハウス誕生100周年を祝うCSSデザイン。

See the Pen 100 years of Bauhaus by Juan Ignacio (@juanignaciorios) on CodePen.

未来SF系スニペット

[wip] motion blur transition

まるでアーケードゲームの世界をそのまま表現したような、鮮やかな80年代ネオンエフェクトを実現しています。

See the Pen [wip] motion blur transition by Robin Delaporte (@robin-dela) on CodePen.

Three.js Mobile VR Sonic

VR体験ができるスニペットで、クリックでジャンプするなど本格的なつくり。

See the Pen Three.js Mobile VR Sonic by Baron (@b29) on CodePen.

Strange Tubes #2

光沢感のあるチューブが七色に色を変化させながら、グニャグニャと形を変えるユニークなThreeJSコレクション。

See the Pen Strange Tubes #2 by Kevin Levron (@soju22) on CodePen.

AI Assistant Blob

人工知能を活用することで、立体的でもこもことしたシェイプをデザインできます。

See the Pen AI Assistant Blob by Aaron Iker (@aaroniker) on CodePen.

Untitled

きらびやかに無数の桜の花びらが舞う様子を描いた高画質なアニメーション。

See the Pen tqdmv by Anand Davaasuren (@at80) on CodePen.

WebGL Wonderland #7

WebGLアニメーション技術を使うことで、驚くほど立体的なアニメーションを表現できます。

See the Pen WebGL Wonderland #7 by Colin van Eenige (@cvaneenige) on CodePen.

The Plastic Ocean

プラスチックが漂う海の中を泳ぐクラゲのような生き物を、マウスカーソルで操作できます。

See the Pen The Plastic Ocean by Onload (@onload) on CodePen.

3D Software Vertex Ocean

超高速で光り輝く粒子の間を通り抜ける、疾走感のたまらないアニメーションが魅力です。

See the Pen 3D Software Vertex Ocean by Radik (@H2xDev) on CodePen.

The Starry Night

ゴッホの名作を立体的な粒子状に表現した作品で、WebGL技術を用いることで圧倒的なグラフィックを描きます。

See the Pen The Starry Night by Darryl Huffman (@darrylhuffman) on CodePen.

Energy

ビリビリと飛び回るエネルギーがマウスカーソルに合わせて動き出します。

See the Pen Energy by Thibaud Goiffon (@Gthibaud) on CodePen.

Exploding Points

点と点で結ばれた線が、七色の美しい色合いに染まりながら広がっていくアニメーションで、数値も自由に調整できます。

See the Pen Exploding Points by Devamardeep Hayatpur (@devamar) on CodePen.

ゲーム系スニペット

The Cube

ランダムなルービックキューブを色ごとにきちんと揃えていきましょう。ダブルクリックでゲーム開始です。

See the Pen The Cube by Boris Šehovac (@bsehovac) on CodePen.

30 – 50 hogs

歩行者に注意しながら、突進してくる豚のみを撃ち抜くシューティングゲーム。最後のオチも素敵。

See the Pen 30 – 50 hogs by Cassie Evans (@cassie-codes) on CodePen.

Space Shooter game

矢印キーで左右に移動しながら、Spaceバーで弾を打つシューティングゲーム。

See the Pen Space Shooter game by Andrew Rubin (@andyranged) on CodePen.

Tower Blocks

表示されているブロックとぴったり重なるようにし、ブロックをどれだけ積み上げることができるかを競います。

See the Pen Tower Blocks by Steve Gardner (@ste-vg) on CodePen.

Color Collision

上下から迫ってくる赤と青のボールの色に合わせて、中心にある玉の色をクリックでマッチさせる、シンプルだけど中毒性のあるゲーム。

See the Pen Color Collision by Dev Loop (@dev_loop) on CodePen.

Connecting dots

表示されている点を順番通りに線で結び、浮かび上がってくるものを当てるゲーム。

See the Pen Connecting dots by Meiko Hori (@meiq) on CodePen.

Pure CSS Concentration game

CSSのみでデザイン、作成された神経衰弱ゲーム。

See the Pen Pure CSS Concentration game by Kevin Newcombe (@kevinnewcombe) on CodePen.

Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめはPhotoshopVIPで公開された投稿です。

1 note · View note