スクロールでふわっと現れるエフェクト DEMO

スクロールでふわっと現れる

ここは固定。スクロールしていくと…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit orci neque. Sed ullamcorper porttitor condimentum. Fusce malesuada, nibh nec condimentum aliquet, lorem lectus faucibus tortor, sit amet lobortis justo urna quis ligula. Nunc ut porta erat. Aenean ullamcorper malesuada fermentum. Aliquam erat volutpat. Ut eget ultrices est. Proin augue quam, venenatis sed blandit a, vulputate a tellus. Sed eros enim, lobortis sit amet convallis luctus, suscipit vel sapien. Quisque placerat ultrices sodales. Nulla facilisi.
Donec eget augue leo. Proin volutpat interdum lectus tempus malesuada. Duis dapibus congue fringilla. Etiam scelerisque dignissim feugiat. Nullam varius lobortis leo eget semper. Pellentesque erat mi, scelerisque sed molestie in, vehicula pharetra arcu. Nulla facilisi. Donec non massa ut risus porta commodo. Nam sit amet elit nisl. Fusce convallis risus nec turpis scelerisque posuere. Duis rutrum, nisi a semper accumsan, sapien erat ultrices est, ut dignissim turpis nisl eu turpis. Vivamus vitae nisl mauris, a interdum urna.

このパラグラフが、定位置でふわっと現れる

Maecenas blandit suscipit mi ac consectetur. Quisque sed nunc non nisl tempor rhoncus et eu dui. Suspendisse sagittis consectetur enim vel bibendum. Pellentesque eu arcu vitae est sollicitudin feugiat. Donec leo lectus, congue et viverra at, pretium sit amet magna. Aliquam at enim at risus varius tincidunt eu sit amet elit. Quisque in massa et nibh vestibulum imperdiet. Curabitur vestibulum, velit non facilisis eleifend, nisi lorem sodales justo, quis imperdiet ligula orci eu tortor. Aliquam in eros eros, ac mollis mi. Sed urna massa, bibendum id accumsan bibendum, ultrices vel sem. Vivamus vel risus quis nisi convallis lacinia. Vestibulum tristique lacinia tellus at luctus. Proin nisl dui, ullamcorper non cursus id, posuere ac nibh. Nulla mollis venenatis dui, eu iaculis urna adipiscing sed. Suspendisse feugiat dignissim justo, a gravida augue condimentum quis. Curabitur arcu nunc, interdum id eleifend id, sodales at leo. Mauris porta vehicula ligula tincidunt aliquam. Nullam in felis orci, in aliquet dui. Duis tristique sem auctor augue ultrices eu pretium velit sagittis.

これは上からふわっと現れる

Mauris a tellus sit amet risus hendrerit gravida quis ac ligula. Proin eleifend pellentesque felis et tempor. In et mauris ac enim iaculis sodales. Donec at pulvinar odio. Vivamus elementum elementum risus, a gravida tortor interdum vel. Nulla facilisi. Aenean eros urna, ultrices vitae ornare eu, sodales sit amet nulla. Fusce lacinia enim quis purus posuere rhoncus. Morbi sagittis, tellus vel fermentum varius, neque sapien mollis sem, eu lobortis mi quam ut neque. Quisque at nunc libero. Curabitur vestibulum mauris non est consectetur mattis.

これも上からふわっと現れる

Mauris a tellus sit amet risus hendrerit gravida quis ac ligula. Proin eleifend pellentesque felis et tempor. In et mauris ac enim iaculis sodales. Donec at pulvinar odio. Vivamus elementum elementum risus, a gravida tortor interdum vel. Nulla facilisi. Aenean eros urna, ultrices vitae ornare eu, sodales sit amet nulla. Fusce lacinia enim quis purus posuere rhoncus. Morbi sagittis, tellus vel fermentum varius, neque sapien mollis sem, eu lobortis mi quam ut neque. Quisque at nunc libero. Curabitur vestibulum mauris non est consectetur mattis.

これはひとつづつ、ふわっと上から現れる

Mauris a tellus sit amet risus hendrerit gravida quis ac ligula.

Proin eleifend pellentesque felis et tempor. In et mauris ac enim iaculis sodales.

Mauris a tellus sit amet risus hendrerit gravida quis ac ligula.

これは左からふわっと現れる

Donec lacinia, turpis eget blandit ultrices, eros sapien pharetra est, non commodo turpis nisl sit amet elit. Aliquam dui diam, facilisis quis feugiat nec, vehicula nec magna. Maecenas nec leo risus. Donec quis sapien ligula, vitae ultricies nisi. Duis sit amet nisi vel risus lobortis adipiscing ultrices vitae elit. Suspendisse eget bibendum neque. Duis ornare odio vel lacus elementum vitae sagittis ligula malesuada. Sed eget sem dui, eget mattis felis. Donec non volutpat orci. Duis porttitor eros at est laoreet vestibulum. Duis blandit bibendum euismod. Etiam semper tempus est, facilisis dapibus urna sagittis sed. Aliquam nibh massa, vehicula eu porttitor eu, iaculis et dui. Morbi eu erat in urna laoreet hendrerit. Ut felis ante, gravida eget pulvinar ut, pulvinar sit amet tortor. Nullam pretium erat eget neque auctor rutrum. Sed sed lectus ut magna aliquam iaculis. Nam sagittis blandit eleifend. Suspendisse dictum nulla sit amet elit sodales accumsan. Nam in nibh at metus pulvinar imperdiet.

※このふわっと現れるエフェクトは、IEではIE10以降でしか効かない?(私の環境のIE11のエミュレーションではそうでした。)