قرار دادن حالت حرکتی زیبا برای متن

در این مطلب قصد دارم یک حالت زیبا برای اعمال کردن به متن در اختیارتون قرار بدم ، این حالت شبیه تیک زدن و یا مثل لامپی که خاموش روشن میشه و درست کار نمیکنه هست ، میشه گفت مثل متنی که نویز (noise) داره. نمونه را در ادامه مشاهده کنید.

بر روی عکس بالا کلیک کنید و دموی این کد را مشاهده کنید.

کد های زیر مربوط به این مطلب می باشد ، می توانید از آن استفاده کنید :

کد HTML :

<div class="glitch" data-text="Sadegh">Sadegh</div>

1	<div class="glitch" data-text="Sadegh">Sadegh</div>

کدهای CSS :

body {
  background: black;
  font-family: sans-serif;
}
 
.glitch {
  color: white;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}
 
@keyframes noise-anim {
  0% {
    clip: rect(54px, 9999px, 60px, 0);
  }
  5% {
    clip: rect(28px, 9999px, 45px, 0);
  }
  10% {
    clip: rect(67px, 9999px, 29px, 0);
  }
  15.0% {
    clip: rect(73px, 9999px, 60px, 0);
  }
  20% {
    clip: rect(10px, 9999px, 56px, 0);
  }
  25% {
    clip: rect(37px, 9999px, 8px, 0);
  }
  30.0% {
    clip: rect(3px, 9999px, 7px, 0);
  }
  35% {
    clip: rect(80px, 9999px, 18px, 0);
  }
  40% {
    clip: rect(13px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(82px, 9999px, 58px, 0);
  }
  50% {
    clip: rect(85px, 9999px, 92px, 0);
  }
  55.0% {
    clip: rect(64px, 9999px, 44px, 0);
  }
  60.0% {
    clip: rect(82px, 9999px, 63px, 0);
  }
  65% {
    clip: rect(23px, 9999px, 28px, 0);
  }
  70% {
    clip: rect(47px, 9999px, 74px, 0);
  }
  75% {
    clip: rect(99px, 9999px, 68px, 0);
  }
  80% {
    clip: rect(42px, 9999px, 68px, 0);
  }
  85.0% {
    clip: rect(3px, 9999px, 93px, 0);
  }
  90% {
    clip: rect(15px, 9999px, 5px, 0);
  }
  95% {
    clip: rect(78px, 9999px, 85px, 0);
  }
  100% {
    clip: rect(84px, 9999px, 28px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}
 
@keyframes noise-anim-2 {
  0% {
    clip: rect(84px, 9999px, 100px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 52px, 0);
  }
  10% {
    clip: rect(31px, 9999px, 97px, 0);
  }
  15.0% {
    clip: rect(68px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(79px, 9999px, 69px, 0);
  }
  25% {
    clip: rect(67px, 9999px, 51px, 0);
  }
  30.0% {
    clip: rect(60px, 9999px, 93px, 0);
  }
  35% {
    clip: rect(93px, 9999px, 54px, 0);
  }
  40% {
    clip: rect(63px, 9999px, 1px, 0);
  }
  45% {
    clip: rect(93px, 9999px, 92px, 0);
  }
  50% {
    clip: rect(40px, 9999px, 77px, 0);
  }
  55.0% {
    clip: rect(32px, 9999px, 61px, 0);
  }
  60.0% {
    clip: rect(6px, 9999px, 100px, 0);
  }
  65% {
    clip: rect(81px, 9999px, 26px, 0);
  }
  70% {
    clip: rect(44px, 9999px, 67px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 58px, 0);
  }
  80% {
    clip: rect(64px, 9999px, 43px, 0);
  }
  85.0% {
    clip: rect(16px, 9999px, 94px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 25px, 0);
  }
  95% {
    clip: rect(41px, 9999px, 93px, 0);
  }
  100% {
    clip: rect(8px, 9999px, 95px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

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

156

157

158

159

160

161

162

163

164

165

166

167

168

body {

background: black;

font-family: sans-serif;

}

.glitch {

color: white;

font-size: 100px;

position: relative;

width: 400px;

margin: 0 auto;

}

@keyframes noise-anim {

0% {

clip: rect(54px, 9999px, 60px, 0);

}

5% {

clip: rect(28px, 9999px, 45px, 0);

}

10% {

clip: rect(67px, 9999px, 29px, 0);

}

15.0% {

clip: rect(73px, 9999px, 60px, 0);

}

20% {

clip: rect(10px, 9999px, 56px, 0);

}

25% {

clip: rect(37px, 9999px, 8px, 0);

}

30.0% {

clip: rect(3px, 9999px, 7px, 0);

}

35% {

clip: rect(80px, 9999px, 18px, 0);

}

40% {

clip: rect(13px, 9999px, 98px, 0);

}

45% {

clip: rect(82px, 9999px, 58px, 0);

}

50% {

clip: rect(85px, 9999px, 92px, 0);

}

55.0% {

clip: rect(64px, 9999px, 44px, 0);

}

60.0% {

clip: rect(82px, 9999px, 63px, 0);

}

65% {

clip: rect(23px, 9999px, 28px, 0);

}

70% {

clip: rect(47px, 9999px, 74px, 0);

}

75% {

clip: rect(99px, 9999px, 68px, 0);

}

80% {

clip: rect(42px, 9999px, 68px, 0);

}

85.0% {

clip: rect(3px, 9999px, 93px, 0);

}

90% {

clip: rect(15px, 9999px, 5px, 0);

}

95% {

clip: rect(78px, 9999px, 85px, 0);

}

100% {

clip: rect(84px, 9999px, 28px, 0);

}

.glitch:after {

content: attr(data-text);

position: absolute;

left: 2px;

text-shadow: -1px 0 red;

top: 0;

color: white;

background: black;

overflow: hidden;

clip: rect(0, 900px, 0, 0);

animation: noise-anim 2s infinite linear alternate-reverse;

}

@keyframes noise-anim-2 {

0% {

clip: rect(84px, 9999px, 100px, 0);

}

5% {

clip: rect(92px, 9999px, 52px, 0);

}

10% {

clip: rect(31px, 9999px, 97px, 0);

}

15.0% {

clip: rect(68px, 9999px, 9px, 0);

}

20% {

clip: rect(79px, 9999px, 69px, 0);

}

25% {

clip: rect(67px, 9999px, 51px, 0);

}

30.0% {

clip: rect(60px, 9999px, 93px, 0);

}

35% {

clip: rect(93px, 9999px, 54px, 0);

}

40% {

clip: rect(63px, 9999px, 1px, 0);

}

45% {

clip: rect(93px, 9999px, 92px, 0);

}

50% {

clip: rect(40px, 9999px, 77px, 0);

}

55.0% {

clip: rect(32px, 9999px, 61px, 0);

}

60.0% {

clip: rect(6px, 9999px, 100px, 0);

}

65% {

clip: rect(81px, 9999px, 26px, 0);

}

70% {

clip: rect(44px, 9999px, 67px, 0);

}

75% {

clip: rect(30px, 9999px, 58px, 0);

}

80% {

clip: rect(64px, 9999px, 43px, 0);

}

85.0% {

clip: rect(16px, 9999px, 94px, 0);

}

90% {

clip: rect(58px, 9999px, 25px, 0);

}

95% {

clip: rect(41px, 9999px, 93px, 0);

}

100% {

clip: rect(8px, 9999px, 95px, 0);

}

.glitch:before {

content: attr(data-text);

position: absolute;

left: -2px;

text-shadow: 1px 0 blue;

top: 0;

color: white;

background: black;

overflow: hidden;

clip: rect(0, 900px, 0, 0);

animation: noise-anim-2 3s infinite linear alternate-reverse;

}

توجه : در قسمت head صفحه باید فایل prefixfree.min.js که در آخر همین مطلب برای دانلود آماده کردم رو قرار بدید. این فایل کارش این هست که Vendor Prefix های مناسب هر مرورگر رو اتوماتیک قرار میده.

برای مطالعه و مثالهای بیشتر میتونین به این لینک مراجعه کنید. امیدوارم لذت برده باشید.

Facebook

Twitter

دانلود ( 2.58 کیلوبایت )

نوشته شده در مارس 1, 2016 / 3,147 نمایش / کد مطلب : 13346

یک دیدگاه در “قرار دادن حالت حرکتی زیبا برای متن”

مجید مارس 9, 2016 در 01:54

حیف که css هاش زیاده اما خیلی قشنگه!
بیگ لایک!

دستتون درد نکنه

پاسخ

عضویت در خبرنامه

آخرین بازدید شده ها

تبلیغات متنی

درخواست شما

قرار دادن حالت حرکتی زیبا برای متن

کد HTML :

کدهای CSS :

یک دیدگاه در “قرار دادن حالت حرکتی زیبا برای متن”

دیدگاه خود را به اشتراک بگذارید

دیدگاهتان را بنویسید لغو پاسخ

مطالب مرتبط