サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
hibi-update.org
今回はGSAPのプラグイン 【ScrollTrigger】を利用したスニペットをご紹介していきます。 【ScrollTrigger】とは 今までは、スクロール連動のアニメーションを作成するときは【ScrollMagic】とGSAP(TweenMax)を組み合わせる事が多かったですが、GSAPの【ScrollTrigger】プラグインを使うことで、さらにスクロール連動アニメーションが実装しやすくなりました。 GreenSock【ScrollTrigger】 https://greensock.com/scrolltrigger/ ざっくり、以下のようなことができます。 スクロールで要素をアニメーションさせれる。 (DOM、CSS、SVG、WebGL、Canvas等)スクロール連動でアニメーションさせることができる。 (ScrollMagicのような感じ)要素を指定の位置にピン留めしておける。
スライダーに連動させてアニメーションを実装したい時がよくあります。 特にwebサイトのキービジュアル等で使う機会も多いですよね。 この記事では、実際に使ってみたくなるような、主にタイトルやテキストと画像のアニメーション付きのスライダーを【Codepen】よりピックアップしてご紹介いたします。 Simple animated slider with Slick.jsスライダープラグインの【slick.js】を使用したスライドアニメーション。 シンプルな画像拡大エフェクトとテキストフェードインが使いやすそうです。 【IE11】でも動きます。(jQuery使用) See the Pen Simple animated slider with Slick.js by Alexandre Buffet 😎 (@alexandrebuffet) on CodePen.light Info Cards
gzip圧縮とはgzip（ジー・ジップ）は、データ圧縮プログラムのひとつ、およびその圧縮データのフォーマットである。「GNU zip」の略でありGNUプロジェクトによって開発・メンテナンスされている。 gzip – Wikipedia 概要はこんな感じ。要するにgzipを活用すればwebサイトのスピードが上がるということですね。 このサイトもスピードチェックをすると改善提案項目にgzipが出てきます。 前回は、次世代画像フォーマットwebPを活用して画像の読み込みスピードを上げることができました。 次世代画像フォーマットWebP(ウェッピー)を試してみた(パフォーマンス編) 次世代画像フォーマットWebP(ウェッピー)を試してみた(実装編) 今回はこのサイトでgzip圧縮を試してみたいと思います。 .htaccessでgzip圧縮を有効にするgzip圧縮を有効にするには.htaccessの
今回は【ScrollMagic】を使ったスクロール連動アニメーションのスニペットをまとめてみました。 スクロールで要素がフェードインするようなアニメーションは前回、ご紹介した以下も是非ご覧ください。 【ScrollMagic】ってなに？ 【ScrollMagic】はスクロールに合わせて要素を操作できるJavaScriptのライブラリです。 【ScrollMagic】単体で使うより、アニメーション系の【TweenMax】などと組み合わせて使用することが多いと思います。 スクロールイベントで画面内に入ったらフェードインなどの基本的なアニメーションから、スクロールに合わせたアニメーションの指定まですることができます。 今回は、【ScrollMagic】を使用したスクロールに合わせたアニメーションを中心にスニペットをご紹介していきます。 ScrollMagicのダウンロードはこちら
BabelとはBabelはJavascriptの新しいバージョン(ES6等)で書いたコードを、旧ブラウザ(IE11等)でも実行できる旧バージョンのJavascriptに変換することができます。 Babelを使うことで、新しいバージョンのJavascriptでコードを書いても、IE11に対応させることができます。今回はそんなBabelについてまとめました。 Babel公式サイトBabelのサイトで実際にJavascriptの変換を試してみることができます。 以下からBabelのサイトにアクセスします。 Babel · The compiler for next generation JavaScript Babelを試す 「Try it out」ページにいきます。 実際にコードを入力して変換することができます。 左メニューのPRESETS項目の、es2015にチェックが入っていることを確認し
これで npm run babel を実行することでトランスパイルされるというものでした。 以前までタスクランナーにgulpを使用しているのですが、できれば脱gulp、そしてnpm scriptsに移行していきたいと考えていました。 今回はnpm scriptsについて深く知って、以下を目標に進めていきます。 sassの自動コンパイル＆圧縮処理 babelを使用してjavascriptの自動トランスパイル＆圧縮処理 browser-syncでブラウザリロード npm scriptsとは npmはpackage.jsonの「scripts」箇所に記述することで、シェルスクリプトやaliasコマンドを登録・実行することができます。 Frontend Developer Roadmap 2020版でも推奨 Frontend Developer Roadmap 2020版でもGulpよりnpm s
このページを最初にブックマークしてみませんか？
『日々アップデートBLOG』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
