delusion_design

delusion_design

二枚目のスライドをちょっとだけ見せるスライダープログイン「slick」の使い方

二枚目のスライドがちょこっとだけ見えるようにスライダープログイン「slick」の使い方とカスタマイズ方法を自分用にまとめてみました。 -完成DEMO- HTML <div class="s…

delusion_design
delusion_design
2年前
1

スクロールで画像を拡大！Delighters.jsの使い方

スクロールすると特定の位置でクラスを付与して画像が拡大されるDelighters.jsの使い方を自分用にまとめてみました。 -完成DEMO- HTML <header id="header"> <section>…

delusion_design
delusion_design
2年前
2

CLOSEボタンと領域外クリックで閉じるハンバーガーメニューの作り方

よく見かけるハンバーガーメニューは、アイコンをクリックすると形が×などに変形すると思います。今回は、下記の条件でハンバーガーメニューを作成して作り方を自分用にま…

delusion_design
delusion_design
2年前
3

スクロールすると下線が表示されるヘッダーの作り方

スクロールすると下線が表示されるヘッダーの作り方を自分用にまとめてみました。 -完成DEMO- HTML <header id="header"> <section> <div class="header-sp"> …

delusion_design
delusion_design
2年前
2

スクロールすると高さが可変するヘッダーの作り方

スクロールすると高さが可変するヘッダーの作り方を自分用にまとめてみました。 -完成DEMO- HTML <header id="header"> <ul> <li>menu1</li> <li>menu2</li> …

delusion_design
delusion_design
2年前
2
delusion_design

delusion_design

二枚目のスライドをちょっとだけ見せるスライダープログイン「slick」の使い方

二枚目のスライドをちょっとだけ見せるスライダープログイン「slick」の使い方

二枚目のスライドがちょこっとだけ見えるようにスライダープログイン「slick」の使い方とカスタマイズ方法を自分用にまとめてみました。

-完成DEMO-

HTML

<div class="slider-wrapper"> <div class="contents"> <h4>二枚目のスライドをちょっとだけ見せる</h4> <div class="more"> <a href="#

もっとみる
delusion_design

delusion_design

スクロールで画像を拡大！Delighters.jsの使い方

スクロールで画像を拡大！Delighters.jsの使い方

スクロールすると特定の位置でクラスを付与して画像が拡大されるDelighters.jsの使い方を自分用にまとめてみました。

-完成DEMO-

HTML

<header id="header"> <section> <div class="header-sp"> <h1 class="site-logo"> <a href="#"><img src="https://dl.e

もっとみる
delusion_design

delusion_design

CLOSEボタンと領域外クリックで閉じるハンバーガーメニューの作り方

CLOSEボタンと領域外クリックで閉じるハンバーガーメニューの作り方

よく見かけるハンバーガーメニューは、アイコンをクリックすると形が×などに変形すると思います。今回は、下記の条件でハンバーガーメニューを作成して作り方を自分用にまとめてみました。
①アイコンは変形しない。
②ナビゲーション内の別ボタン(CLOSEボタン)をクリックすると閉じる。
③領域外をクリックすると閉じる。

-完成DEMO-

HTML

<header id="header"> <sect

もっとみる
delusion_design

delusion_design

スクロールすると下線が表示されるヘッダーの作り方

スクロールすると下線が表示されるヘッダーの作り方

スクロールすると下線が表示されるヘッダーの作り方を自分用にまとめてみました。

-完成DEMO-

HTML

<header id="header"> <section> <div class="header-sp"> <h1 class="site-logo"> <a href="#"><img src="https://dl.easyuploader.clou

もっとみる
delusion_design

delusion_design

スクロールすると高さが可変するヘッダーの作り方

スクロールすると高さが可変するヘッダーの作り方

スクロールすると高さが可変するヘッダーの作り方を自分用にまとめてみました。

-完成DEMO-

HTML

<header id="header"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </header><div class="hero"> <img src="https://dl.easyup

もっとみる