質問編集履歴

6 追記

miyoshi_work

miyoshi_work score 69

2017/02/20 18:23  投稿

【jQuery】*swiper.js 画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
   <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
 
</head>
 
   <body>
       <div class="swiper-container" id="slide">
       <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
       </div>
       <div class="slide_info">
               <div class="swiper-wrapper">
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
               </div>
       <div class="swiper-pagination"></div>
       </div>
       </div>
</body>
```
```css
#slide {
 padding: 0;
 background: none repeat scroll 0 0 #fff;
 max-width: 495px;
 margin: 0 auto;
 text-align: center;
}
#slide img {
 width: 100%;
 max-width: 480px;
}
.slide_info {
 padding: 10px 0 30px;
}
.slide_info a{
 display: block;
}
```
```javascript
    $(document).ready(function() {
   var swiper = new Swiper('.swiper-container', {
         pagination: '.swiper-pagination',
         paginationClickable: true,
         parallax: true,
         speed: 900,
         autoplay: 6000,
         effect: 'flip',
         updateOnImagesReady:true,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
     });
     
     var swiper = new Swiper('.slide_info', {
         parallax: true,
         speed: 900,
         autoplay: 6000,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
       });
     
   });
```
###
時間ができた際に自分で試したサンプルあげようと思います  
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

5 修正

miyoshi_work

miyoshi_work score 69

2017/02/20 17:53  投稿

【swiper.js】画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい
【jQuery】*swiper.js 画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container" id="slide">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
</div>
<div class="slide_info">
<div class="swiper-wrapper">
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
```
```css
#slide {
padding: 0;
background: none repeat scroll 0 0 #fff;
max-width: 495px;
margin: 0 auto;
text-align: center;
}
#slide img {
width: 100%;
max-width: 480px;
}
.slide_info {
padding: 10px 0 30px;
}
.slide_info a{
display: block;
}
```
```javascript
$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
parallax: true,
speed: 900,
autoplay: 6000,
effect: 'flip',
updateOnImagesReady:true,
loop: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
var swiper = new Swiper('.slide_info', {
parallax: true,
speed: 900,
autoplay: 6000,
loop: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
});
```
###
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

4 修正

miyoshi_work

miyoshi_work score 69

2017/02/20 12:51  投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい
【swiper.js】画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container" id="slide">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
<div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
</div>
<div class="slide_info">
<div class="swiper-wrapper">
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
<p class="swiper-slide">
<a href="#" class="text01">テキスト上</a>
<a href="#" class="text02">テキスト下</a>
</p>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
```
```css
#slide {
padding: 0;
background: none repeat scroll 0 0 #fff;
max-width: 495px;
margin: 0 auto;
text-align: center;
}
#slide img {
width: 100%;
max-width: 480px;
}
.slide_info {
padding: 10px 0 30px;
}
.slide_info a{
display: block;
}
```
```javascript
$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
parallax: true,
speed: 900,
autoplay: 6000,
effect: 'flip',
updateOnImagesReady:true,
loop: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
var swiper = new Swiper('.slide_info', {
parallax: true,
speed: 900,
autoplay: 6000,
loop: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
});
```
###
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

3 修正

miyoshi_work

miyoshi_work score 69

2017/02/20 12:50  投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
   <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
 
</head>
 
   <body>
       <div class="swiper-container" id="slide">
       <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
       </div>
       <div class="slide_info">
               <div class="swiper-wrapper">
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
               </div>
       <div class="swiper-pagination"></div>
       </div>
       </div>
</body>
```
```css
#slide {
 padding: 0;
 background: none repeat scroll 0 0 #fff;
 max-width: 495px;
 margin: 0 auto;
 text-align: center;
}
#slide img {
 width: 100%;
 max-width: 480px;
}
/* 店舗・item情報 */
.slide_info {
 padding: 10px 0 30px;
}
.slide_info a{
 display: block;
}
```
```javascript
    $(document).ready(function() {
   var swiper = new Swiper('.swiper-container', {
         pagination: '.swiper-pagination',
         paginationClickable: true,
         parallax: true,
         speed: 900,
         autoplay: 6000,
         effect: 'flip',
         updateOnImagesReady:true,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
     });
     
     var swiper = new Swiper('.slide_info', {
         parallax: true,
         speed: 900,
         autoplay: 6000,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
       });
     
   });
```
###
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

2 修正

miyoshi_work

miyoshi_work score 69

2017/02/20 12:49  投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)、もしくはテキストをフリックした際に画像、テキストが同時に動くようにしたいです。
上の画像をフリック(動かす)したら、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
   <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
 
</head>
 
   <body>
       <div class="swiper-container" id="slide">
       <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
       </div>
       <div class="slide_info">
               <div class="swiper-wrapper">
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
               </div>
       <div class="swiper-pagination"></div>
       </div>
       </div>
</body>
```
```css
#slide {
 padding: 0;
 background: none repeat scroll 0 0 #fff;
 max-width: 495px;
 margin: 0 auto;
 text-align: center;
}
#slide img {
 width: 100%;
 max-width: 480px;
}
/* 店舗・item情報 */
.slide_info {
 padding: 10px 0 30px;
}
.slide_info a{
 display: block;
}
```
```javascript
    $(document).ready(function() {
   var swiper = new Swiper('.swiper-container', {
         pagination: '.swiper-pagination',
         paginationClickable: true,
         parallax: true,
         speed: 900,
         autoplay: 6000,
         effect: 'flip',
         updateOnImagesReady:true,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
     });
     
     var swiper = new Swiper('.slide_info', {
         parallax: true,
         speed: 900,
         autoplay: 6000,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
       });
     
   });
```
###
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

1 追記

miyoshi_work

miyoshi_work score 69

2017/02/20 12:47  投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい
お世話になっております。
jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。
[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)
画像とテキストの動きを変えたいと思い、上記サンプルを作成いたしました。
既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。
このサンプルのアニメーションで、
上の画像をフリック(動かす)、もしくはテキストをフリックした際に画像、テキストが同時に動くようにしたいです。
###
コードは上記サンプルのものと同様です
```html
<head>
   <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
 
</head>
 
   <body>
       <div class="swiper-container" id="slide">
       <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
           <div class="swiper-slide"><img src="http://placehold.jp/480x360.png" alt=""/></div>
       </div>
       <div class="slide_info">
               <div class="swiper-wrapper">
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
                   <p class="swiper-slide">
                       <a href="#" class="text01">テキスト上</a>
                       <a href="#" class="text02">テキスト下</a>
                   </p>
               </div>
       <div class="swiper-pagination"></div>
       </div>
       </div>
</body>
```
```css
#slide {
 padding: 0;
 background: none repeat scroll 0 0 #fff;
 max-width: 495px;
 margin: 0 auto;
 text-align: center;
}
#slide img {
 width: 100%;
 max-width: 480px;
}
/* 店舗・item情報 */
.slide_info {
 padding: 10px 0 30px;
}
.slide_info a{
 display: block;
}
```
```javascript
    $(document).ready(function() {
   var swiper = new Swiper('.swiper-container', {
         pagination: '.swiper-pagination',
         paginationClickable: true,
         parallax: true,
         speed: 900,
         autoplay: 6000,
         effect: 'flip',
         updateOnImagesReady:true,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
     });
     
     var swiper = new Swiper('.slide_info', {
         parallax: true,
         speed: 900,
         autoplay: 6000,
         loop: true,
         autoplay: 2500,
         autoplayDisableOnInteraction: false
       });
     
   });
```
###
ご教授頂けますと幸いです。
  • jQuery

    11012 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    725 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る