[B! html][あとで読む] matuixのブックマーク

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

matuix 2019/11/15

リンク

いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends

HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

matuix 2019/09/19

リンク

2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】

CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。 2018年人気だったすごいHTMLスニペットベスト【Codepen編】 #99 Animated CSS Seasons CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。 See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen. #97 A

matuix 2019/01/11

リンク

HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita

はじめにみなさんHTMLタグの一つであるinputタグはご存知だと思います。その中でもtype="file"についてぼくはこんな疑問を持ちました。選択したファイルはどこのファイル？コピーとかされているの？これみなさん知っていますか？ちょこっと調べたんですがなかなか情報がなかったのでいろいろ自分で調査してみました。（本音は調査が面白そうだったのでそんなに本気で調べてないだけです仮説を立てるまずは仮説をいくつか立ててそれぞれを検証していきます A. ブラウザはファイル参照だけ持っている B. ファイル選択時にTemp領域へコピーしている C. メモリ上に抱えているたぶんこれらのどれかじゃないかなと思っており、個人的にはBが濃厚だと勝手に考えています。調査開始ファイルアップロード機能が必要なので簡単にファイルをアップロードするだけのアプリを自前で作りました。 http

matuix 2019/01/08

リンク

ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！