【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方
ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https://on-ze.com/demo/js-aos/ 要素を表示させる際の動きは「Fade」「Flip」「Zoom」の３種類が用意されています。 ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。 jQuery不要で動くのも嬉しいですね。 配布されているJSファイルとCSSファイルの２つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。 各ファイルのダウンロードは以下より。 AOS : http://michalsnik.github.io/aos/ AOS（Animate
【Font】使い勝手の良いオススメの Google Web Fonts サンセリフ系 × 11選。
今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ（仏: Sans-Serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体（セリフ体・ローマン体とも呼ぶ）と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す
現代家紋。 - ONZE
Twitter のタイムラインで流れてきた［#現代家紋］が面白かったので、オンズでもいくつか創作してみました。 三つ無線通信網 まずはこちら。よく見かけるWi-Fiのロゴを３つ組み合わせた現代家紋。 組み⌘ キーボードの『command』キーの家紋です。 糸輪にえぐざいる EXILEも現代家紋に。人数が足りないというツッコミは無しでお願いします。 丸に火狐 ブラウザ『FireFox』のロゴは、そのままでも家紋ぽいですね。 三つ捻り 検索巴 こちらは『Google Chrome』のロゴを使用。 『三つ捻り蛇の目』という家紋がベースになっています。 隅立て井筒に いいね Facebookの『いいね』ボタンの家紋です。 個人的には一番面白いと思っています。 熊紋 ご当地キャラクター『くまもん』も家紋になりました。 地抜き もんどりあん ピエト・モンドリアンの有名な絵画。 零零七 映画『007』の
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。
【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。 ウェブサイトにアクセスしたとき、背景全面に大きく動画が流れていると大変インパクトが強く、印象に残ります。 そこで今日は、サイトの背景にYouTubeの動画を表示・再生させることができるjQueryプラグイン［jQuery tubular］を紹介します。 プラグインのダウンロード まずは下記の公式サイトより、［jQuery Tubular］のプラグインをダウンロードしてきます。 jQuery Tubular：ダウンロード 使い方 まずは HTML の <head>〜</head> 内にて、先にjQuery本体を、続いてダウンロードしてきた［jquery.tubular.js］を読み込みます。 続けて、［jQuery Tubular］の設定も記述します。 <script src="jqu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
