要素の切り替えを美しく表現するプラグイン・エフェクト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。 要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選 fullPage.js https://alvarotrigo.com/fullPage/ フルスクリーン表示のページを切り替えるプラグイン。 DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。 Section Separators https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ 主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。 約25種類ほど用意され
jQueryで画像などコンテンツ要素を順番にフェードインさせる方法｜BLACKFLAG
写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。 一度に全ての画像がフェードインするよりも 滑らかな読み込みアニメーションを演出することができます。 この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を jQueryを使って簡単シンプルに実装する方法を紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像が左上から順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"
bxslider | Creative Demos
2枚目以降の画像もブラウザの幅全体に表示。 コントローラー（next/prev）クリック後に自動再生をする。 html 画像の幅と高さを指定 <div id="image-bloc"> <ul class="slider"> <li class="slide"><img src="../img/01.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/02.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/03.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/04.jpg" w
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる - かちびと.net
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認 まず完成形を見て
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
jQuery最高の教科書｜株式会社シフトブレイン 著
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Parallax Scrolling - Examples - ScrollMagic
公海555000kk线路检测—首页（欢迎您）
http://www.creativespooks.com/ui-feedbacks/