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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1854閲覧

Slick/スライド画像切替時にふんわりさせたい

mahou_minarai

総合スコア9

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/06/11 05:17

編集2020/06/11 07:04

以下のサイト様を参考に、Slickを利用して
徐々に画像拡大→ふんわりとした画像の切り替えを行いたいのですが、切り替わる際にふんわりとした動きにできません。

http://www.cattlemute.com/2019/02/23/1357/
→【DEMO】 http://www.cattlemute.com/publish/slick-zoom-sample/

試してみたこと

フェード要素にしている#slick-main .slideobjectとフェード設定要素の#slick-main .slick-continue .slideobjectのopacityの値をそれぞれ変えてみたりしましたが、変化が見られませんでした。

最近js/jQと勉強し始め、Slickの知識も0に近いです。
どなたかご教示いただけませんでしょうか。どうぞよろしくお願いいたします。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>slickテスト</title> 6<link rel="stylesheet" type="text/css" href="css/slick.css"> 7<link rel="stylesheet" type="text/css" href="css/slick-theme.css"> 8<link rel="stylesheet" type="text/css" href="css/reset.css"> 9<link rel="stylesheet" type="text/css" href="css/test.css"> 10<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 11<script src="js/slick.min.js" type="text/javascript"></script> 12<script src="js/test.js" type="text/javascript"></script> 13</head> 14<body> 15 <div id="slick-main" class="slick"> 16 <div class="slideobject"> 17 <figure class="image" style="background-image: url(images/img01.jpg);"></figure> 18 <p class="text">Slide01</p> 19 </div> 20 <div class="slideobject"> 21 <figure class="image" style="background-image: url(images/img02.jpg);"></figure> 22 <p class="text">Slide02</p> 23 </div> 24 <div class="slideobject"> 25 <figure class="image" style="background-image: url(images/main_visual.jpg);"></figure> 26 <p class="text">Slide03</p> 27 </div> 28 </div>/body> 29</html> 30

css

1/* 効果をかけるためのスタイル設定 */ 2#slick-main .slick-slide{ /* slickによってelement.styleで付けられるopacityを無効化 */ opacity: 1 !important; } 3#slick-main .slideobject{ /* フェード要素の初期設定 */ opacity: 0; transition: 0s; width: 100%; height: 1000px; } 4#slick-main .slick-active .slideobject{ /* slick-active(効果開始)の際のフェード設定 */ /* [重要]slick側の設定と同じdurationを取る */ opacity: 1; transition: ease 5.0s; } 5#slick-main .slick-continue .slideobject{ /* エフェクトの継続用に付与したslick-continueのフェード設定 *//* [重要]slick側の設定と同じdurationを取る */ opacity: 0; transition: ease 5.0s; } 6#slick-main .image{ /* 画像 ズーム要素の初期設定 */ transform: scale(1.0, 1.0); transition: 0s; } 7#slick-main .slick-active .image{ /* 画像 slick-active(効果開始) *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.2, 1.2); transition: ease 10.0s; } 8#slick-main .slick-continue .image{ /* 画像 slick-continue *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.4, 1.4); transition: ease 10.0s; } 9#slick-main p.text{ /* テキスト 初期設定 */ opacity: 0; transition: 0s; } 10#slick-main .slick-active p.text{ /* テキスト slick-active(効果開始) この辺は自由にduration */ opacity: 1; transition: ease 1.0s; transition-delay: 1.0s; } 11#slick-main .slick-continue p.text{ /* テキスト slick-continue この辺は自由にduration */ opacity: 0; transition: ease 1.0s; } 12 13/* スライド周りの基本スタイル */ 14.slideobject{ margin-top: 100px; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; } 15.slideobject .image {background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; } 16.slideobject p.text{ font-size: 20px; line-height: 1.5em; width: 10.0em; height: 3.0em; margin: auto; position: absolute; z-index: 20; top: 0; left: 0; right: 0; bottom: 0; color: #fff; font-weight: bold; text-align: center; overflow: hidden; font-family: sofia-pro, sans-serif; font-weight: 700; font-style: normal; }

javascript

1(function($){ 2 $(window).load(function(){ 3 var slickbase = $('#slick-main'); 4 var timeline = 5000; 5 6 // ズームさせるためのslick側の設定 7 slickbase.slick({ 8 fade: true, // fadeモードで動作させる 9 autoplay: true, // autoplayモードを有効化する 10 autoplaySpeed: timeline, // [重要]画像の切り替えのタイミングをautoplaySpeedで取っておく 11 speed: 0, // [重要]通常はスライド自体の速度をこのプロパティで設定するがゼロに設定する(タイミング制御はCSS側で設定するため) 12 pauseOnHover: false, // 徐々にズームをさせるために一時停止は意味を持たないため無効化 13 pauseOnFocus: false, // 上に同じ 14 swipe: false, // [重要]徐々にズームをかける都合上、組込側が想定している挙動にするため、スワイプは無効化 15 swipeToSlide: false, // 上に同じ 16 slidesToShow: 1, // スライド数は1 17 slidesToScroll: 1, // スライドのスクロール数は1 18 dots: true, // ページングくらいは出したいのでdotはtrueで 19 arrows: false, // ページャーも一応設定可能だが、今回は扱わない 20 infinite: true, // 永続させる 21 }).on('beforeChange', function(event, slick, currentSlide){ 22 var slidebase = $(this).parents(); 23 // slick-activeを抜けた際にエフェクトの継続をかけるために付与 24 slidebase.find('.slick-slide').removeClass('slick-continue'); 25 slidebase.find('.slick-active').addClass('slick-continue'); 26 }); 27 28 // 以下は初回表示の際にスライドをスタートさせるための設定 29 var firstslide = slickbase.find('.slick-slide:nth-child(1)'); 30 firstslide.removeClass('slick-active'); 31 window.setTimeout(function(){ 32 firstslide.addClass('slick-active'); 33 }, 1); 34 35 // slick-dotの設定 36 $('.slick-dots li button').on('click', function(e){ 37 if( ! $(this).parent().hasClass('slick-active') ){ 38 $('.slick-slide').removeClass('slick-active slick-continue'); 39 }else{ 40 // slick-activeになっている要素のページング押下を無効化 41 e.preventDefault(); 42 } 43 }); 44 }); 45})(jQuery);

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/06/11 06:13

<img style="background-image: url(images/img01.jpg);"> これは大いに間違っていると思いますが、実際のコードでもこのようになっていますか?
mahou_minarai

2020/06/11 06:16

コメントありがとうございます! おはずかしい・・・実際のコードは以下です。 <figure class="image" style="background-image: url(img1.jpg);"></figure>
Lhankor_Mhy

2020/06/11 06:20

「参考コードから変更した箇所」は間違い、ということですか? それであれば、訂正した方が、よい回答が付くのではないかと思います。
mahou_minarai

2020/06/11 06:51

アドバイスありがとうございます! そのように訂正をしてみます!
Lhankor_Mhy

2020/06/11 09:09

当方では問題なくふんわりしています。 もしかしたら、「ふんわり」の認識について齟齬があるのかもしれないですね。 slick のバージョンはいくつですか?
mahou_minarai

2020/06/12 04:35

昨夕からサーバーの都合かteratailに繋がりにくく、今やっとアクセスできました。 ご確認いただけたのですね!嬉しいです。どうもありがとうございました。 slickのバージョンは1.8.1を使用しています。 ふんわりの齟齬につきまして、demoと同じように、画像1枚目から2枚目・2枚目から3枚目…と切り替わる際に、直前の画像にフェードが掛かるような感じにしたいのです。 参考サイト様のコードをそのままコピーをしていますが、ソースに貼付すると、画像の切り替わりの際は残像もなくパッと切り替わってしまいます。 Mac OS10.12.6/OS Sierra/キャッシュクリアしてChromeとSafariで確認しております。
Lhankor_Mhy

2020/06/12 05:14

ご参考にされたサイトと、私の環境は、1.9.0です。 お試しになられては?
mahou_minarai

2020/06/12 05:28

ご指南ありがとうございます。1.9.0に変更したところ、正常に動きました! 参考コードをコピペすれば動くのではなく、プラグインのver違いも動作確認のチェックポイントとして考慮しなければならないのですね・・・。とても勉強になりました。 お時間割いていただきまして、本当にありがとうございます!
Lhankor_Mhy

2020/06/12 06:00

やはりそうでしたか。 ご解決されて何よりです。
guest

回答1

0

自己解決

Lhankor_Mhy様にご指南いただきましたので、解決済みとして記させていただきます。

問題発生のSlickバージョンは1.8.1
バージョンを1.9.0に上げたところ、画像切り替え時にふんわりとなりました。

投稿2020/06/12 05:31

mahou_minarai

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問