NowLoading...
ふわっと上から現れるヘッダー

ふわっと上から現れるヘッダー

CSS

CSS

HTML

HTML

JavaScript

JavaScript

Vue

Vue

SASS

SASS

ハックツのCPのように画面をスクロールすると上からふわっと現れるヘッダーの作り方 まずテンプレート(html)

<template> <header class="header"> <div v-scroll="headerAnim" class="header_close" :class="{ header_open: isAction}"> <img src="logo.png"> <p>ヘッダーに載せたい要素</p> </div> </header> </template>

v-scroll="headerAnim" で「画面がスクロールされたときにheaderAnimを実行」 class="header_close" :class="{ header_open: isAction}" によってデフォルトだとheader_closeが適用されるがisActionがtrueのときはheader_openが適用される header_closeは消えるアニメーションで、openが降りてくるアニメーション

次にスクリプト(js)

<script> export default { data () { return { isAction: false } }, methods: { headerAnim (evt, el) { const changeLine = 500 if (window.screenY <= changeLine) { this.isAction = false } if (window.scrollY > changeLine) { this.isAction = true } } } } </script>

if (window.screenY <= changeLine) { this.isAction = false }で「スクロール量が500以下ならisActionはfalse」としている。 スクロール量が500以上ならtrueに変わり、header_openが適用されるため、ヘッダーが降りてくる仕様。

最後にスタイル(scss)

<style lang="scss" scoped> .header{ width: 100%; height: 64px; position: fixed; top: 0; &_close{ width: 100%; height: 100%; background-color: white; transition: 1s; transform: translate(0,-64px); } &_open{ transition: 1s; transform: translate(0,0); } img{ position: fixed; top: 17px; left: 24px; } } </style>

画面についていくようにpositionをfixedにしている。closeではheight分上に動かし、openでは0に戻している。transition: 1s;を付けることでふわっとした動きをしてくれるのでここのふわふわ具合はお好みで。

おーしろ

おーしろ

@5vjds7wtzp27xwy