Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス
Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p
Web Server's Default Page
You see this page because there is no Web site at this address.
アニメーションの残像が残るjQueryアニメーションチュートリアル:phpspot開発日誌
Shadow Motion Effect in 5 Lines Of jQuery | AEXT.NET MAGAZINE アニメーションの残像が残るjQueryアニメーションチュートリアルが公開されてます。 次のようにアニメーションした後の残像が残ります。CSS3の機能なども盛り込みつつ実装されてるみたいです。 サンプルは簡単な円のアニメーションを使いながらコードの説明があります。 Flashに比べるとパフォーマンスはそこまで出てない気はするのですが、なかなか面白いですね。 関連エントリ キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム クールにアニメーションする色合い様々なjQueryメニューサンプル色々
14 Fresh and Useful jQuery Plugins - Web Design Ledger
Tools 14 Fresh and Useful jQuery Plugins Henry JonesApril 20, 201032 Comments05.4k jQuery has changed the way developers write JavaScript and the way users interact with websites and web applications. If you’re a developer, you know what a joy working with jQuery can be, especially the convenience of plugins. In this post, we’ve rounded up 14 fresh and useful jquery plugins that have been released
10 Cool Websites with Amazing jQuery Effects
Introduction jQuery framework is getting really hot nowadays. A lot of websites have started to use it as the javascript framework. For myself, I too stick with jQuery because it has a really good documentation, a lot of tutorials out there (I have written heaps of them as well :) ), heaps of plugins available and most importantly it's pretty stable and supported by most modern browsers. Before jQ
10 jQuery Transition Effects: Moving Elements with Style | DevSnippets
Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website. 1. Fluid Navigation – How to create an informative menu-bar with jQuery & CSS Learn how to crea
ページ内に雪を降らせられるjQueryプラグイン「jSnow」:phpspot開発日誌
ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["♠","♣"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com
コンテンツにエフェクトを掛けるjQueryプラグイン10個
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム:phpspot開発日誌