質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • JavaScript

    17541questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6208questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Vue.js

    842questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

画像の重なりをユーザーの操作により解除できる方法はないか。 vue.js

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 225

yzmw131321

score 8

イメージ説明

Vue.js で、図のような機能を実装したいです。
この機能を実装する方法がわからないので質問させて頂きます。

❶の状態では、3枚のdiv要素が重なって並んでいます。
奥に行くほど最初の幅は短くなっていますが、高さは全て同じです。

❶の状態で最も手前の要素を下にスクロールすると、下に移動し、
div 1要素+α分だけ スクロールした段階で次の要素も続いて 幅を100%にしつつ下に移動させ、
❸までの機能を実装させたいです。

当初の考えとしては、
(1) 十分スクロールできるよう、全体の高さを確保する
(2)  最も手前の要素を可動、それ以外を固定に設定
(3)  スクロールした量を取得し、1枚の高さ+α 移動した際に、次の要素に可動かつ幅を100%に設定したclassを与える

といった流れを想定しています。ここでいうスクロールとは、
画面をスクロールして (つまり、ユーザーは画面を指で上に弾いて)下を見るという事ではなく、
水色の要素を下に弾いて移動させる、というイメージです。(スクロール、以外に適当な表現があれば教えてください。これが分からないので、自力で調べるのに限界があります)


ソースを表示します。
現時点では、手前の .coupon_areaをtouchmoveすると position:absoluteを外せるように設定したつもりです。
しかし、absoluteが消えるどころか3つのli要素自体が全て消えてしまいます。これの原因も分からないです。

<!-- thanks表示、announce非表示 OK -->
<template>
  <div class="content_wapper">

    <div class="content_inner">

      <div class="member_barcode_area coupon_area">
        <p>テキスト</p>
        <div class="barcode"></div>
      </div>

      <div class="thanks_text_area" v-if="coupondAllSlided" v-bind:class="{show: coupondAllSlided}">
        <p>テキスト</p>
        <div class="button_area">
          <button class="type1">テキスト</button>
        </div>
        <p class="coupon_list_header">テキスト</p>
      </div>

      <ul class="coupon_list">
        <li class="coupon_area hasImg back" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}">
        </li>

        <li class="coupon_area hasImg between" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}"> 
        </li>

        <li class="coupon_area front" v-on:touchmove="slide" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}">     
        </li>

      </ul>
    </div>
  </div>
</template>

<script type="text/javascript" src="../assets/js/jsfile.js"></script>

<style scoped src="../assets/css/cssfile.css"></style>
@import "variables";

.content_wapper {

  .content_inner {
    margin: 0 0.2rem 0 0.2rem;
    width: calc(100vw - (0.2rem * 2));

    .member_barcode_area{

      p{
        text-align: center;
        margin: 0.5rem 0;
        font-size: 1.1rem;

        &::before,&::after{
          content: '';
          background-color: #000;
          vertical-align: middle;
          display: inline-block;
          background-repeat: no-repeat;
          width: 15px;
          height: 15px;
          background-size: contain;
          margin-bottom: 3px;
          margin-right: 1px;
          margin-left: 1px;
        }
      }

      .barcode{
        width: 17rem;
        height: 5rem;
        background-color: #000;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .thanks_text_area {
      margin: 2rem 0;
      text-align: center;

      .coupon_list_header {
        margin-top: 2rem;
      }

      .show {
        visibility: show;
      }
    }

    .coupon_list {
      position: relative;

      .coupon_area {
        height: 14rem;
        left: 50%;
        transform: translateX(-50%);

        &.notSlided {
         position: absolute;
        }

        &.back {
          width: 80%;
        }

        &.between {
          width: 90%;
          z-index: 1;
          top: 2rem;
        }

        &.front {
          width: 95%;
          z-index: 2;
          top: 4rem;
        }
      }
    }

    .coupon_area {
      position: relative;
      border: #0F70AA 2px solid;
      background-color: #E0F3FF;
      height: 8rem;
      padding: 0.5rem 0.5rem 0.1rem 0.5rem;
      margin: 0.5rem 0;
      color: #484848;

      .coupon_title {

        .new {
          display: inline-block;
          height: 1.5rem;
          line-height: 1.5rem;
          width: 3.5rem;
          text-align: center;
          color: #ffffff;
          background-color: #FF0000;
          margin-right: 0.5rem;
          border-radius: 15px;
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
        }
      }

      .discount_text {
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        color: $BASE_COLOR;
      }

      .deadline_area {
        font-weight: 400;
        width: 10rem;
        text-align: center;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;

        p {
          font-size: 0.9rem;

          &:first-child{
            padding-bottom: 0.2rem;
          }
        }
      }

      .announce_area {
        background-color: $BASE_COLOR;
        text-align: center;
        vertical-align: middle;
        margin: 1rem auto 0 auto;
        color: $LABEL_COLOR;
        width: 50%;
        height: 3rem;
        border-radius: 0.3rem;
        position: fixed;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          right: -9px;
          top: 15px;
          border-left: 10px solid $BASE_COLOR;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }

        p {
          line-height: 1rem;
          padding-top: 0.5rem;
        }
      }

      .arrow {
        float: right;
        background-image: url(../img/down-arrow.png);
        position: absolute;
        right: -3rem;
        top: 0;
        background-repeat: no-repeat;
        background-size: 30px 53px;
        width: 2rem;
        height: 5rem;
      }

      .per_coupons {
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        margin-top: 1rem;
      }

      .button_area {
        width: 4.5rem;
        position: absolute;
        right: 3px;
        bottom: 3px;
      }

      &.hasImg {

        .img_area {
          width: 5.5rem;
          height: 5.5rem;
          background-color: #000;
          float: left;
          display: inline-block;
        }

        .coupon_text_area {
          margin-left: 0.5rem;
          display: inline-block;
          width: calc(100% - (5.5rem + 1rem));

          .coupon_title {
            height: 1.2rem;
          }

          .coupon_detail {
            margin: 0.5rem 0 0 0;
            line-height: 1.2rem;
            font-weight: 200;
            height: 3rem;
            font-size: 0.8rem;
          }
          .deadline_area {
            text-align: left;
            margin: 0;

            p.large {
              font-size: 2rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

こういうことをしたいのでしょうか。

<input type="radio" name="on" checked>
<input type="radio" name="on">
<input type="radio" name="on">
<div>1</div>
<div>2</div>
<div>3</div>
div {
  width: 90vw;
  height: 60vh;
  position: relative;
  margin: 0 5vw;
  transition: all 1s;
}
div:nth-of-type(1) {
  background-color: #a55;
  transform: translateY(-4vw) scale(.9);
}
div:nth-of-type(2) {
  background-color: #5a5;
  transform: translateY(-65vh) scale(.95);
}
div:nth-of-type(3) {
  background-color: #55a;
  transform: translateY(-120vh);
}

input {
  margin-bottom: 3vw;
}

input:nth-of-type(2):checked ~ div:nth-of-type(1) {
  transform: translateY(-3vw) scale(.95);
}
input:nth-of-type(2):checked ~ div:nth-of-type(2) {
  transform: translateY(-60vh) scale(1);
}
input:nth-of-type(2):checked ~ div:nth-of-type(3) {
  transform: translateY(-60vh);
}

input:nth-of-type(3):checked ~ div:nth-of-type(1) {
  transform: translateY(0) scale(1);
}
input:nth-of-type(3):checked ~ div:nth-of-type(2) {
  transform: translateY(0) scale(1);
}
input:nth-of-type(3):checked ~ div:nth-of-type(3) {
  transform: translateY(0);
}

動くサンプル:https://jsfiddle.net/buLdg1hf/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/11 17:56

    動作は似ています。
    inputではなく、手前の物をドラッグした時に他の2枚も連動して動かせたいです

    キャンセル

  • 2018/07/11 18:00

    「タッチのとき」にクラスを追加するように書き換えれば近い動きは出来ると思いますよ。

    キャンセル

+1

hammer.jsを使うと上下左右のスワイプ情報が取得できるので下スワイプのときにKei344さんのコードが実行されるようにしたらいいかと思います。
http://masarufuruya.hatenadiary.jp/entry/2018/01/24/150147

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 10:50

    ありがとうございます。
    提示して頂いたhammer.jsは jqueryで動くんですよね?

    vue.jsとは共存できないようなので、スワイプイベントの取得はvueのチュートリアルに従ってやろうと思います。 それに対して各要素に、transformするclassを付与すれば良いという事ですよね。

    キャンセル

  • 2018/07/12 11:01

    hammer.jsはjQueryに依存していませんよ。

    キャンセル

  • 2018/07/12 11:03

    考え方的には下スワイプを検知した後jsなりcssなりでアニメーションさせればいいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17541questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6208questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Vue.js

    842questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。