ごとーめも

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

MongoDB Node.JS driverを使って躓いたメモ

微妙にハマってしまったのでメモ Node.JSのMongoDBのクライアントでは有名どころでMongooseがあると思うのですが、 個人的な理由でMongoDB Node.JS Driverを使ってます (一応本家が出してるしな〜的な軽い理由です) これまで使ってて特に何も感じなかったの…

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

結果はこちら 上記を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…