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

Bulut Bilişimin Dijital Dönüşümdeki Stratejik Rolü

Dijital dönüşüm, günümüz işletmeleri için rekabet avantajı sağlamak adına kritik…

JavaScript: Performans İpuçları

Döngüleri oluştururken listem adında bir diziniz olsun. Bu dizinin boyutunu…

PHP: Sayfalar Arası Veri Gönderme

Bir formdaki gönderme butonuna basıldığında gerçekleşecek eylemin belirlenmesi için form…

Backlinklerde Bağlantı Metninin Önemi

Bağlantı metni, backlink stratejisinin en kritik bileşenlerinden biridir. Arama motoru…

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