BanbaYa備忘録 CSSだけでモーフィングを実装できる!文字列を違う文字列に滑らかに変化させるCSSのテクニック

参照元  コリス

CSSだけでモーフィングを実装できる!文字列を違う文字列に滑らかに変化させるCSSのテクニック

参照URL  https://coliss.com/articles/build-websites/operation/css/pure-css-morphing.html


文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。

モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。

仕組みは、CSSのblurで文字をぼかして変化の間をつなげています。
実際の動作は、下記でお楽しみください。
「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。

See the Pen
CSS morphing
by Amit Sheen (@amit_sheen)
on CodePen.

実装コードは、下記の通りです。
デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。

<div class=“morphing”>

  <div class=“word”>Pure&nbsp;CSS</div>

  <div class=“word”>morphing</div>

  <div class=“word”>Pure&nbsp;CSS</div>

  <div class=“word”>pure</div>

  <div class=“word”>CSS</div>

  <div class=“word”>is</div>

  <div class=“word”>great!</div>

</div>

7つのワード版のCSSです。
ワードの数やスピードを調整できますが、次のSCSSで変更する方が簡単です。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

@import url(‘https://ift.tt/3vXYAKn’);

*, *::before, *::after {

  padding: 0;

  margin: 0 auto;

  boxsizing: borderbox;

}

body {

  fontfamily: ‘Roboto Slab’, serif;

}

.morphing {

  position: relative;

  fontsize: 120px;

  backgroundcolor: #000;

  color: #fff;

  minheight: 100vh;

  filter: contrast(25) blur(1px);

}

.word {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(50%, 50%);

  animation: word 16s infinite easeinout;

}

.word:nthchild(1) {

  animationdelay: 16s;

}

.word:nthchild(2) {

  animationdelay: 14s;

}

.word:nthchild(3) {

  animationdelay: 12s;

}

.word:nthchild(4) {

  animationdelay: 10s;

}

.word:nthchild(5) {

  animationdelay: 8s;

}

.word:nthchild(6) {

  animationdelay: 6s;

}

.word:nthchild(7) {

  animationdelay: 4s;

}

@keyframes word {

  0%, 5%, 100% {

    filter: blur(0px);

    opacity: 1;

  }

  20%, 80% {

    filter: blur(1em);

    opacity: 0;

  }

}

上記のSCSSです。
スピードは$speed: 16s;を、ワード数は$wordCount: 7;の数値を変更します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

@import url(‘https://ift.tt/3vXYAKn’);

 

*, *::before, *::after {

  padding: 0;

  margin: 0 auto;

  boxsizing: borderbox;

}

 

body {

  fontfamily: ‘Roboto Slab’, serif;

}

 

$speed: 16s;

$wordCount: 7;

 

.morphing {

  position: relative;

  fontsize: 120px;

  backgroundcolor: #000;

  color: #fff;

  minheight: 100vh;

  filter: contrast(25) blur(1px);

}

 

.word {

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(50%, 50%);

  animation: word $speed infinite easeinout;

 

  @for $i from 0 to $wordCount {

    &:nthchild(#{$i + 1}) {

      animationdelay: ($speed / ($wordCount + 1) * $i) $speed;

    }

  }

 

  @keyframes word {

    0%, 5%, 100% { filter: blur(0px); opacity: 1; }        

    20%, 80% { filter: blur(1em); opacity: 0; }        

  }

}

webデザイン

https://ift.tt/3pq1WmE

June 7, 2021 at 09:36AM

Follow me!