ちょっとおしゃれなhoverアニメーションを作る
こんにちは、@kz_moritaです。 普段はiOSエンジニアとしてSwiftを書いていて、Swiftはだいたい半年くらいさわっています。 それ以前は、C# でサーバーサイド書いていたり、C++/Cocos2d-xでゲーム開発をしていたりしました。 このブログはレイアウトやデザインを一から実装しているのですが、その中でもリンクをhoverした時のアニメーションをこだわって作ったので今回はその話をしていこうと思います。 おもにCSSアニメーションの話になるかと思いますので興味がある方はぜひこの記事を読んで気軽に試してみてもらえたら嬉しいです。 作るもの https://google.com ↑ のリンクにhoverしてみてください。 ふわっとアンダーラインがアニメーションで表示されたかと思います。 GIFだとこんな感じ。 今回はこれを作っていきます。 成果物 いきなり成果物ですが簡単に実装し
Gridsomeを使ってみる【開発環境編】 - tyankatsu’s blog
最近仕事でGraphQLを触る機会が多く、APIは全部GraphQLみたいにエンドポイント一つになってくれないかなーと思っていたら、こちらのようなパッケージが登場しました。 現時点ではv0.2.5です。 https://gridsome.org/ Gridsomeとは ざっくりと GraphQLレイヤーを内包している(https://gridsome.org/docs/graphql) 外部API（WP REST APIとか）をGraphQLレイヤー向けに変換するのでAPIが使いやすい vueファイル内で独自タグを採用している（<page-query>とか）ので、vueファイル内でGraphQLライクに情報を引っ張れる JAMstackを目指していて、static site generatorになっている。（SSRにもできるらしいけど未確認） graphiqlみたいな機能を搭載している 独
ReactでSNS対応（Gatsby製ブログでSNSシェアボタン、OGPタグ追加） | Takumon Blog
なにこれ Gatsby製ブログ(Reactアプリ)でSNS対応した時のメモです。 (1) SNSシェアボタンと**(2) 自分のSNSへのリンクを設置して、ブログの記事をSNSでシェアできるように、、、 また、(3) OGPタグを設定し**、SNSでシェアするときにイメージ画像や、タイトル、記事概要を表示できるようにしました。 ブログのフッター Twitterの呟き 1. SNSシェアボタンを設置 Facebook、Google、Linkedin、Twitterシェアボタン react-shareでめっちゃ簡単にできます。 それぞれ専用タグが用意されているので url属性に記事のURL、icon属性にアイコンサイズを指定するだけです。 Linkedinアイコンはそれに加えてtitle属性に記事タイトルを Twitterアイコンはvia属性に自分のTwitterアカウント名、title属性に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...