面白い！スマホならではの操作方法を活かしたサイト事例5選 | hi-posi Front-End blog
ページの傾きを検知したり、端末を振って操作するなどスマホならではの操作方法を活かしたサイトをいくつか集めてみました。どのサイトも凝っていて、参考になります。 １：左右どちらかに傾けるとストーリーの目線が変わる「シーブリーズ Wサイドストーリー」 端末を左に傾けると男の子目線でのストーリーが展開され、右に傾けると女の子目線でのストーリーが展開していくコンテンツです。 途中で目線を切り替えることも可能です。 コンテンツの内容と、操作方法がマッチしていて良いですね！ 「瞬間アセきゅんコンテンツ！」だって！ シーブリーズ Wサイドストーリー http://www.seabreezeweb.com/wsidestory/ ２：動画とHTMLページを組み合わせた「THE LUXURY TEST」 TOYOTA ALPHARDのスペシャルコンテンツ。 出題映像（動画）が表示され終わったあとに、問
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB
CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる 背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。 ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background
【CSS】スタイルシートを使ってブラウザのスクロールバーを消す方法。
通常、width や height で指定されたコンテンツが表示域よりも大きくなった場合に、自動でブラウザの横や下部にスクロールバーが表示されるわけですが、CSSを使って、これを表示させなくすることが簡単にできます。 html { scrollbar-width:none; /* Firefox 対応 */ } body { -ms-overflow-style:none; /* IE、Edge 対応 */ scrollbar-width:none; } body::-webkit-scrollbar { display:none; /* chrome対応 */ } ホームページのデザインによっては、都合上どうしてもスクロールバーを表示させたくない場合がありますからね。 簡単なので覚えておいて損はないはずです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
