ホームページ制作 大阪 インフォメーションメディアデザイン株式会社
Serviceサービス インフォメーションメディアデザインは、 中小企業・教育機関・自治体などの ホームページ制作・WEBコンサルティングを行っている 大阪のWEB制作会社です。 「BtoBサイトをリニューアルしたい」 「ランディングページで集客したい」 「自社更新できる採用コンテンツを作りたい」 など、 あなたの会社に合せて オリジナルのサービスを提供します。 WEBサイト制作 WordPressなどのCMSを活用したレシポンシブ対応のホームページ制作や自社メディアサイト構築・コンテンツ制作など顧客体験に最適な成果を生み出します。 WEBコンサルティング WEBサイト改善のため、WEB集客やネット広告の最適化提案、SEO対策・キーワードリサーチ・アクセス解析など、ライバル企業よりもアドバンテージの高いWEB戦略を推進します。 デジタルマーケティングで 成果を創出、未来をデザイン お客様の
[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
![[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg](https://cdn-ak-scissors.b.st-hatena.com/image/square/7216083dac49099812cea7a817f39a5b9988bd38/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021301.png)
簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
スタイルシートで実装するパララックススクロール | コリス
パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 実装方法を簡単に紹介します。 HTML デモのHTMLをシンプルにするとこんな感じになります。 各スライドはdivで配置し、それぞれclassにslideを、idで個別の名称を付与します。 <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>パラグラフ パラグラフ</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
Parallax Scrolling Scripts and Plugins
Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the “ooooh! aahhh!”-ness of it all has subsided, I think this type of site is certainly a legitimate design and development option for many brands. To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing (unless you’re a masochist and want to write one from
パララックス効果を表現できる背景をオンラインで簡単に生成出来るWebサービス・Parallax Background Builder
去年よく話題に上った、マウスを動かす 事で視差効果（パララックス）を表現す るやつをオンラインで生成出来る、という Webサービス・Parallax Background Builder のご紹介。こういうのも簡単に生成出来る ようになったんですね。簡単ではありま すが。 マウスに応じて複数レイヤーを動かす事で視差効果を表現できるパララックスな背景を簡単に作成できる、というWebサービス。凝った物は出来ませんが、無料でちょっと背景にスパイスを与えたい、という方には重宝するのでは無いでしょうか。 こういうやつ。素材はこのサイトのを使って動作テストしました。レイヤーごとに動きを決めてスクリプトコードを発行してもらって、みたいな流れです。ただし、スクリプトコードはこのサイトのを使うのでクライアントワーク等では利用出来なさそうですね。一時的なキャンペーンサイトとか個人サイトとかならいいかも。 ↑
スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。 JavaScriptやCSSの初心者でも簡単にできると思います。 Parallax Background Builder Parallax Background Builderの使い方をざっくりと説明します。 Step 1: 適用範囲の選択 まずは、パララックスの適用範囲を選択します。 左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
単純なパララックス効果を少しのjQueryコードで作る
シンプルなパララックス効果 を少しのjQueryコードで作る というTips。プラグイン化さ れていますのでレイヤーの追加 も簡単です。 個人的にはあまり見かけなくなった印象のパララックス効果のあるサイトですが、まだ需要はあるみたいです。 今日は単純なパララックス効果のあるコンテンツを少しのjQueryコードで作るTipsです。 Sample マウスに合わせてレイヤーが動きます。 (function($) { $.fn.paralax = function(container, speed) { var $window = container, t = speed || 1, $object = this; return $window.on("mousemove resize", function(e) { $object.css({ top: -(e.pageY - $window.h
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル:phpspot開発日誌
Recreating the Nikebetterworld.com Parallax Effect パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル。 単なるスライダーではなく背景とコンテンツが別々に動くスライダーが作れます。 パララックス効果を使うことで奥行きを出せて画面が切り替わるインパクトも強くすることができますね 見本は nikebetterworld.com というnikeのサイトです。インパクト重視なサイトを作りたい場合に使えそうですね 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超
Parallax Slider with jQuery | Codrops
Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to […] Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
[JS]Firefoxでのパララックススクロールのもたつきを解消するスクリプト
複数の画像を使って視差効果を生み出すパララックススクロールを操作する際、Firefoxで起こるもたつきを解消するスクリプトを紹介します。 Faster parallax scrolling websites in Firefox [ad#ad-2] パララックススクロールとは下記のサイトなどで使用されているテクニックで、複数のレイヤーをそれぞれ異なるタイミングでスクロールし、視差効果を生み出すものです。 Iutopi ここで紹介するのは、これらのパララックススクロールを操作する際、Firefoxでもたつくのを解消するスクリプトです。 この現象は、IE, Chrome, Safari, Operaでは見られません。 Firefoxでのパララックススクロールのもたつきを解消するスクリプト 下記のスクリプトを使用することで、Firefoxでのもたつきを解消できます。 /* Firefox sup
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
skrollr - parallax scrolling for the masses
スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプル