常連

注目の的

自己紹介

### 前提・実現したいこと

WordPressで、自作テーマを導入し、contact form 7をプラグイン。

その後、自作テーマにcontact form 7を埋め込み、submitボタンを押すと、あらかじめ用意しておいた(固定ページ)送信完了画面への遷移させる。

### 発生している問題・エラーメッセージ

自作テーマにcontact form 7を埋め込み、送信完了ページを用意するところまでは出来ました。しかし、その後、submitボタンをクリックしても、同じ画面で送信完了メッセージが表示されるだけで固定ページに遷移しません。

### 試したこと

contact form 7 の編集ページにて、フォームにDOMイベントの追加で遷移するとググった結果でてきたので、追加しましたが、遷移しませんでした。

そもそも、サンクスページをプレビューしてもタイトルは固定ページで設定したものになっていても、ページ自体は自作テーマのままです。

また、自作テーマを一度外し、最初から用意されていたテーマを使用すると挙動しています。

よろしくお願いいたします！

WordPressでcontact form 7を使用し、完了ページに遷移させる方法

### cssスプライトでパラパラマンガの様なアニメーションを作りたい

cssスプライトで、左から右へスライドしながら進んでいく２コマのアニメーションを作りたい。
いも虫がくねくねしながら左から右へスライドしていくイメージです。

### 発生している問題・エラーメッセージ
下記の様な横に連続した画像を使用しています。
一コマ目で画像全体が表示されてしまい、二匹になったり一匹になったりしながら表示されてしまいます。
一匹だけをくねくねと動かしたいのです。
![![イメージ説明](223c3ea8c10128f7c7b0a350152b4cdc.png)](21c9b6ea63537d5ddd176e41a7ddc73e.png)
実際に使用している画像はsvgですが、上記pngと同じものです。

### 該当のソースコード
**HTML**
```ここに言語を入力
   <div class="slide">
     <div class="aruku"></div>
   </div>
```

**CSS**
```ここに言語を入力
.slide {
    animation-name: slide;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes slide {
    0% {transform: translateX(-55%);}
    100% {transform: translateX(55%);}
}
.aruku {
  margin: 100px auto 0;
  background: url(image/tekuteku.svg) 0 0 no-repeat;
  height: 0;
  overflow: hidden;
  padding-top: 70px;
  width: 200px;
  animation: sprite 1s steps(2) infinite;
  background-size: 200px;
}
@keyframes sprite {
  0%   {background-position: 0 0;}
  100% {background-position: -200px 0;}
}

```

cssスプライトでパラパラマンガの様なアニメーションを作りたい

# Swiperを使った自動スクロールについての質問です！

現在Swiperを使い、スライドショーの作成をしているのですが、スライドとスライドの切り替えの際の時間をどうしてもなくしたい（日本語が下手で伝わりにくく申し訳ないです）のですがどのように記述すればよいのかわかりません。

    今現在は

```js
var swiper = new Swiper('.swiper-container', {
      slidesPerView: 8,
      spaceBetween: 30,
      initialSlide: 2,
      loop: true,
      autoplay: 1,
      autoplayDisableOnInteraction:false,
      grabCursor: true,
      reverseDirection: true,
      freeMode: true,
      speed: 4000,
    });
```
    

    このように記述をしております。

完成イメージはこのような感じです
https://chocolat5.com/demo/loop-image-animation/

    皆様にお助けいただければ助かります!

![イメージ説明](60c936a0e1554123910e9c05d92056e1.jpeg)
上記画像のパソコンやスマートフォンの画像を、右から左に流れるようにアニメーションをさせたいと考えています。

また、こちらHTMLとSCSSになります。
```html
<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/kaden.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/tablet.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/desktop.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/note.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/smart.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/parts.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/etc.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/gaming.png"></div>
      </div>
    </div>
```

```scss
.swiper-container {
  padding: 3em 0 6em;
}
```

SWIPERのautoplayについて

現在お店一覧を(ぐるなびAPIを使用)、１カラムで縦に表示するWEBサイトを作っています。

画面上部に固定バーが置いてあり(cssのfixed)、さらに固定バーの内にinputが置いてあり、キーワード検索ができるようになっています。

ajaxを使用していてその時の画面最下層まで行くと、お店がスクロールに合わせてどんどんと下に追加されていくようになっているのですが、スマホ版Safariで操作する時のみ、固定バー上のinputに文字を入力しフォーカスされた状態になると、画面上部まで自動でスクロールしてしまいます。

画面自動スクロールをさせないようにするには、どのような解決策がありますでしょうか？


※PCの場合はinputの場所まで自動スクロールされません。スマホの場合のみ自動スクロールしてしまいます。
※ブラウザはsafariを使用しています。chromeでは起きませんした。

**テストコード**
```ここに言語を入力
<header style='position:fixed;width:100%;'>
<input type='text' name='search'>
</header>

<div style='height:2000px;'></div>
```