Category: jQuery & JS

CSS3&jQueryを使ったパララックススライダー

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。

詳細を読む »

jQueryを使ったパララックススライダー

今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス(視差)の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。

詳細を読む »

AJAX 入門講座

AJAXというメソッドが世に出てからしばらく経ちますが、一般のウェブサイトなどで活用されたわけでもなかったが、ここ最近になってWebアプリケーションの中でUI/UXの重要性がたかまったことで、注目をより集め始めました。AJAX自体はプログラミング言語ではなく、Webページに対してJavaScriptを活用する新しい方法と呼べると思います。この新しいテクノロジーはWebページをより速くしたりユーザーフレンドリーにしたりと、機能全般的により効率のよいものにしてくれます。

詳細を読む »
CSS
yuki

LESS CSSを徹底解説

私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在であるCSSに改めて注目し始めたのは、ほんのここ最近のことです。フロントエンド開発を楽にするためには、まずグリッドシステムとobject-oriented

詳細を読む »

CSS3とjQueryでサムネイルをカッコよくイメージ拡大

本日はjQueryを使ってこざっぱりと綺麗にまとめられたサムネイルのプロキシミティ効果(接近効果)の作り方をご紹介したいと思います。これはマウスを画像にホバーすると自動拡大され、周辺画像もそれに合わせて適切なサイズに自動拡大されるというアイデアです。また同時に説明文も表示されるようになっています。

詳細を読む »

CSSツール・ジェネレーター お役立ちツール

WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。

詳細を読む »