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

Sunucu Güvenliğinde DDoS Saldırılarına Karşı Korunma Teknikleri

DDoS (Distributed Denial of Service) saldırıları, modern dijital dünyada ciddi…

PHP: Operatörler

Operatörler, değerler üzerinde ikili işlemlerin gerçekleştirilmesinde kullanılırlar. PHP dilindeki operatörleri…

JavaScript: Değişken & Veri Türleri

Değişken adını vermeden önce tanımladığımız var ifadesi variable'dan gelmektedir ve…

HTML: HTML Nedir?

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

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