サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年6月29日 19:43
ホームのタイトルを変更し、ページに動きをいれるため、下記のプログラミングを導入し、最初は動いていたのですが、再度開いたら、ページが見れなくなってしましました。
なにか邪魔をしているものなどがあるのでしょうか・・
それか、時間を置くと治ったりしますか？
よろしくお願いいたします。
JAVA
/*ロード時に特定のカラムにscrollanimeクラスを付与する*/
jQuery(window).on('load', function() {
var contents = ['h2', '.column-left', '.column-center', '.column-right', '.whatsnew', 'iframe'];
jQuery.each(contents, function(index, value) {
jQuery(value).each(function(){
jQuery(this).addClass('scrollanime');
jQuery(this).addClass('downup');
});
});
/*カラムのcenterおよびrightにはdelayクラスを追加する*/
jQuery('.column-center').addClass('delaycenter');
jQuery('.column-right').addClass('delayright');
/*ロード時に見えている範囲を表示させる*/
/*少しだけ余裕をもたせるとiPad縦で良さそうだったので10を指定している。*/
var show_position = 0;
scroll_effect(show_position);
});
/*スクロール時の動きを制御する*/
jQuery(window).on('scroll', function () {
var show_position = 80;
scroll_effect(show_position);
});
function scroll_effect(show_position){
const wHeight = jQuery(window).height();
const scrollAmount = jQuery(window).scrollTop();
jQuery('.scrollanime').each(function () {
const targetPosition = jQuery(this).offset().top;
if(scrollAmount > targetPosition - wHeight + show_position) {
jQuery(this).addClass("fadeInDown");
}
});
};
CSS
/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 1.8s;
animation-fill-mode: forwards;
}
@keyframes fadeInDown {
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
/* cocoon 3カラム構成の2つ目の要素に200msのdelayをかける */
.delaycenter{
-moz-animation-delay:200ms;
-webkit-animation-delay:200ms;
-o-animation-delay:200ms;
-ms-animation-delay:200ms;
}
/* cocoon 3カラム構成の3つ目の要素に400msのdelayをかける */
.delayright{
-moz-animation-delay:400ms;
-webkit-animation-delay:400ms;
-o-animation-delay:400ms;
-ms-animation-delay:400ms;
}
2023年6月29日 20:15
スクロールし、要素が画面に入ると、フェード要素(contentsに設定されている)に対してCSSクラスfadeInDownを付け。
CSSのanimationで下から上に、該当要素をフェード表示させ。（動いており）
図のようにvisibility: hidden;のまま変化しないので、見えないままとなります。
この1文は不要のようです。
余談
skill：Web Design /Coding
言語：HTML/CSS/JavaScript/PHP
と書いてあり。
このような問題を解決し、顧客にサービス提供するのが、貴方がやろうとする仕事です。
先のFlexの件もですが、JSの動作、CSSの意味を理解するよう心掛けて下さい。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。