「一定の時間経過したら等、時間でCSSを制御するスクリプト・「STIMED.js」」のご紹介| Webデザイン参考記事まとめアプデ
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]); 昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応
自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」:phpspot開発日誌
Kouta-web/jQuery.BackgroundScroll.js GitHub 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 複数の画像を自由な方向にアニメーションさせられるようです 関連エントリ 3Dのクールな線形アニメーションをブロックの背景にするjs 動くパーティクルを背景に設定できる「particles.js」 背景画像をカッコよくアニメーションして今風にする「CROSSCOVER」 SVGを使って動的に背景に斜線をいれてクールにする「Lines.js」 自動伸縮するフルスクリーン背景を簡単に設定できる「Fullscreener」
CSS＆jQueryで作るパネル型の3Dナビゲーション作成サンプル:phpspot開発日誌
3D Bold Navigation in CSS and jQuery | CodyHouse CSS＆jQueryで作るパネル型の3Dナビゲーション作成サンプル。 ページの右端等で表示が一般的になってきたナビゲーションを開くボタン。 押すと、コンテンツが奥に移動する感じでパネル型のナビゲーションメニューが現れるUIです シンプルですが、つかいやすく、レスポンシブにもなっていて実用性が高そうです 関連エントリ ページ自体のサムネイルを作ってナビゲーションにできる「Minimap」 フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装 美しいナビゲーションメニューを自動生成するjQueryプラグイン「MenuItems」
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka
画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Markaの使い方 Markaのデモ 上記gifアニメーションの実際の動きは、下記ページで楽しめます。 Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。 各アイコンのスタイルシートファイル では、Markaの使い方を。 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="sty
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」:phpspot開発日誌
画像上に表示させるキャプションをカッコよく表示させられる「HoverCap」:phpspot開発日誌
