ごとーめも

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

HTML/CSS/Javascript

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

結果はこちら(画面幅によっては見づらいかも...) メインビジュアルにでかい写真を一杯使って、コピーをドンっ!! というサイトによく使われる系ですね 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…

jsでよくある「関数読み込まれてない」問題の対処法

実行順序とか考慮して使わないようにすべきなんだけど、どうにもならない時 var repeat = setInterval(function(){ if(typeof(hogeFunc == "function") { hogeFunc() clearInterval(repeat) } }); こいつが助けてくれるときがあります。

Promiseオブジェクトを使ったらAPI周りの処理がスッキリした

かなり前からPromiseオブジェクトの存在は知ってたのですが、ほとんど気にしないでほったらかし状態に... ただ、必要な状態に出会ってしまったのと、そのときに初めてPromiseについて便利さが理解できた気がするので共有します 先に結論 要件: リクエストし…

フロント開発初心者のためのyarn, webpack導入流れ[2017年冬: React導入版]

背景 SPA(シングルページアプリケーション)というワードに聞き覚えはありますか?? 1画面で色々する類のアプリの総称で例えばGoogleスプレッドやslack, airbnbなどがあげられます。 サービス内すべてがSPAという場合もありますが、特定のページがSPAで実装さ…

複数行のテキストに蛍光ペンのような下線をつける方法

テキストに下線をつける方法で真っ先に思いつくものは、text-decorationをつける方法 ここに蛍光ペンで引くようと線の太さを求めると話が変わってくる text-decorationは太さを変更できないからだ(色は変更可能)... そこで思いつくのはbox-shadowを使う方法 …

サイズの違う画像を指定したサイズ内で縦横比を一定にしつつ上手く表示する方法

ライターにとって、アップロードする画像のサイズってそんなに気にしないですよね 僕も記事書くときは、スマホで撮った写真を上げたり、写真サービスから引っ張ってきたりするわけです 今回はサイズの違う画像を指定したサイズ内で上手く表示する方法でobjec…