タグ

2023年7月4日のブックマーク (1件)

  • 2023年にパララックスをCSS、JS、Vue3で実装!LINEポイント10周年記念サイトの実装例

    1. パララックススクロールエフェクトの作り方 今回はCSSを使い3D空間を生成。奥行きであるZ軸にbackgroundの要素を配置する方法で実装しました。 大きな理由としては、パララックス(視差効果)を人間の目が違和感を感じないように実装するためです。この方法を利用すればブラウザ側で適切なパララックスを自動計算して反映してくれます。 パララックスのHTML&CSS実装例(サンプルコード) src/layout/default.vue <template> <div class="layout-default"> <div class="layout-default_scroll"> <main class="layout-default_main"> メインコンテンツが入ります。(最前面に配置) </main> <div class="layout-default_bg1"> 背景要素が

    2023年にパララックスをCSS、JS、Vue3で実装!LINEポイント10周年記念サイトの実装例
    kangsungyang03
    kangsungyang03 2023/07/04
    久しぶりに執筆をおこないました。パララックス実装のLPのお話です。2023年らしい技を使っているので、興味のある方はぜひ。[js][CSS][javascript][LINE][パララックス][Vue.js][Nuxt][Vue3]