ファーストビューの動きが面白いWebサイト20
2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト！ JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント｜サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント｜サンプル集 ア
日本語ウェブフォントまとめ+GoogleWebFont
日本語ウェブフォントとは 日本語ウェブフォントも本当にゆっくりですが、広がりを見せてきています。私のホームページで使っているのも日本語ウェブフォントですし、このブログも実は日本語ウェブフォントを使用しています。ちょっと可愛い文字でしょ。SEOにも有利ですし今後広がっていくと思います。 FONTPLUSのFONT TIPS https://fontplustips.comではわかりやすく日本語ウェブフォントの説明がされているので、まずは基礎知識を得てみるのも良いと思います。Webディレクターとしておさえておきたい！日本語Webフォント最新事情でもわかりやすい説明があります。 私の公開しているフロップデザインフォントと、うつくし明朝体もウェブフォントを見据えてデザインされています。このブログはフロップデザインフォントをカスタマイズしたフォントです。フロップデザインフォントはフラットデザインのイ
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
