<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
![AOS - Animate on scroll library](https://cdn-ak-scissors.b.st-hatena.com/image/square/763bccb760c3b86bba00262e638a653140f5836a/height=288;version=1;width=512/http%3A%2F%2Fmichalsnik.github.io%2Faos%2Fimg%2Fgithub_octocat.png)
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
My most popular tutorial of 2014 was my guide to creating a realistic money effect in Photoshop, which explained the steps to achieve an authentic engraved illustration style. The process is quite time consuming, so I figured it would be useful to follow it up with a ready made Photoshop Action that produces the effect automatically with just the click of a button. Choose from 3 levels of detail f
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考:position - CSS|MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
今回は見出し(h1〜h6タグ)のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
(2010年9月10日 プロファイルの保存と設定方法を、よりやりやすい方法に書き直しました) DTPデザイナーの永遠の悩み、2色印刷。 印刷のプロが相手なら、C+M版のプリントアウトと色チップで話ができるけど、クライアントに見せる時は特色再現したカラープリントを作成する必要があります。 また最近は、印刷物制作完了後に「Webに載せるので、特色再現でPDFが欲しい」と言われて、途方に暮れることも多いと思います。 「PDFなんて簡単にできるでしょ?」って営業に言われて、キレたデザイナーさんもいるでしょう・・・ 2色印刷シミュレーションができるプリンタがあれば、画像にしてAcrobatのOCR機能で検索可能なPDFにするという手もありますが、あまり良い方法とは言えませんよね。 でも実は、割と簡単に特色を再現する方法があるんです。 この方法なら、出力で特色再現するだけでなく、ディスプレイ表示で特色
クリエイティブビジネスの 第一線で活躍される方々が、 クリエイティブのために時間を費やせる コンピュータ環境の提供を。 ネオプラン・セールス部門の資産は、1991年の設立以来、 デザイン&クリエイティブ、アパレルの方々を中心に、 Apple Macintoshを中核とした4,000台を超えるシステム販売に基づいた トラブル解決のノウハウと経験です。 システム導入でお悩みの方。Macintoshはもちろん、 Windows、UNIXを活用したシステム構築、既存システムの更新、 各種サーバソリューション等のご相談は、お気軽にお問い合わせください。 導入時の基本コンサルテーションから、システム・ネットワーク設計、 納入、動作確認テスト、さらに導入後のトラブルサポートまで。 一貫したサービス体制で、「使える」コンピュータ環境をお届けします。
Web業界では、一般的なビジネス用語に加えて多くの専門用語が飛び交います。 あまりにも用語が多いため、実はしっかり理解ないままなんとなく使っている単語があるという方は少なくないのではないでしょうか。 社内・社外問わず、よく使われる単語の意味を理解していなければ、ビジネスを円滑に進めていくことは難しいでしょう。 今回は、業界頻出のビジネス用語を用例とともに100個紹介します。 ア行 アウトバウンド 外向きの(アウトバウンド)営業活動(マーケティング)の意味。 企業が顧客に向けて、電話や来訪をしてアプローチしていく形態の業務。 「アウトバウンドを積極的にしよう」 アウトプット 吸収した経験や学習をもとにして出来た、成果や実績のこと。 「学んだことはアウトプットしていこう」 アクイジション (新規顧客の)獲得の意味。 「アクイジションコストがかさむ」 アクセシビリティ 情報やサービスが、どの程度
ここ最近絵文字で遊んでいて、Somemoji というライブラリをつくったので知見を共有します。 さまざまな絵文字セット 様々なプラットフォームのために、様々な組織が、様々な絵文字セット (絵文字画像の集合) を提供しています。 Apple emojidex EmojiOne Facebook Google HTC LG Microsoft Mozilla Samsung Twitter 大抵の絵文字セットはUnicodeのEmojiの仕様に則って実装されていて、このコードポイントに対応する絵文字画像はこれ、というように互換性があります。Unicode 6.0, Unicode 7.0, Unicode 8.0, ... とバージョンが増えるに従って定義されるEmojiの数も増えていっているので、それぞれの絵文字セットごとに対応具合はまちまちという状況ではあるものの、よく使う主要なものについ
Webセキュリティの小部屋さんで下記の記事が公開されていて、無料の SSL (TSL) サーバ証明書を提供する認証局 「Let's Encrypt」 からの証明書取得がとっても簡単になったということなので、ちょっと試してみましたが、とっても簡単だったのでメモ。 無償SSL/TLS証明書の Let's Encrypt の設定が劇的に簡単になっていた : Webセキュリティの小部屋 Certbot たった 2コマンドで SSL 証明書の取得が完了 Let's Encrypt は元々簡単な処理でドメイン認証 (Domain Validation / DV) 証明書を取得することができて、私もテストで何度か設定してみたりしていたのですが、ある程度触ったところで、簡単そうだし手が空いたら本番サーバでも設定して使ってみようかな~ なんて思っていたらそのまま手つかずという感じで時間が経っていました。 と
Notes The emoji styles are defined in twemoji-awesome.css. Like Font Awesome which uses fa-*, Twemoji Awesome uses twa-* for class names. Twemoji Awesome uses Emoji Cheat Sheet for the class names. You must replace underscores with hyphens, as shown in the :hatching_chick: example. Like Font Awesome, you can change emoji sizes via twa-lg, twa-2x, twa-3x, twa-4x and twa-5x. Twemoji Awesome uses SVG
現在ダウンロードページ不明( ダウンロードは、DropBox から出来ます / 上のフォント名のリンク先 )
ImageMapster makes HTML image maps useful. ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids. Note: ImageMapster used to be distributed as a ZIP archive. You can still download the full package including e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く