parallax.jsをいじってパララックスのデモ作ってみた。
2012年2月17日 カテゴリ： Web制作 parallax.jsをいじってパララックスのデモ作ってみた。 Tweetちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。 チュートリアルは下記サイトを参考にしています。 話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。 Nikebetterworld Parallax Effect Demo そして出来あがったのはこちらのデモサイトです。 以下、メモがわりの解説です。 まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。 <script type="text/javascript" src="https:
【CSS3】Animate.cssを使って簡単にアニメーションを実装する。 | バシャログ。
fukasawaです。こんにちは。 クナイプのグーテナハトが安眠に良いと聞いたので試してみたのですが、風呂場中にタイカレーのようなスパイシーな香りが広がりました。安眠…？ Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。多くのブログで既に紹介されているものではあるのですが、バシャログではまだ誰も書いていないようなのでここぞとばかりに書いてみます。 公式サイト（デモ&ダウンロード） http://daneden.github.io/animate.css/ GitHub(使い方など) https://github.com/daneden/animate.css ※CSS3アニメーションに対応しているブラウザで動作します。 簡単な使い方 animate.min.cssを読み込みます。 <head> <
超簡単！jQueryアニメーションでサイトにインパクトを！ | ホームページ制作のLiruuDesign(リールーデザイン)！
スマホの台頭で、WEBサイトはFlatの概念が浸透していますが、 シンプルで見易いのは万人受けする分、特に記憶に残ることはありませんね！ なので、ちょっと変わった動きやデザインをつけて、ユーザーをどう振り向かせるか考える方もいると思います。 全デバイス対応だといろいろと手間が増え、先方の予算や期限に間に合わないことも多々・・・・ 基本的にスライダー以外は静的なページというパターンが多いですが、 過去に紹介したパララックスなどを用いるのも手ではあります。 でももう少しリッチなサイトにした時はこちらを使うのはいかがでしょうか？ Particleground URL: http://jnicol.github.io/particleground/ サイトを見ると、丸と線がゆっくり動いているのがわかります。 更に、マウスの動きにも反応します。 そして大変有難いことに、レスポンシブにも対応しています
.animate()で動かす（移動編） - jQuery syntax
おそらく一番使い一番楽しいであろう.animate()です。 指定した要素を移動したり拡大縮小したり透明度を変えたりします。 まずは動かすところからやっていきましょう。 $(document).ready(function(){ $("#sample").css({position:"absolute",top:0}); $("#sample").animate({top:"100px"},1000); });#sampleのCSSプロパティtopを0から100pxまで1000ミリ秒かけて変更するスクリプトです。実行すると上から下に要素が下がっていくと思います。 .animate()の前に.css()という命令が登場していますが、これは初期値のtopがなんの値なのか指定するために書いています（.animate()だけだと「どこから100pxまで移動するのか」という感じなので、.css()で
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
要素の中心から拡大するようなアニメーションをjQueryを使って再現してみる - WebDelog
「要素の中心から拡大するようなアニメーション作ってください」さてどうする どういうことかというと、 CSS3を使えばtransform-orignを50% 50%にすることで 変形の中心点をすらすことができるので、 これとtransitionやanimationプロパティを組み合わせれば 簡単に実現出来ますね！ tags: 「IEで動きませけんど…」 そうでした。 IEを忘れていました。 transitionやanimationはIE10からしか使うことができませんので、 動かすことが必須の場合はこの方法では利用できませんね。 JavaScriptの力を借りましょう jQueryにはshow()やanimate()という便利なメソッドが用意されています。 これらを使いましょう。 今回は、CSSで予めdisplay:none、widthとheightを0にしておいて、 animation()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
