★ページトップへ戻るボタンの実装方法：jQuery
先週末まで2週間インターンシップに行っていたのでバタバタしてましたー！やっと落ち着いて来たので久しぶりの更新です。 今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。 超簡単&コピペでOK！ ページトップへ戻るボタンの実装方法：jQuery jQuery初心者さんが、まず1番最初にやりたいのはこの『トップページへ戻るボタン』なはず！！！ なぜなら私がそうだったから！ ！ ボタンを押すとスーっと上に移動してくれる。この動きがたまらなく気持ちいい。 このブログにも最近やっと実装しましたが、クセになりますよね。 ページが縦に長くなりがちな方はぜひぜひ設置してみてくださいませ。 demo このブログがまさにdemoページそのものです！トップページから少しスクロールすると、右下に出てくる水色のボタンです。動きを試してみてください。 『ページトップへ戻るボタン』を知
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:
AngularJSの1.3から1.4へのバージョンアップ - Qiita
@tsuchikazuです。半年ほど仕事でAngularと戯れています。 3/21に開催されたng-japanでは、あと1週間後ほどでリリースされるとアナウンスされていたAngular 1.4 あれから10週間ほど経った5/27。ついに、Angular1.4の安定版がリリースされました。 Developer Guide: Migrating from 1.3 to 1.4とCHANGELOGから、Breaking Changeを中心に簡単にまとめましたので、公開します。 概要 Angular1.4では、主にngAnimateの大きなリファクタリングと、ngMessagesの機能改善、$cookiesへの新しいAPIが追加されました。 ngAnimateのリファクタリングは、今まで存在していたissueやバグフィックスと、より便利なアニメーションを提供するための新APIのために行われました。
領域に収まらない文字数を「...」にしたい - bi_naの日記
1行とのき 行が1行のときなら、以下のCSSで、超えた部分を「...」に変えてくれる。 overflow:hidden; text-overflow:ellipsis; ちなみにこれはIEが先進的に取り入れたものであり、他のブラウザでは使えなかったというのを 多く読んだが、使いたい最近のブラウザで使用可能なことを確認した。 参考 http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/txt_ofl.htm しかし複数行になるところは しかし複数行になるところは、「...」に置き換わらない。 JSで対応 参考 javascript - Insert ellipsis (...) into HTML tag if content too wide - Stack Overflow すこし改良 ちなみにCSSが 引用： .ellipsi
MdN Design｜総合情報サイト
まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。 【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう 【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないよ
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
Using window.matchMedia to do media queries in JavaScript – Mozilla Hacks - the Web developer blog
For people building web sites, Responsive Web Design has become a natural approach to making sure the content is available for as many users as possible. This is usually attended to via CSS media queries. However, there is a JavaScript alternative as well. Introducing window.matchMedia The way to approach media queries in JavaScript is through window.matchMedia. Basically, you just use the same ap
Twitter Bootstrapで固定ナビゲーション - CMS専門 Web開発者ブログ
Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。 簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは？ Twitter（ツイッター）社が提供しているBootstrap（ブートストラップ）はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。 使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にする ページの上部にあるナビゲーションを固定ナビゲーションにします。 スクロールしても同じ場所にあり続けます。 常にページ内の同じ位置にあり続けますのですぐにアクセスできます。 １．基本 body要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
