タグ

2020年3月24日のブックマーク (4件)

  • パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方

    パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか?できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal

  • CSSのみでスクロール時に各セクションを固定するパララックス

    Result タイトルでうまく説明できませんでしたけどこういうやつです パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css.container {/*高さを画面一杯にしておく*/ height: 100vh; overflow-x: hidden; } .slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/ position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-items

    CSSのみでスクロール時に各セクションを固定するパララックス
  • CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法 - NxWorld

    ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン(下線)を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所(文字色が濃い部分)にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS

    CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法 - NxWorld
    demizu
    demizu 2020/03/24
  • 緊急寄稿(1)新型コロナウイルス感染症(COVID-19)のウイルス学的特徴と感染様式の考察(白木公康)|Web医事新報|日本医事新報社

    緊急寄稿(1)新型コロナウイルス感染症(COVID-19)のウイルス学的特徴と感染様式の考察(白木公康) No.5004 (2020年03月21日発行) P.30 白木公康 (千里金蘭大学副学長,富山大学名誉教授(医学部)) 木場隼人 (金沢大学附属病院呼吸器内科) 登録日: 2020-03-18 最終更新日: 2020-03-18 しらき きみやす:1977年阪大卒。2013年富山大学医学部学科長,2019年4月から現職。専門は臨床ウイルス学。新型コロナウイルス感染症の治療薬の候補に挙がっている抗インフルエンザウイルス薬ファビピラビル(商品名:アビガン)を開発 No.5005 緊急寄稿(2)COVID-19治療候補薬アビガンの特徴 No.5006 緊急寄稿(3)COVID-19を含むウイルス感染症と抗ウイルス薬の作用の特徴 No.5036 緊急寄稿(4)新型コロナウイルス感染症(COVI