画面をスクロールして文字が現れるときにフワッと出現させたいのですが、どんな方法がありますでしょうか？？
ふわっとという表現も千差万別なので、どのような表現なのか教えてもらえますか？
具体的に他のサイトの URL などがあると参考になります。
とにかく、テーマやアドオンなど、HTML、CSS、JS の領域になります。
もらったサンプルを参考に、似たような効果を持つテーマ・・・おそらく有料を購入するか、HTMLのテンプレートを購入して、Concrete CMS のテーマとして作るかになるかなと思います。
1 Like
お返事ありがとうございます！
言葉足らずで申し訳ありません、、
テキストを上から下に流れるように出す方法をお聞きしたいです。
↓こちらのサイトでサンプルが見られます。
html、css、javascriptで作成しているモックがあるので、テーマを自作すればconcrete5上でも実現出来るかと思ったのですがどのように組み込むかが分からず、、
有料でテーマやアドオンを購入しなくても実装できる術はありますでしょうか？？
取り急ぎ。
ブロックテンプレートでできると思います。
すいません、ちょっとバージョンが古くて、
長い動画がありますが、これが一番詳しいです。
他にも
一番詳しいのが英語のドキュメントです
https://documentation.concretecms.org/developers/working-with-blocks/working-with-existing-block-types/creating-additional-custom-view-templates
記事ブロックのブロックテンプレート（旧名カスタムテンプレート）を作り、
出力される場所を div や span で囲むといいです。
CSS や JS も組み混むことができます。
/application/blocks/contents/[カスタムテンプレート名]/view.php
/application/blocks/contents/[カスタムテンプレート名]/view.css
/application/blocks/contents/[カスタムテンプレート名]/view.js
こうすることで、特に JS ファイルが二重に読み込まれて JS エラーになってしまうことを避けることができます。
わからないところがあれば順々にお答えしますので、お気軽にご質問ください。
もしもお待ちいただけるのであれば、来週の週刊 Concrete CMS で動画解説いたします。
よろしくお願いいたします。
1 Like
ご丁寧にありがとうございます！
共有していただいた動画を全て見てやってみます！
また、動画解説まで考えてくださりありがとうございます！
金土日で作業して躓かずに出来ればいいですが、、
何か躓いてしまったらまたこちらでご質問させてください。
拝見したサンプルでは、表示のアニメーションはＣＳＳの `Preformatted text`keyframes slideTextY-100 `で実現し、アニメーションさせるタイミングは
slideAnime
`で実現されていますね。スクロールで位置に来たときに表示するのは、wow.jsやScrollTriger.jsなどライブラリーもあります。
1 Like
katzさん質問よろしいでしょうか？
“出力される場所を div や span で囲む” というところが、どこを囲めば良いのか分からなくて、、 ご教授いただきたいです。
まず、
/concrete/blocks/content/view.php ←ここに記述してあるものをまるっとコピーして、自作するview.phpに書くので合ってますでしょうか？
その上で囲む場所はどこになりますでしょうか？
教えてくださりありがとうございます！
wow.jsやScrollTriger.jsなど 知らなかったので、調べて勉強していきたいと思います。
@sayaka.m 取り急ぎ
/concrete/blocks/content/view.php ←ここに記述してあるものをまるっとコピーして、自作するview.phpに書くので合ってますでしょうか？
はい。あっています。
その上で囲む場所はどこになりますでしょうか？
PHP の記述に気をつけていただかないといけないのですが、
echo $content とある部分です。
Else の ブラケット {} の中となります。
?> で一旦 PHP を閉じて、CSS クラスの記述をして、 <?php で PHP 記述を再開し、echo $contetent 同じように、もう一度、PHP を閉じて、閉じタグを追加してください。
すいません、取り急ぎ、こんな回答しかできないので、またわからなかったら質問してください。
1 Like
ありがとうございます！
無事反映させることが出来ました！
また何か質問させていただくかと思いますがよろしくお願いいたします。
1 Like
反映できたとのこと安心しました！
また何かありましたら質問してください！
1 Like
1 Like