サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
front-no-end.net
カルーセル系のjQueryプラグインを入れるのもまあ悪くはないと思うけども、CSSだけでやってしまってもよいのではないかね? HTML的には親子のdivになってるだけ。 親(.slide-wrap)に対して .slide-wrap { overflow-y: hidden; overflow-x: scroll; } overflow-x: scroll;で横スクロールを許可。 .slide-wrap { display: flex; } display: flex;で子要素を横並び .slide-wrap { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } 慣性スクロールするように調整。スマホでこれがないとキツい。 後は子要素(.side-box)の幅をいい感じに調整する。 .side-box { flex:
videoタグで動画を呼んで背景的に使う場合は、モバイルとPCで処理をわけておかないとダメっぽい。 というのも videoタグにて動画を呼んでくると <!-- html --> <video src="videofile.ogg" poster="posterimage.jpg" autoplay="autoplay" width="300" height="150"> <source src="path/to/hoge.mp4" type="video/mp4" /> <source src="path/to/hoge.webm" type="video/webm" /> </video> コード自体はこういう感じになるわけですが、 これをこのままモバイルで見ると たいていは自動再生に対応してないので、再生ボタンがガッツリとでちゃいます。 考え方なので、 <!-- html --> <d
Braba.jsはなかなか快適なのですが、pjax遷移だとインラインのjs処理しかしてくれず、$(document).readyや$(window).loadで指定している処理は指示しないとやってくれません。 例えば、シンタックスハイライターの「highright.js」なんかは、pjax遷移すると遷移後は動きません。 なので、 Barba.Dispatcher.on('newPageReady', function() { //コードハイライトを実行 hljs.initHighlighting.called = false; hljs.initHighlighting(); //アナリティクスに送信 ga('send', 'pageview', window.location.pathname.replace(/^\/?/, '/') + window.location.search);
タイトルと画面の一部分だけを入れ替えてページ遷移の体感速度をいい感じに上げてくれるpjax。 pjax自体も導入はそこまで難しくはないんですが、「Barba.js」を使ったら簡単すぎてひっくりこけたので導入メモ。このサイトで使っています。160901現在。 luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. 詳しくは Barba.js のリポジトリのリドミを読んでくれという感じなのですが luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. <script src="barba.min.js" type="text/javascript">
このページを最初にブックマークしてみませんか?
『フロントのエンド - Web開発をがんばりたいブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く