画像ふんわり

<script type="text/javascript">
//<![CDATA[
 // ふんわりエフェクト
$(function(){
$('.effect p, .effect img').css("opacity","0");
$(window).scroll(function (){
$(".effect").each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos - windowHeight + windowHeight/6){
$("img, p",this).css("opacity","1" );
}
else {
$("img, p",this).css("opacity","0" );
}
});
});
});
 
//]]>
</script>
 
<style type="text/css">
/*<![CDATA[*/
 
.effect p {
transition-delay: 0.3s;
margin: auto;
transition: 1.1s;
}
 
.effect div:nth-of-type(3) img {
transition: 1.2s;
}
.effect div:nth-of-type(5) img {
transition: 1.2s;
transition-delay: 0.3s;
}
</style>

カラムの前に下記を追加

<div class="custom-hook" data-class-name="effect" data-target-position="next">
</div>

吹き出しボックス

<style type="text/css">
/*<![CDATA[*/
    /* 吹き出し */
    .balloon {
        position: relative;
        padding: 20px !important;
        background-color: #eee;
        display: inline-block;
        margin-top: 8px;
        margin-bottom: 10px;
        border-radius: 5px;
        width: calc(100% - 210px);
    }
    .balloon::before {
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        top: 30px;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }
    
    balloon-right {
        float: right;
    }
    .balloon-right::before {
        left: -15px;
        right: 100%;
        border-right: 15px solid #eee;
    }
    
    balloon-left {
        float: left;
    }
    .balloon-left::before {
        right: -15px;
        left: 100%;
        border-left: 15px solid #eee;
    }
    
@media (max-width: 767px) {

    /* 吹き出し */
    .balloon {
        position: static;
        padding: 20px !important;
        background-color: #eee;
        display: block;
        float: none;
        margin-bottom: 10px;
        border-radius: 5px;
        width: calc(100% - 40px);
    }
    .cc-indexpage .j-textWithImage .cc-imagewrapper, #page-2506272731 .j-textWithImage .cc-imagewrapper {
        width: 100px;
        margin: 20px;
    }
}
/*]]>*/
</style>

写真付き文章のテキストに記述（右の場合）

 <div class="balloon balloon-right">
<p>係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。</p>
</div>

写真付き文章のテキストに記述（左の場合）

 <div class="balloon balloon-left">
<p>係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。</p>
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。