delusion_design

delusion_design

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

二枚目のスライドがちょこっとだけ見えるようにスライダープログイン「slick」の使い方とカスタマイズ方法を自分用にまとめてみました。 -完成DEMO- HTML <div class="slider-wrapper"> <div class="contents"> <h4>二枚目のスライドをちょっとだけ見せる</h4> <div class="more"> <a href="#" class="btn btn-arrow">リンクボタン</a> </div

delusion_de…

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

      スクロールすると特定の位置でクラスを付与して画像が拡大されるDelighters.jsの使い方を自分用にまとめてみました。 -完成DEMO- HTML <header id="header"> <section> <div class="header-sp"> <h1 class="site-logo"> <a href="#"><img src="https://dl.easyuploader.cloud/20220130202634_7771784

      delusion_de…

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

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

        delusion_de…

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

          スクロールすると下線が表示されるヘッダーの作り方を自分用にまとめてみました。 -完成DEMO- HTML <header id="header"> <section> <div class="header-sp"> <h1 class="site-logo"> <a href="#"><img src="https://dl.easyuploader.cloud/20220130202634_77717844.svg" alt="#"><

          delusion_de…

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

        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.easyuploader.cloud/20211227210535_324a487a.jpg

          delusion_de…

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

          delusion_design