【JavaScript】画面スクロールにあわせてCSS指定内容の変化 - Little Strange Software
どうも！LSSです！！ よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 コード <div id="gamen">画面スクロールにあわせてCSS指定が変化します。</div> <script> document.addEventListener('scroll',fscr,false); function fscr(){ a=100-(Math.min(Math.max(gamen.getBoundingClientRect().top,200),600)-200)/4; gamen.style.backgroundImage='linear-gradient(90deg,#8
【CSS/JavaScript】立体サイコロ、完成！ - Little Strange Software
どうも！LSSです！！ 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください コード コード解説（CSS部分） コード解説（JavaScript部分） 配列変数の設定 イベントリスナーの設定 あとがき サイコロをクリックまたはタップしてください ※以下、「コード」や「コード解説」が長々と続きます。 興味のない方は「あとがき」まで読み飛ばしてください^^; コード <style> .cb01{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s;
【JavaScript】アナログ時計、JavaScript部分のコード解説 - Little Strange Software
どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました で、即興でアナログ時計を作ってみました。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード（script部分のみ） コード解説（JavaScript部分） setInterval 時刻を秒で取得 Date.now() getTimezoneOffset() 時針の角度計算 分針、秒針も同様に。 って、かなり長くなってしまいましたが… あとがき コード（script部分のみ） <script> tokeitm=setInterval(function(){ tokein=((Date.now()-(new Date()).getTimezoneOffset()*60000)%86400000)/1000; tokeih.styl
はてなブログヘッダー下におすすめ記事を設置するカスタマイズ - フジブロっ！
どうも！フジグチです！ 今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。 以前Cappuccinoで（Neumorphismでも）使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタマイズを紹介したいと思います。 ヘッダー下におすすめ記事を設置することで回遊性が良くなり、ユーザーがサイト内を巡回しやすくなるのでPV数の向上にもつながります。 おすすめの「記事」に限らず、カテゴリやまとめページを設置することで、よりユーザーに適したコンテンツを提供することも出来ます。 今回紹介するカスタマイズはHTMLが苦手な方や初心者の方でも、簡単に導入できるようにしています。 以下に、今回の記事の特徴を挙げます。 この記事の特徴 入力が簡単 使用する画像のアスペクト比に合わせてCSSを変えられる レスポンシブで画像サイズが違っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
