スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
初心者がコーディングのときに失敗しがちなこと
何人も新人のウェブデザイナーをみてきましたが、 みんな大体同じところでつまづくようです。 そして自分もそうだったなぁと思うところでもあります。 知っていればすぐに終わりますが、 知らなければ（もしくは、調べることをしなければ）ずっとわからないまま。 「知っておけば楽になるのに！」と思ったことをピックアップしてみました。 「<」「>」「"」「&」「ノーブレークスペース」は実体参照を使う 上付き文字<sup>や下付き文字は<sub>を使う 非表示文字の表示方法 ExcelからDreamweaverへの表の貼付け 時々、スペースキーを何度も叩いて半角スペースを挿入し、 「スペースが表示されません」と聞いてくる人がいます。 そんな場合には「 」を使います。 実体参照をつかわずに「<」「>」を文章中に直接書くと ブラウザがタグと誤って解釈しカラム落ちなどの原因になります。 （実はこの記事を
美しいモノトーンベースのWEBデザインまとめ
モノトーンはシンプルなだけに、写真などの素材のよさが際立ちます。 CHANCE MAKER CHANCE MAKER ハロルド official web site ハロルド official web site adidas Journeys | Südtirol adidas Journeys | Südtirol Cyril Masson Cyril Masson ABRAHAM ABRAHAM NURO DEVILMAN NURO DEVILMAN LUIGI BORRELLI TOKYO LUIGI BORRELLI TOKYO（ルイジ ボレッリ トーキョー） | 東京都港区北青山 Adaptive Path Adaptive Path Mammoth Media Mammoth Media Porter des boutons Porter des boutons - ポルテ デ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
