記事一覧
Jqueryでパララックス画像を自作する方法
お疲れ様です。
パララックス画像、WEB制作学習中の自分からするとスタイリッシュで憧れます。
スクロールすると、スクロール量に応じて特定の画像だけが上向きに動く、というものになります。
色々とプラグインが出ているパララックスですが、今回はその仕組みを知るためにも1から自作してみました。
実務で1から自作することは、工数の関係上などであまりなさそうですが、学習の為にやってみました。
なかなか
SASSで簡単にアニメーションのタイミングをずらす方法
同じ要素が複数並んでおり、アニメーションが始まるタイミングに差をつけたい。
そんな事が結構多い気がします。
スクロールアニメーションやローディングアニメーションなんかがそうですね。
そういう時に遅くなるスピードを最初に設定しておいて、要素のインデックス番号に応じて自動でディレイが加算される@mixinをご紹介します。
@mixin animationDelay($quantity: 5, $
スクロールした方向によって、ヘッダーを表示・非表示する方法
固定ヘッダーのサイトでたまに見かける、上にスクロールした時はヘッダーを表示し、下にスクロールした時はヘッダーを非表示にするやり方を紹介します。
まずはCSSで通常の固定ヘッダーと、ヘッダーが隠れた時のクラスをそれぞれ作ります。
//style.css//固定ヘッダー、トランジッションに関する記述.header{ position: fixed; top: 0; left: 0; wid
width: 100vwを避けた方がいい理由と、jQueryでのカスタムプロパティの上書き
vw・vhが登場し、cssのみで画面の幅と高さが取得出来るようになって久しいですが、この２つの値は若干の問題があります。
width: 100vw; は要素の幅をブラウザ幅と同じにする事が出来ますが、100vwはスクロールバーの幅も含まれます。
スクロールバーの幅分要素がはみ出すため、横スクロールが発生してしまいます。
height: 100vh; は要素の高さをブラウザの高さを同じにする事
jQueryを使ったタブメニュー
お疲れ様です。いずみです。
本日は jQueryを使ったタブメニューを紹介します。
ざっくり分けると、2つのやり方があると思います。
１つはaタグ(アンカーリンク)のhref属性を使ったやり方。
もう１つはクリックしたタブのインデックス番号を取得し、同じインデックス番号のパネルを表示するやり方です。
今回は後者のインデックス番号を利用したやり方を紹介します。
タブコンテンツが複数あっても、対
jqueryでスムーススクロールを実装
お疲れ様です、webデザイナーに憧れるアラサー いずみです。
自分はコーディングもできるwebデザイナーになりたいので、学習しなければいけない範囲としては、
デザインの法則(座学)・illustrator や photoshopのデザイナー向けの基本操作・デザインのトレース・html と CSS・sass や jquery・wordpress・php(wordpress用)
この辺りになるかと
font-sizeをremで指定する
コーディングでフォントサイズをpxではなくremで指定した方が、アクセシビリティの観点からいいとされていますが、その理由とsassでpx → remへ変換する自作関数について紹介します。
絶対値と相対値
私の足のサイズは25.5cmですが、これはどこにいても25.5cmで変わらず、絶対値と呼ばれます。
WEBの場合pxが絶対値になるので、font-size: 16px;と指定したらデバイスやブ
sass(dart sass)で数字の単位を除外する方法
sassで数字の単位を除く方法について書きます。
数字から単位を除くことで、フォントサイズをpx → remに直感的に変換出来てとても楽です。
コードはこちら↓
//function.scss@use 'sass: math';@use 'sass: meta';//各モジュールを読み込む@function strip-unit($number){//「単位を除く」という意味の自作関数、(