fade

  • javascriptを使用しているBlockDesignは、BiNDupのアップデートにより動作しなくなる可能性があります。
  • 各BlockDesignは、ページが開く時にフェードする設定と、スクロールしてからフェードする設定の2つが用意されています。ビルボードに使用する際は、前者をご使用ください。

fade_001

CSSだけの単純フェード

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

吾輩は猫である。名前はまだ無い。

fade_002

シンプルフェードイン javascript

吾輩は猫である。名前はまだ無い。 

fade_003

横からスライドフェードイン javascript

吾輩は猫である。名前はまだ無い。 

fade_004

上にスライドフェードイン javascript

吾輩は猫である。名前はまだ無い。 

fade_005

大きいサイズから小さくなってフェードイン javascript

吾輩は猫である。名前はまだ無い。 

fade_006

小さいサイズから大きくなってフェードイン javascript

吾輩は猫である。名前はまだ無い。 

fade_007

要素をカーテンみたいに隠してから表示 javascript

吾輩は猫である。名前はまだ無い。 

fade_008

fade_007の画像のみ javascript

fade_009

fade_007のアレンジ:文字を画像に重ねない javascript

吾輩は猫である。名前はまだ無い。 

fade_010

fade_007のアレンジ:文字を画像に重ねないで小見出しと本文 javascript

吾輩は猫である。名前はまだ無い。 

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

fade_011

fade_010のアレンジ:画像をなしに javascript

吾輩は猫である。名前はまだ無い。 

 
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
 
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知っ

fade_012

fade_007のアレンジ:文字を小見出し(h4)に指定 javascript

吾輩は猫である。名前はまだ無い。 

fade_013

3行の文言が先に、写真が遅れて表示 javascript

吾輩は猫である。名前はまだ無い。

吾輩は猫である。名前はまだ無い。

吾輩は猫である。名前はまだ無い。

fade_014

3行の文言が先に、写真が遅れて表示され、その後写真はちょっとずつズームします javascript

吾輩は猫である。名前はまだ無い。

吾輩は猫である。名前はまだ無い。

吾輩は猫である。名前はまだ無い。

fade_001

CSSだけの単純フェード
 

fade_002

シンプルフェードイン javascript
 

fade_003

横からスライドフェードイン javascript
 

fade_004

上にスライドフェードイン javascript
 

fade_005

大きいサイズから小さくなってフェードイン javascript
 

fade_006

小さいサイズから大きくなってフェードイン javascript
 

fade_007

要素をカーテンみたいに隠してから表示 javascript
 

fade_008

fade_007の画像のみ javascript
 

fade_009

fade_007のアレンジ:文字を画像に重ねない javascript
 

fade_010

fade_007のアレンジ:文字を画像に重ねないで小見出しと本文 javascript
 

fade_011

fade_010のアレンジ:画像をなしに javascript
 

fade_012

fade_007のアレンジ:文字を小見出し(h4)に指定 javascript
 

fade_013

3行の文言が先に、写真が遅れて表示 javascript
 

fade_014

3行の文言が先に、写真が遅れて表示され、その後写真はちょっとずつズームします javascript