Pürüzsüz Sıvı Animasyonlu Arkaplan

CSS Kod Örnekleri, Eğitim, HTML Kod Örnekleri, Javascript Kod Örnekleri, Kod Örnekleri

Pürüzsüz Sıvı Animasyonlu Arkaplan kodu; sayfada zıplayan ve renk değiştiren daireler yaratmak için kullanılıyor. Bu daireler, sürekli olarak hareket eder ve kenarlara çarptıklarında geri zıplarlar. Tasarım, sayfanın tümünü kapsayacak şekilde yapılmış ve dairelerin her biri farklı renklerde. Bu efekt, sayfaya dinamik bir görünüm kazandırıyor.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</div>

<h2>Paint Inc.</h2>

<p>Farklı tarayıcılarda farklı sonuçlar elde edebilirsiniz. Bu sonuçlar tarayıcı yorumlamasına göre farklılık gösterebilir.</p>

<a href="https://paint.com.tr"

target="_blank" rel="noopener noreferer">

Siteye Git

</a>

</div>

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

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

:root {

font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

line-height: 1.5;

font-weight: 400;

color: black;

background-color: whitesmoke;

font-synthesis: none;

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

body {

margin: 0;

display: flex;

place-items: center;

min-width: 320px;

min-height: 100vh;

}

.bouncing-blob {

width: 32vw;

aspect-ratio: 1;

border-radius: 50%;

will-change: transform;

position: absolute;

z-index: 1;

top: 0;

left: 0;

transform-origin: left top;

}

.bouncing-blob--blue {

background: #4783c7;

}

.bouncing-blob--white {

background: #ffffff;

z-index: 2;

width: 15vw;

}

.bouncing-blob--purple {

background: #8c8ff1;

}

.bouncing-blob--pink {

background: #e289cd50;

}

.bouncing-blobs-container {

position: fixed;

z-index: -1;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.bouncing-blobs-glass {

position: absolute;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100%;

backdrop-filter: blur(140px);

-webkit-backdrop-filter: blur(140px);

pointer-events: none;

}

.bouncing-blobs {

position: absolute;

z-index: 1;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.hero {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

width: 100%;

}

.hero h2 {

font-size: 70px;

max-width: 800px;

line-height: 1;

text-align: center;

font-weight: bold;

text-transform: capitalize;

margin-bottom: 20px;

color: #021123;

}

.hero p {

font-size: 24px;

max-width: 500px;

text-align: center;

color: #021123;

}

@media (max-width: 1200px) {

.bouncing-blobs-glass {

backdrop-filter: blur(120px);

-webkit-backdrop-filter: blur(120px);

}

@media (max-width: 500px) {

.bouncing-blob {

width: 60vw;

}

.bouncing-blob--white {

width: 30vw;

}

.bouncing-blobs-glass {

backdrop-filter: blur(90px);

-webkit-backdrop-filter: blur(90px);

}

.hero h2 {

font-size: 32px;

}

.hero p {

font-size: 16px;

padding: 0 20px;

}

.tutorial-link a {

display: flex;

justify-content: center;

align-items: center;

color: black;

font-size: 20px;

text-decoration: none;

font-weight: 600;

gap: 0 5px;

border: 2px solid;

border-radius: 5px;

padding: 4px 10px;

}

@media(max-width: 500px) {

.tutorial-link a {

font-size: 14px;

padding: 2px 4px;

}

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

56

57

58

59

60

61

62

63

64

65

66

67

68

const MIN_SPEED = 1.5;

const MAX_SPEED = 2.5;

function randomNumber(min, max) {

return Math.random() * (max - min) + min;

}

class Blob {

constructor(el) {

this.el = el;

const boundingRect = this.el.getBoundingClientRect();

this.size = boundingRect.width;

this.initialX = randomNumber(0, window.innerWidth - this.size);

this.initialY = randomNumber(0, window.innerHeight - this.size);

this.el.style.top = `${this.initialY}px`;

this.el.style.left = `${this.initialX}px`;

this.vx = randomNumber(MIN_SPEED, MAX_SPEED) * (Math.random() > 0.5 ? 1 : -1);

this.vy = randomNumber(MIN_SPEED, MAX_SPEED) * (Math.random() > 0.5 ? 1 : -1);

this.x = this.initialX;

this.y = this.initialY;

}

update() {

this.x += this.vx;

this.y += this.vy;

if (this.x >= window.innerWidth - this.size) {

this.x = window.innerWidth - this.size;

this.vx *= -1;

}

if (this.y >= window.innerHeight - this.size) {

this.y = window.innerHeight - this.size;

this.vy *= -1;

}

if (this.x <= 0) {

this.x = 0;

this.vx *= -1;

}

if (this.y <= 0) {

this.y = 0;

this.vy *= -1;

}

move() {

this.el.style.transform = `translate(${this.x - this.initialX}px, ${this.y - this.initialY}px)`;

}

function initBlobs() {

const blobEls = document.querySelectorAll('.bouncing-blob');

const blobs = Array.from(blobEls).map((blobEl) => new Blob(blobEl));

function update() {

requestAnimationFrame(update);

blobs.forEach((blob) => {

blob.update();

blob.move();

});

}

requestAnimationFrame(update);

}

initBlobs();

Kod Blogu Versiyonunu Gör

Animasyon, Animasyonlu Arkaplan, CSS, Daire, Hareket, Hareketli Arkaplan, HTML, Javascript

6 Aralık 2024

Diğer Yazılarımız

Tüm Yazılarımız

CSS Grid Kullanımı Başlangıç Rehberi

Web geliştirme sürecinde, modern kullanıcı arayüzleri oluşturmak için güçlü bir…

C# While Döngüsü Kullanımı

C# programlama dilinde while döngüsü, bir koşul doğru olduğu sürece…

HTML: HTML Nedir?

Hyper Text Markup Language Türkçe karşılığı “Hiper metin/yazı İşaretleme Dili”…

Sosyal Medyada İçerik Stratejisi Oluşturma Rehberi

Sosyal medya, markalar için hedef kitleye ulaşmanın en etkili yollarından…

Soru işareti kalmasın

Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?

İletişime geç

Hizmetlerimiz

Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.

Hizmetlerimiz