GSAPでこんなこともできる！途中から横にスクロールするページを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアになりたてのぼこです。 この記事ではGSAPというアニメーションライブラリを使って、ページが途中から横にスクロールするような表現を実装してみたいと思います。 GSAPを知らない方にも読んでいただけるよう、導入方法から説明します。 技術系の記事を書くのは初めてなので至らない点が多いかとは思いますが、どなたかの助けになれば幸いです。 2022/1/28追記 画面リサイズに対応するためデモを修正、解説を追記しました。 今回作るデモ さっそくですが、今回紹介するデモがこちらです。 実際の操作はただ下へ下へスクロールしているだけですが、二つ目のセクションではスクロールに対して真横にページが動いているかと思います。 GSAPを使えばこんなことも簡単にできてしまうんですね。 ではでは解説に参ります。 GSAPってなに まずはGSAPとはそもそも何なのかについてです（デ
要素がスクロール画面に現れたらアニメーションさせるJS | デザインやWEBに関する情報を発信する【まるログ】
ページをスクロールしていき任意の要素が見えたときに、その要素をアニメーションさせたいということがあると思います。wow.jsと同じようなことがしたいと言えばわかりやすいでしょうか。 wow.jsはとても簡単に様々な動きが付けられますが、Animation.cssと一緒に使用する都合上、実現が難しい動きもあったりします。今回は、そういった状況でも対応できる、動きを自由に付けられるようなJavaScriptを自作してみました。 $(window).scroll(function(){ var top = $("ターゲットとなる要素").offset().top; // ターゲットの位置取得 var position = top - $(window).height(); // 発火させたい位置 if($(window).scrollTop() > position){ // 要素が見えたときの
A4サイズ印刷専用WEBページを作る方法について
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。 A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。 印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。 任意に印刷向けWEBページを作る 本記事はA4印刷向けのWEBページを作る大まかな手順です。 印刷を前提としたページを前もって準備するタイプですね。 印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。 元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。 あえて印刷ボタンを準備するケース しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。 まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。
【帳票CSS】A4印刷用のHTMLを作ろう（Chrome用） | deep-space.blue
Chromeできれいに印刷できる帳票をHTMLで作ろう！ 今回はこちらの請求書のWordテンプレートを参考にしながら帳票CSSを書きます。 請求書テンプレート（Word版）http://financial.mook.to/excel/001w.htm 作成したデモ https://deep-space.blue/testing/css-example/css-print/ 用紙設定 <body> <section class="page"> </section> </body> /* A4縦用のベース設定 */ @page { size: A4 portrait; /* 横の場合はlandscape */ margin: 0mm; } /* 各要素の余白リセット */ *{ margin: 0mm; padding: 0mm; } /* 印刷時の調子を整える */ body { width
Photoshopをイチから色調補正やレタッチに適した設定にする。徹底的にやる。
初期設定のまま使ってる子はおらんかー👹 ご存じでしたか、Photoshopさんって30歳越えてるんですよ…これだけ長いと、PhotoだけじゃなくWEBデザインにも、イラストにも、同人で段組にも（まじか）使われていたりします。 そうなると、それぞれの…特にWEBからの要望を反映して設定項目がごちゃ混ぜになり、最大公約数的なところに落ち着いちゃってるんですね、設定が。 だから、初期設定のままでは使いづらいのです。 変えてしまいましょう。 主に、🐸に合った設定に！ というわけで、万人にお勧めできる内容ではないのですが、設定変更した理由も書いておきますので参考程度にご覧ください。全てマネする必要はないです。 インストールしたての状態から説明しますね。 使わないプリセットを削除する（Photoshopは終了しておく） トーンカーブやチャンネルミキサーなどにくっついてくる、何に使うのか分からないゴ
PDF&出力の手引き 2021
PDF&出力の手引き 2021 ［2020年12月公開］ Adobe Creative Cloud 2021年度版リリースに合わせ、 安全なデータ運用と出力のための情報を更新いたしました。 Creative Cloud 2021年度リリース版でも各製品にさまざまな新機能が搭載され、 それに合わせて下位バージョンとの互換性も一部変更があります。 Creative Cloud環境で安全、安心な印刷データ運用を実現するために踏まえておきたい必要な情報となっておりますので、今一度ご確認ください。 （旧バージョンの製品をお使いの方も日頃のデータの作成方法や正しいPDFの作成方法について参考になると思います） PDF&出力の手引き 最新のPDF＆出力に関するドキュメントはこちらから入手できます。 こちら印刷の現場やデザインワークのプリントに役立ててください。 PDF&出力の手引きをダウンロード 以下の
【Sassの便利な使い方】フォントサイズをCSSのclamp()を使ってSassで便利に指定する！ - くりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア
【Sassの便利な使い方】フォントサイズをCSSのclamp()を使ってSassで便利に指定する！ 特にヘッダー領域のタイトル文字など、写真などの領域の上に重ねて大きく見せる、ということを最近よくします。 キャッチ画像の上にサイトのタイトルを表示する、って感じのデザインです。 最近特によく見かけるデザインだと思うのですが、レスポンシブの時はフォントサイズをどのように変更していますか？ 例えば、PCサイズだったら36pxでちょうどよく見えてても、小さい画面になったら大きすぎる・・・なんてことはよくあります。 メディアクエリを使って、サイズを細かく指定して変更することもできますが、大変です！ h1 { font-size: 57px; /*その他もろもろの設定*/ } @media (max-width:750px) { h1 { font-size: 42px; } } @media (ma
clamp()はSassと組み合わせると快適 ／ ブログ by Kishin
Webデザインでは、デバイス毎にCSSの記述を変えて、各対象デバイスで快適に閲覧できるようにすることが好ましい。スマホが普及してからは、Webサイトの表示もPC版とスマホ版を制作するのが当たり前になっている。このコーディングの際に便利なのが『vw』という単位である。 「vw」は「viewport width」の略で、デバイス或いはWebブラウザの表示領域幅を100vwとした単位であり、概念としては「%」と同じである。 スマホ版のコーディングでは、この「vw」をベースに制作すれば、機種による画面幅の違いはほぼ考えなくてもよくなるため非常に重宝するのだが、PC版のコーディングとなると事情が異なってくる。 それは、PC上でのWebブラウザの表示幅は数100px～2000px程度まで、非常に変化の幅が広いため、表示領域幅を基準に各要素のサイズを指定してしまうと、非常に小さくなったり、逆にあまりにも
Vanta.jsで3Dアニメーションを手軽に実装！
2022年1月25日 JavaScript, jsjs 3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！ 鳥をふわふわ動かしてみよう Vanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min
【jQuery】シンプルなタブ切り替えの作り方 | Designmemo（デザインメモ）-初心者向けWebデザインTips-
jQueryを使って、タブでコンテンツ内容を切り替えて表示させる方法です。ここでは、複雑なことはしないで、jQueryとCSSを組み合わせて単純にコンテンツを切り替えるだけの動きについて見ていきます。 タブ切り替えの作り方 まずは、HTMLを以下のように組んでおきます。 <ul class="tab"> <li class="active"><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div class="tabContents active" id="tab1"> ～コンテンツ内容～ </div> <div class="tabContents" id="tab2"> ～コンテンツ内容～ </div> <div class=
「Swiper」の使い方とオプションを使ってカスタマイズする方法 | マインドステージ
Webサイトに使われることが多い「スライダー機能」ですが、主にjQueryを使用したスライダーが多く使われてきました。 この記事では、jQuery不要のスライダー「Swiper」の使い方とオプションによるカスタマイズ方法をご紹介していきます。 ≫ 先にカスタマイズについてみる方はこちら Swiperの使い方 ※追記：最新版であるバージョン8の使い方を追記しました。 HTML(CDN：バージョン8) バージョン8では、CDNの読み込み先が変わっています。また、ダウンロードはこちらから可能です。（※ダウンロードするバージョンは適宜変更してください。） これから使用する場合は、最新版を使用することをおすすめします。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
swiperのスライドショーで1枚の時はスライドしないようにする方法 – Creator Note
swiper実装時にスライドが1枚になった時を想定してJSを制御します。 最初は3枚だったけど、クライアント様の状況で1枚になったりすることってまああること。 ただ、loop設定していると無駄に1枚の画像がスライドすることになります笑 ちょっとシュールですよね。 情報を伝えるということはできているので、気にしない方は気にしないかもしれませんが 根本1枚だったらスライドする必要も、ページネーションや矢印を表示する必要なくない？と思ってしまいます。 ということで今回は備忘録として、swiperのスライドショーで1枚の時はスライドしないようにする方法を残しておきます。 swiperの実装方法はここで省きますので、各自でしらべてみてください。 まずHTMLは下記のような感じ。 よくあるswiperの実装方法と同じです。 <section id="mainSlider"> <div class="s
えがおグループ 採用サイト
【社是】 感謝 私たちえがおの社是は「感謝」です。 私たちが今日あるのは、お客様、 ビジネスパートナー様、 職場の仲間、家族や友人 といった多くの人々の支えがあってこそ。 あらゆるものから生かされている ということに「感謝」し、 その想いを少しでもお返しできる人間 でありたいと考えています。 【経営理念】 世界の人々に 健康と笑顔を 提供し続けることを通して 広く社会に貢献すると共に 全社員の幸福と成長を追求する 私たちは世界中の人々の健康を考え、 安心と笑顔を提供し続けていくことで広く 社会に貢献していく会社であるとともに、 仕事を通じて全社員の物心両面にわたる幸福と成長を 追求していくことを経営活動の目的としています。
BONX WORK 公式ウェブサイト
コミュニケーションの ムダをゼロにして、 現場を進化させよう。BONX WORK（ボンクス・ワーク）は、 チームのパフォーマンスを最大化する、 現場コミュニケーションの ワンストップソリューションです。 資料ダウンロード ※スマホ画面はiOS版アプリのイメージです。BONX WORKとは現場のムダはゼロに。 必要なものは全部、 BONX WORKで。デスクレスワーカーの両手を解放し、 無駄を解放し、働き方を解放する。 現場コミュニケーションの制約をゼロにして、 働き方を進化させましょう。
ONTHEHEAD｜アートボードを書き出すスクリプト
使い方How to use 全てのアートボードを書き出し ドキュメント上の全てのアートボードを書き出します。 選択したアートボードを書き出し ドキュメント上でアクティブになっているアートボードを書き出します。 数値指定したアートボードを書き出し ドキュメント上の指定したアートボード番号でアートボードを書き出します。 個別指定 10, 15, 23 10, 15, 23 のアートボードを書き出します。 範囲指定 4-8 4 から 8 までのアートボードを書き出します。 範囲指定（先頭から） -5 最初から 5 までのアートボードを書き出します。 範囲指定（末尾まで） 12- 12 から最後までのアートボードを書き出します。 複合指定 -3, 10, 13, 24- 最初から 3 までと 10, 13, と 24 から最後までのアートボードを書き出します。 除外アートボード名 書き出したくない
BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter etc...
Categories HTML／(X)HTML (33) HTML5 (26) CSS (120) CSS3 (80) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone／iPad／iPod／Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (51) WebサイトGallery (17) Web素材 (43) Web開発用ツール (27) Web情報 etc… (8) リリース情報（その他） (17)
xamppで複数のバージョンのphpを切り替えて使いたい！！！
windows10上でphp7.1が入ってるxampp上でphp5.3を起動したかったので調べて実行したよ。 ついでに、5.5も起動できるようにした。 xamppの各バージョンのDL 7.1のDL ここで欲しいXamppのバージョンを選ぶ 今回は7.1.8をチョイス https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.1.18/に飛ぶから xampp-win32-7.1.18-0-VC14.zipをクリックしてDLする。 5.5のDL xampp5.5.37の xampp-win32-5.5.37-0-VC11.zip をDLする。 5.3のDL xampp1.7.7の xampp-win32-1.7.7-VC9.zip をDLする。 解答してディレクトリ作って配置する さっきDLした7.1のxampp-win32-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX-mov | アプリのUIが動画で見れるギャラリーサイト
株式会社Project8
XAMPP本体や PHPのバージョンアップをせずにもう一つXAMPPをインストールして複数の環境を共存させる方法
