[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
ワタミ店長実名告発！「僕は目の前の焼き鳥が冷めていくのが耐えられない」
僕の原点って大学の寮なんです。寮生たちと「ワッショイ、ワッショイ」と言いながら大騒ぎする。その笑顔って忘れられない。だから僕が目指すのは、お客様の笑顔、満足度、感動、涙を生み出し、働く仲間が笑顔で働けるような店です。 夢のためには戦わなきゃいけないこともある。本部から監査が来たことがあります。飛ばされることもあるから、普通の店長はビビリながら対応します。でも僕は違った。その監査の人が、お客様がごった返している時間帯にやって来た。絶妙な加減で焼き上がった焼き鳥を持っている僕に、いくらでも後回しにできるような質問をしてくる。だから僕は「とりあえずこれ、運んでもらっていいですかね。冷めるから」って言った。喧嘩を売ったんじゃない。「1人でも多くのお客様にあらゆる出会いとふれあいの場と安らぎの空間を提供すること」がワタミの理念だから、監査よりもお客様が大事。僕は目の前の焼き鳥が冷めていくのが耐えられ
[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。 アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...
「サイドに開いた選手は捨てろ」!?風間八宏監督が唱える守備の新常識。（木崎伸也）
今季はリーグ戦に加え、ACLも戦うことになった川崎フロンターレ・風間八宏監督。同組には増田誓志の所属する蔚山現代、小野伸二のいるウェスタン・シドニー・ワンダラーズなど強豪が揃う。 以前からひとつ気になっていた「戦術の常識」がある。 攻撃の際「サイドアタッカーがワイドに張り出して、相手のDFラインを横に広げる」というセオリーだ。 一般的に、相手が守備を整えた“待ち伏せ状態”になると、簡単には崩せなくなる。それを打開するために利用されるのが、上述のやり方だ。攻撃側のサイドアタッカーが外に張り出した位置にポジションを取ると、相手のサイドバックの注意を引きつけられる。すると相手のDFラインは横方向に引き延ばされ、守備ブロックの隙間が広がり、そこに入り込む余地が生まれる……という考え方だ。 日本代表のザッケローニ監督は、この理論の実践者である。 サイドハーフの香川真司と岡崎慎司に対して、攻撃のスター
簡単実装でパララックスコンテンツを作成できるスクリプト -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
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
