[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
6月25日（水）、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge（以下、CCL） vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法についての講演のスライドです。 ・FICCは一緒に働きたい人を募集しています。 【詳しくは】 http://www.ficc.jp/recruit/ ・STANDARDは、スマートフォンアプリやWebサイト Webサービス等のUIデザインに特化したプロダクションです。 人の役に立つアプリやサービス制作に携わりたい人を募集します。 【詳しくは】 http://www.standardinc.jp ・Web業界で活躍したい人のための
![[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法](https://cdn-ak-scissors.b.st-hatena.com/image/square/553b114c1d27ed1c0846b1a36a93b06d4bfd371f/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fcclslide20140708-140717040232-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
パララックス効果を与えてくれる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プラグインが紹介されています。今日はその中から
メンテナンス
只今メンテナンス中です ただいまメンテナンスをおこなっており、一時的にご利用いただけない状態となっております。 ご迷惑をおかけし申し訳ございません。
今年から始めた脱毛について詳しく書くお – 今年から本気でムダ毛をなくすために脱毛に通い始めています！
むだ毛について気になる季節 毎年、春の終わりになると、むだ毛について気になるようになります。特に、夏になると、半そでやノースリーブを着る機会が増えます。そうなると、やはり、わきの下のむだ毛が気になるようになってくるのです。また、夏になると、素足でハーフパンツなどをはくことが多くなります。この場合には、ひざ下のむだ毛が気になるのです。そして、お風呂に入った時などに、自分でむだ毛の自己処理をおこなっています。 カミソリを使っての脱毛 むだ毛については、たいてい、カミソリを利用して自己処理をおこなっています。カミソリを利用する場合に、一番、気をつけていることは、やはり、安全についてです。ケガをしないように気をつけながら、カミソリを使っています。また、カミソリの使用は、皮膚にとって刺激になることもあります。したがって、肌に直接カミソリをあてるのではなく、必ず、石鹸の泡などと一緒に処理しています。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten
