# ブロックの文字をフワッと出現させる方法
**URL:** https://forums.concretecms.org/t/topic/1907
**Category:** 日本語
**Created:** [December 15, 2021, 7:11am UTC](https://forums.concretecms.org/t/topic/1907 "2021-12-15T07:11:07Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 15, 2021, 7:11am UTC](https://forums.concretecms.org/t/topic/1907/1 "2021-12-15T07:11:07Z")
画面をスクロールして文字が現れるときにフワッと出現させたいのですが、どんな方法がありますでしょうか？？
---
### Author:  [@katz515](https://forums.concretecms.org/u/katz515)
#### Post date: [December 16, 2021, 5:23am UTC](https://forums.concretecms.org/t/topic/1907/2 "2021-12-16T05:23:11Z")
ふわっとという表現も千差万別なので、どのような表現なのか教えてもらえますか？
具体的に他のサイトの URL などがあると参考になります。
とにかく、テーマやアドオンなど、HTML、CSS、JS の領域になります。
もらったサンプルを参考に、似たような効果を持つテーマ・・・おそらく有料を購入するか、HTMLのテンプレートを購入して、Concrete CMS のテーマとして作るかになるかなと思います。
---
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 16, 2021, 8:36am UTC](https://forums.concretecms.org/t/topic/1907/3 "2021-12-16T08:36:31Z")
お返事ありがとうございます！
言葉足らずで申し訳ありません、、
テキストを上から下に流れるように出す方法をお聞きしたいです。
↓こちらのサイトでサンプルが見られます。
> **[流れるように出現（上から下） | 動くWebデザインアイディア帳](https://coco-factory.jp/ugokuweb/move02/8-4/)**
html、css、javascriptで作成しているモックがあるので、テーマを自作すればconcrete5上でも実現出来るかと思ったのですがどのように組み込むかが分からず、、
有料でテーマやアドオンを購入しなくても実装できる術はありますでしょうか？？
---
### Author:  [@katz515](https://forums.concretecms.org/u/katz515)
#### Post date: [December 17, 2021, 1:16am UTC](https://forums.concretecms.org/t/topic/1907/4 "2021-12-17T01:16:59Z")
取り急ぎ。
ブロックテンプレートでできると思います。
すいません、ちょっとバージョンが古くて、
長い動画がありますが、これが一番詳しいです。
> **[ブロック：カスタムテンプレートの作り方](https://concrete5-japan.org/help/5-7/movies/develop/custom-template/)**
>
> concrete5.7.x でブロックが出力する HTML を自由に変更できるカスタムテンプレートの仕組みと作り方を解説しました。
他にも
> **[テンプレートファイルを作成する](https://concrete5-japan.org/help/5-7/developer/working-with-blocks/working-with-existing-block-types/creating-additional-custom-view-templates/creating-a-template-file/)**
一番詳しいのが英語のドキュメントです
[https://documentation.concretecms.org/developers/working-with-blocks/working-with-existing-block-types/creating-additional-custom-view-templates](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 で動画解説いたします。
よろしくお願いいたします。
---
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 17, 2021, 2:14am UTC](https://forums.concretecms.org/t/topic/1907/5 "2021-12-17T02:14:26Z")
ご丁寧にありがとうございます！
共有していただいた動画を全て見てやってみます！
また、動画解説まで考えてくださりありがとうございます！
金土日で作業して躓かずに出来ればいいですが、、
何か躓いてしまったらまたこちらでご質問させてください。
---
### Author:  [@pictron](https://forums.concretecms.org/u/pictron)
#### Post date: [December 20, 2021, 2:33am UTC](https://forums.concretecms.org/t/topic/1907/6 "2021-12-20T02:33:38Z")
拝見したサンプルでは、表示のアニメーションはＣＳＳの ``Preformatted text`keyframes slideTextY-100 `で実現し、アニメーションさせるタイミングは`
slideAnime
`で実現されていますね。スクロールで位置に来たときに表示するのは、wow.jsやScrollTriger.jsなどライブラリーもあります。
---
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 20, 2021, 6:34am UTC](https://forums.concretecms.org/t/topic/1907/7 "2021-12-20T06:34:07Z")
katzさん質問よろしいでしょうか？
“出力される場所を div や span で囲む” というところが、どこを囲めば良いのか分からなくて、、 ご教授いただきたいです。
まず、
/concrete/blocks/content/view.php ←ここに記述してあるものをまるっとコピーして、自作するview.phpに書くので合ってますでしょうか？
その上で囲む場所はどこになりますでしょうか？
---
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 20, 2021, 6:38am UTC](https://forums.concretecms.org/t/topic/1907/8 "2021-12-20T06:38:43Z")
教えてくださりありがとうございます！
wow.jsやScrollTriger.jsなど 知らなかったので、調べて勉強していきたいと思います。
---
### Author:  [@katz515](https://forums.concretecms.org/u/katz515)
#### Post date: [December 21, 2021, 3:49am UTC](https://forums.concretecms.org/t/topic/1907/9 "2021-12-21T03:49:21Z")
@sayaka.m 取り急ぎ
> /concrete/blocks/content/view.php ←ここに記述してあるものをまるっとコピーして、自作するview.phpに書くので合ってますでしょうか？
はい。あっています。
> その上で囲む場所はどこになりますでしょうか？
PHP の記述に気をつけていただかないといけないのですが、
`echo $content` とある部分です。
>
Else の ブラケット {} の中となります。
`?>` で一旦 PHP を閉じて、CSS クラスの記述をして、 `
### Author:  [@sayaka.m](https://forums.concretecms.org/u/sayaka.m)
#### Post date: [December 21, 2021, 5:49am UTC](https://forums.concretecms.org/t/topic/1907/10 "2021-12-21T05:49:22Z")
ありがとうございます！
無事反映させることが出来ました！
また何か質問させていただくかと思いますがよろしくお願いいたします。
---
### Author:  [@katz515](https://forums.concretecms.org/u/katz515)
#### Post date: [December 24, 2021, 5:24am UTC](https://forums.concretecms.org/t/topic/1907/11 "2021-12-24T05:24:22Z")
反映できたとのこと安心しました！
また何かありましたら質問してください！
---
### Author:  [@akahige](https://forums.concretecms.org/u/akahige)
#### Post date: [December 24, 2021, 5:45pm UTC](https://forums.concretecms.org/t/topic/1907/12 "2021-12-24T17:45:47Z")
> **[HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法を現役デザイナーが解説【初心者向け】](https://techacademy.jp/magazine/28713)**
>
> 初心者向けにHTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法について解説しています。ここではcssのanimationプロパティを使った書き方を簡単な例で紹介します。アニメーションを入れる際の参考にしてください。