パララックス･スクロールエフェクト | SANKOU!
コーポレートサイト ブランドサイト･サービスサイト ECサイト･オンラインショップ キャンペーン･特設･プロモーションサイト ポータルサイト･メディア･情報サイト プラットフォーム･コミュニティサイト 採用サイト･採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある･作り込まれている イラストを使用 3D表現･3Dイラストを使用 シズル感･訴求力のある写真･動画使用 写真少なめ･写真以外のビジュアル表現 さりげない動き･動きなし やや動きあり ダイナミック･印象的･細やかな動き 日本語メイン ノーコードツール｢STUDIO｣で制作 スマホ特化･モバイルファースト Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･
18 Examples Of Mind-blowing Scrolling Effects – Bashooka
Apple`s iMac scrolling effect This amazing jQuery and CSS3 based scrolling effect shrinks from the fullscreen background image into a smaller one within a Apple’s iMac intro page. Perspective Scrolling in CSS A 3 dimensional scrolling experience built in CSS only. The trick is to rotate a single element around its x-axis, while its parent provides the perspective environment and a special perspect
Apple Mac Pro page deconstructed
The Apple Worldwide Developers Conference (WWDC) held in San Francisco earlier this week introduced a few new Apple products and updates. While the hugely expected iPhone 6 Nano with super narrow display hasn’t been revealed yet, the new iOS 7 caused a huge debate around the “flat” icons and updated UI design. What stood out for me was the new Apple Mac Pro with its futuristic black design and a p
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
マウスホイールに対応した横スクロールのページを作成する - MdN Design Interactive
第16回 マウスホイールに対応した横スクロールのページを作成する 基本的にWebページは縦長になるようにレイアウトされ、上下にスクロールしながら閲覧することが一般的です。横スクロール型のWebサイトはFlashサイトなどで一部見られましたが、特別な理由が無い限り導入されることはありませんでした。しかし、Webサイトとして他にはあまりみられない個性のひとつとなるため、うまく導入すれば印象的なWebサイトにすることができるかもしれません。 解説：（有）ムーニーワークス ハヤシユタカ 横スクロールが採用されない理由のひとつに、ユーザーがスクロールバーを横にスライドさせる操作がしづらいことが理由のひとつに挙げられます。しかし、そういったユーザーの不便さをJavascriptやjQueryで操作系の機能を補助することで解消することができます。今回はメニューによるダイレクトリンクのほか、マウスホイール
アイデアを真似したくなるタイプ別パララックスサイト20選 | SONICMOOV LAB
以前にスマホ対応！パララックスサイトの作り方を当サイトで紹介しましたが、パララックスと言っても様々な表現手法があり、今回はちょっと気になる様々なクリエイティブアイデアのパララックスサイトをピックアップしてみたいと思います。 パララックスを使ったこちらもぜひチェックしてみてください！ こいつ、動くぞ！これからのインフォグラフィックサイト 9選 目次 高さのあるものに対しては絶大な効果Space Needle アニメーションを真似したいLe Mugs 世界観に引き込まれるBen the Bodyguard 奥行き感を感じさせる多重スクロールFIREWATCH ブレを表現したSKUAWK 3Dパララックス＆パーティクルで見せるGALAXIA 横スクロールするThe walking dead 絵を描いているようなアニメーションも Toi 動くスマホの画面内もさらに動く Dave Gamache 動
簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは、はるです。 LPなどでよく見かける縦長のサイトで、各セクションが画面いっぱいに広がるページを、プラグインで簡単に作る方法を紹介したいと思います。 今回の記事では、このようなベースを作成していきます。 Scrollifyについて デモサイト：https://projects.lukehaas.me/scrollify/ github：https://github.com/lukehaas/Scrollify 利用するのは、「Scrollify」というプラグイン。 デモサイトにあるような、各セクションごとにひっつくようなレイアウトを簡単に制作できます。セクションで画面の高さを超える場合、そのセクション内でスクロールができるようにしてくれるのが特長です。 githubの履歴からわかるように、リリースが2014年と新しくなはいプラグインですが、他のものと比べ使いやすかったため、
パララックス効果が秀逸なWebサイト＆作り方まとめ
今更感がこの上ないですが「パララックス」をうまく取り入れたWebサイトをまとめて紹介します。パララックスは、5年くらい前からWebデザインのトレンドとしてなんだかんだで取り上げられ続けていますね。2017 Design Trendsでもピックアップされています。 この記事の後半では作り方も解説しています。参考にしてみてくださいませ。 1. パララックスとは？ パララックス（parallax）は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。 緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。 パララックスの例 実際に
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo
/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second. this.additionalOffset = 0; //Add or subtract pixels to whe
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
