ごとーめも

小さな企業のWeb担当が日々起こったことを共有したり、思ったこと、勉強したことを書いていくブログ。普段はRailsやAWSを活用したWeb系の開発をやってます。

ページ遷移時、ローディング中のクルクル回るアニメーション

結果はこちら 上記をjqueryで画面ロードが終わったタイミングでfadeOutしていくといい感じにロード済みのページが表示されます ではでは〜

メインビジュアルを画面一杯にしたときに、画面下部に入れる「スクロールしてね」のアニメーション例

結果はこちら(画面幅によっては見づらいかも...) メインビジュアルにでかい写真を一杯使って、コピーをドンっ!! というサイトによく使われる系ですね cssのアニメーションを活用した機能なのですが、パラパラ漫画の容量で作成します ・animationが何秒で終わ…

スクロール方向と逆に動いてるような背景を持つセクション(パララックス効果)を作るメモ

サイト制作の際にたまに使いたくなるので、メモ 結果はこちら jqueryのプラグイン「parallax.js」を使ってます npmやyarnでインストールする際は、jquery-parallax.jsを参照してねとのこと npm/yarnの参照名からわかるように、jquery依存のライブラリです ラ…

ホバーすると暗転/画像が少し拡大されるパーツのマークアップとSCSS

よくある実装なのですが、毎回忘れてしまうのでメモ コードはコチラ ざっくり解説 htmlの略式図です .effectable-img a.effectable-img__link img.img .effectable-img__info 背景画像が拡大される 親の枠を決めます .effectable-img { width: 233px; height…

外出先でMacbookProのお供にしたい周辺機器

どうも〜 あけましておめでとうございます 新年一発目の記事は、僕の使ってる周辺機器に関してです 僕は2018年の1月にタッチバーモデルのMacbookPro13インチを購入しました 大きさも持ち運ぶのにちょうどよく、画面サイズも大きくて気に入ってるのですが 外…