[COMLS]

お世話になります。

1度消して入れ直ししていますが、他ブロックを作成すると、崩れてしまいます。

一貫性がないのでわからないのですが、下記内容のタイミングでくずれるケースがあります。

1.他ブロックにclass名を付けた時
2.他ブロックを移動させた時
3.他ブロックのスマホ非表示などを設定した時

などです。

上記内容の場合でも崩れない時もあります。
からこれ40回程度、崩れています。
ご教授下さい。

♥ 0

いいねをした人: 居ません

[COMLS]

確認していろいろ試してみたのですが上手くいきません。
ちなみにお気づきの個所を教えて頂いても宜しいでしょうか？
たびたび申し訳ありません。

<div class="wp-block-snow-monkey-blocks-slider alignfull smb-slider sme-hidden-sm toppc">
    <div class="smb-slider__canvas" dir="rtl" data-smb-slider="{&quot;slidesToShow&quot;:1,&quot;slidesToScroll&quot;:1,&quot;mdSlidesToShow&quot;:1,&quot;mdSlidesToScroll&quot;:1,&quot;smSlidesToShow&quot;:1,&quot;smSlidesToScroll&quot;:1,&quot;dots&quot;:false,&quot;arrows&quot;:false,&quot;speed&quot;:1000,&quot;autoplay&quot;:true,&quot;autoplaySpeed&quot;:4000,&quot;fade&quot;:false,&quot;rtl&quot;:true}">
        <!-- wp:snow-monkey-blocks/slider--item {"imageID":185} -->
        <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item">
            <div class="smb-slider__item__figure"><img src="http://comls.co.jp/wp-content/uploads/2020/04/siz22-1-1024x576.jpg" alt="" /></div>
        </div>
        <!-- /wp:snow-monkey-blocks/slider--item -->

        <!-- wp:snow-monkey-blocks/slider--item {"imageID":776} -->
        <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item">
            <div class="smb-slider__item__figure"><img src="http://comls.co.jp/wp-content/uploads/2020/04/topimg2253-5-1024x504.jpg" alt="" /></div>
        </div>
        <!-- /wp:snow-monkey-blocks/slider--item -->
    </div>
    <div class="visionpc" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="3000">
        <a href="#anchor">vision</a></div>
    <div>
        <p class="pcsata">
            <top>L</top>
            <top>O</top>
            <top>O</top>
            <top>K</top>
            <top>&nbsp;</top>
            <top>U</top>
            <top>P</top>
            <top>&nbsp;</top>
            <top>A</top>
            <top>N</top>
            <top>Y</top>
            <top>T</top>
            <top>I</top>
            <top>M</top>
            <top>E</top>
            <top>&nbsp;</top>
            <top>
                <br>U</top>
            <top>N</top>
            <top>F</top>
            <top>I</top>
            <top>N</top>
            <top>I</top>
            <top>S</top>
            <top>H</top>
            <top>D</top>
            <top>&nbsp;</top>
            <top>
                <br>E</top>
            <top>V</top>
            <top>O</top>
            <top>L</top>
            <top>U</top>
            <top>T</top>
            <top>I</top>
            <top>O</top>
            <top>N</top>
            <top>&nbsp;</top>
            <top>I</top>
            <top>S</top>
            <top>&nbsp;</top>
            <top>T</top>
            <top>H</top>
            <top>E</top>
            <top>R</top>
            <top>E</top>
            <top></top>
            <topp>
                <br>
                <br>上</topp>
            <topp>を</topp>
            <topp>見</topp>
            <topp>れ</topp>
            <topp>ば</topp>
            <topp>常</topp>
            <topp>に</topp>
            <topp>未</topp>
            <topp>完</topp>
            <topp>成</topp>
            <topp>&nbsp;&nbsp;&nbsp;</topp>
            <topp>進</topp>
            <topp>化</topp>
            <topp>は</topp>
            <topp>そ</topp>
            <topp>こ</topp>
            <topp>に</topp>
            <topp>あ</topp>
            <topp>る</topp>
            <topp>&nbsp;</topp>
            <topp>&nbsp;</topp>
            <topp>&nbsp;</topp>
        </p>
    </div>
</div>

♥ 0

いいねをした人: 居ません

[COMLS]

クラス名を変更したらうまくできました。

 

本当有難うございます！！

 

♥ 0

いいねをした人: 居ません

[COMLS]

ありがとうございます。

出来ました。

♥ 1

いいねをした人: 居ません

[COMLS]

お忙しい中申し訳ありません。

こちらのサイトを見て頂いても宜しいでしょうか？

株式会社コムラスグループ

comls.co.jp

NEWSと書いている箇所のセクションはフロントページ（スライダー）のあとに表示されるはずですが、新しくセクションを追加するとスライダーに追加している画像が消え一番上から重なって表示されてしまいます。（スマホ時）

PC表示では問題がないのですが、PC時にもスライダーの画像は消えてしまします。

一度見てもらっても宜しいでしょうか？

♥ 0

いいねをした人: 居ません

[COMLS]

たびたび申し訳ありません。こちらをいれても効果なしですが、どこか間違っているところなどありますでしょうか？

jQuery(function($){
	var $slider = $('.slider'),
	contentLength = $slider.children().length - 1;

	$slider.slick({
		slidesToShow: 1,
		autoplay: true,
		pauseOnHover: false,
		autoplaySpeed: 2000,
		arrows: false,
		fade: true
	}).on('afterChange', function() {
		var currentSlide = $slider.slick('slickCurrentSlide');

		if(currentSlide === contentLength){
			$slider.slick('slickPause');
		}
	});
});

♥ 0

いいねをした人: 居ません

[COMLS]

こんな感じでJSファイルに入れてみたのですが、変化なしです。
現在プログラミングを始めたばかりで、見当違いなことをしているのかもしれないです。
お指導いただけると幸いです。

jQuery('.slider').on('afterChange',function(){
	jQuery('.slide__content').slickPauses("on");
});

♥ 0

いいねをした人: 居ません

[COMLS]

ありがとうございます。試みたのですが、うまくいきません。

 

♥ 0

いいねをした人: 居ません

[COMLS]

ありがとうございます。

解決致しました。

♥ 1

いいねをした人: 居ません

[COMLS]

HTMLを書き換えたら

出来ました！

ありがとうございます！

♥ 1

いいねをした人: 居ません

[COMLS]

ご回答ありがとうございます。

cssを追加したところ無事反映いたしました。

また不明な点があればご連絡させていただきますのでよろしくお願い致します。

♥ 0

いいねをした人: 居ません

[COMLS]

お世話になります。

 

marginで調整できました。

有難うございます。

♥ 0

いいねをした人: 居ません

[COMLS]

北島様お

お世話になっています。コムラスです。

スクロールした際に特定の位置に来た時にアニメーションがスタートする様にしたいのが目的です。

ご確認よろしくお願いいたします。

参考サイト

左から右に現れて文字だけ残るCSSアニメーション

最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。 今回はその中でもよく見かける色付きのライ…

web.alfactory.co.jp

実際に運用するときはスクロールに合わせて動くように js もしくは jQuery を使って class を付与して、class が付いた時にanimation が動くようにするのが、実際の運用のポイントです。

今回のサンプルで言えば、js・jQuery で付与する class は「move」になります。もちろん任意の名前ですのでお好きなものを命名してください。

今回はjQueryのサンプルもご用意しました。

$(window).scroll(function(){
	$(".passing").each(function(){
		var imgPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > imgPos - windowHeight + windowHeight / 4){
			$(this).addClass('move');
		}
	});
});

♥ 0

いいねをした人: 居ません

[COMLS]

読み込みできました。ありがとうございます。

♥ 1

いいねをした人: 居ません

[COMLS]

function twpp_enqueue_styles() {
	wp_enqueue_style(
		'open-sans',
		'https://unpkg.com/aos@2.3.1/dist/aos.css'
	);
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

ちなみに上記内容を mysnowmonkey.php に入れています。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿