Анимация изображения для сайта с помощью CSS3

Иногда возникает необходимость создать анимацию для изображения, при этом затратив минимум усилий. Дело в том, что для обычной анимации картинки необходимо приложить не мало усилий, учитывая что не все умеют реализовать данную задумку. Мы решили рассказать, как можно создать весьма хитрую анимацию для картинки, а именно мы заставим ее двигаться как куклу, разбив изображения на точки, которая будет двигаться по заданной траектории. В результате мы получим движения волнами. К тому же мы подобрали картинку в виде моря.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Такой прием рассчитан для познания возможностей стилей, и как можно максимально упростить анимацию для изображений, это можно реализовать для тех пикч на сайте которые необходимо выделить, и так, приступим.

Шаг 1. HTML

Разметка у нас будет состоять из сорока классов, именно на столько точек анимации мы разобьем данное изображение:


<div class='container'>
      <div class='cnt1 column'></div>
      <div class='cnt2 column'></div>
      <div class='cnt3 column'></div>
      <div class='cnt4 column'></div>
      <div class='cnt5 column'></div>
      <div class='cnt6 column'></div>
      <div class='cnt7 column'></div>
      <div class='cnt8 column'></div>
      <div class='cnt9 column'></div>
      <div class='cnt10 column'></div>
      <div class='cnt11 column'></div>
      <div class='cnt12 column'></div>
      <div class='cnt13 column'></div>
      <div class='cnt14 column'></div>
      <div class='cnt15 column'></div>
      <div class='cnt16 column'></div>
      <div class='cnt17 column'></div>
      <div class='cnt18 column'></div>
      <div class='cnt19 column'></div>
      <div class='cnt20 column'></div>
      <div class='cnt21 column'></div>
      <div class='cnt22 column'></div>
      <div class='cnt23 column'></div>
      <div class='cnt24 column'></div>
      <div class='cnt25 column'></div>
      <div class='cnt26 column'></div>
      <div class='cnt27 column'></div>
      <div class='cnt28 column'></div>
      <div class='cnt29 column'></div>
      <div class='cnt30 column'></div>
      <div class='cnt31 column'></div>
      <div class='cnt32 column'></div>
      <div class='cnt33 column'></div>
      <div class='cnt34 column'></div>
      <div class='cnt35 column'></div>
      <div class='cnt36 column'></div>
      <div class='cnt37 column'></div>
      <div class='cnt38 column'></div>
      <div class='cnt39 column'></div>
      <div class='cnt40 column'></div>
      <div class='imgframe'></div>
    </div>

</div>

Все это будет обвернуто в контейнер, как вы заметили нет ничего сложного, вы с легкостью можете убрать или добавить точки анимации, при этом указав диапазон в стилях.

Анимация изображения для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Как вы уже поняли, в стилях мы укажем анимацию для каждой точки, диапазон колебания для каждой точки в зависимости насколько нам необходимо отклонение от нулевого значения:

.column {
 position: absolute;
 top: 0px;
 width: 14px;
 height: 240px;
 background: url("1.png");
 animation: wobble 3s infinite;
 animation-timing-function: ease-in-out;
 animation-direction: alternate;
}

.column:nth-child(1) {
 left: 10px;
 background-position: -10px 0;
 animation-delay: 30ms;
}

.column:nth-child(2) {
 left: 20px;
 background-position: -20px 0;
 animation-delay: 60ms;
}

.column:nth-child(3) {
 left: 30px;
 background-position: -30px 0;
 animation-delay: 90ms;
}

.column:nth-child(4) {
 left: 40px;
 background-position: -40px 0;
 animation-delay: 120ms;
}

.column:nth-child(5) {
 left: 50px;
 background-position: -50px 0;
 animation-delay: 150ms;
}

.column:nth-child(6) {
 left: 60px;
 background-position: -60px 0;
 animation-delay: 180ms;
}

.column:nth-child(7) {
 left: 70px;
 background-position: -70px 0;
 animation-delay: 210ms;
}

.column:nth-child(8) {
 left: 80px;
 background-position: -80px 0;
 animation-delay: 240ms;
}

.column:nth-child(9) {
 left: 90px;
 background-position: -90px 0;
 animation-delay: 270ms;
}

.column:nth-child(10) {
 left: 100px;
 background-position: -100px 0;
 animation-delay: 300ms;
}

.column:nth-child(11) {
 left: 110px;
 background-position: -110px 0;
 animation-delay: 330ms;
}

.column:nth-child(12) {
 left: 120px;
 background-position: -120px 0;
 animation-delay: 360ms;
}

.column:nth-child(13) {
 left: 130px;
 background-position: -130px 0;
 animation-delay: 390ms;
}

.column:nth-child(14) {
 left: 140px;
 background-position: -140px 0;
 animation-delay: 420ms;
}

.column:nth-child(15) {
 left: 150px;
 background-position: -150px 0;
 animation-delay: 450ms;
}

.column:nth-child(16) {
 left: 160px;
 background-position: -160px 0;
 animation-delay: 480ms;
}

.column:nth-child(17) {
 left: 170px;
 background-position: -170px 0;
 animation-delay: 510ms;
}

.column:nth-child(18) {
 left: 180px;
 background-position: -180px 0;
 animation-delay: 540ms;
}

.column:nth-child(19) {
 left: 190px;
 background-position: -190px 0;
 animation-delay: 570ms;
}

.column:nth-child(20) {
 left: 200px;
 background-position: -200px 0;
 animation-delay: 600ms;
}

.column:nth-child(21) {
 left: 210px;
 background-position: -210px 0;
 animation-delay: 630ms;
}

.column:nth-child(22) {
 left: 220px;
 background-position: -220px 0;
 animation-delay: 660ms;
}

.column:nth-child(23) {
 left: 230px;
 background-position: -230px 0;
 animation-delay: 690ms;
}

.column:nth-child(24) {
 left: 240px;
 background-position: -240px 0;
 animation-delay: 720ms;
}

.column:nth-child(25) {
 left: 250px;
 background-position: -250px 0;
 animation-delay: 750ms;
}

.column:nth-child(26) {
 left: 260px;
 background-position: -260px 0;
 animation-delay: 780ms;
}

.column:nth-child(27) {
 left: 270px;
 background-position: -270px 0;
 animation-delay: 810ms;
}

.column:nth-child(28) {
 left: 280px;
 background-position: -280px 0;
 animation-delay: 840ms;
}

.column:nth-child(29) {
 left: 290px;
 background-position: -290px 0;
 animation-delay: 870ms;
}

.column:nth-child(30) {
 left: 300px;
 background-position: -300px 0;
 animation-delay: 900ms;
}

.column:nth-child(31) {
 left: 310px;
 background-position: -310px 0;
 animation-delay: 930ms;
}

.column:nth-child(32) {
 left: 320px;
 background-position: -320px 0;
 animation-delay: 960ms;
}

.column:nth-child(33) {
 left: 330px;
 background-position: -330px 0;
 animation-delay: 990ms;
}

.column:nth-child(34) {
 left: 340px;
 background-position: -340px 0;
 animation-delay: 1020ms;
}

.column:nth-child(35) {
 left: 350px;
 background-position: -350px 0;
 animation-delay: 1050ms;
}

.column:nth-child(36) {
 left: 360px;
 background-position: -360px 0;
 animation-delay: 1080ms;
}

.column:nth-child(37) {
 left: 370px;
 background-position: -370px 0;
 animation-delay: 1110ms;
}

.column:nth-child(38) {
 left: 380px;
 background-position: -380px 0;
 animation-delay: 1140ms;
}

.column:nth-child(39) {
 left: 390px;
 background-position: -390px 0;
 animation-delay: 1170ms;
}

.column:nth-child(40) {
 left: 400px;
 background-position: -400px 0;
 animation-delay: 1200ms;
}

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

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

.column {

position: absolute;

top: 0px;

width: 14px;

height: 240px;

background: url("1.png");

animation: wobble 3s infinite;

animation-timing-function: ease-in-out;

animation-direction: alternate;

}

.column:nth-child(1) {

left: 10px;

background-position: -10px 0;

animation-delay: 30ms;

}

.column:nth-child(2) {

left: 20px;

background-position: -20px 0;

animation-delay: 60ms;

}

.column:nth-child(3) {

left: 30px;

background-position: -30px 0;

animation-delay: 90ms;

}

.column:nth-child(4) {

left: 40px;

background-position: -40px 0;

animation-delay: 120ms;

}

.column:nth-child(5) {

left: 50px;

background-position: -50px 0;

animation-delay: 150ms;

}

.column:nth-child(6) {

left: 60px;

background-position: -60px 0;

animation-delay: 180ms;

}

.column:nth-child(7) {

left: 70px;

background-position: -70px 0;

animation-delay: 210ms;

}

.column:nth-child(8) {

left: 80px;

background-position: -80px 0;

animation-delay: 240ms;

}

.column:nth-child(9) {

left: 90px;

background-position: -90px 0;

animation-delay: 270ms;

}

.column:nth-child(10) {

left: 100px;

background-position: -100px 0;

animation-delay: 300ms;

}

.column:nth-child(11) {

left: 110px;

background-position: -110px 0;

animation-delay: 330ms;

}

.column:nth-child(12) {

left: 120px;

background-position: -120px 0;

animation-delay: 360ms;

}

.column:nth-child(13) {

left: 130px;

background-position: -130px 0;

animation-delay: 390ms;

}

.column:nth-child(14) {

left: 140px;

background-position: -140px 0;

animation-delay: 420ms;

}

.column:nth-child(15) {

left: 150px;

background-position: -150px 0;

animation-delay: 450ms;

}

.column:nth-child(16) {

left: 160px;

background-position: -160px 0;

animation-delay: 480ms;

}

.column:nth-child(17) {

left: 170px;

background-position: -170px 0;

animation-delay: 510ms;

}

.column:nth-child(18) {

left: 180px;

background-position: -180px 0;

animation-delay: 540ms;

}

.column:nth-child(19) {

left: 190px;

background-position: -190px 0;

animation-delay: 570ms;

}

.column:nth-child(20) {

left: 200px;

background-position: -200px 0;

animation-delay: 600ms;

}

.column:nth-child(21) {

left: 210px;

background-position: -210px 0;

animation-delay: 630ms;

}

.column:nth-child(22) {

left: 220px;

background-position: -220px 0;

animation-delay: 660ms;

}

.column:nth-child(23) {

left: 230px;

background-position: -230px 0;

animation-delay: 690ms;

}

.column:nth-child(24) {

left: 240px;

background-position: -240px 0;

animation-delay: 720ms;

}

.column:nth-child(25) {

left: 250px;

background-position: -250px 0;

animation-delay: 750ms;

}

.column:nth-child(26) {

left: 260px;

background-position: -260px 0;

animation-delay: 780ms;

}

.column:nth-child(27) {

left: 270px;

background-position: -270px 0;

animation-delay: 810ms;

}

.column:nth-child(28) {

left: 280px;

background-position: -280px 0;

animation-delay: 840ms;

}

.column:nth-child(29) {

left: 290px;

background-position: -290px 0;

animation-delay: 870ms;

}

.column:nth-child(30) {

left: 300px;

background-position: -300px 0;

animation-delay: 900ms;

}

.column:nth-child(31) {

left: 310px;

background-position: -310px 0;

animation-delay: 930ms;

}

.column:nth-child(32) {

left: 320px;

background-position: -320px 0;

animation-delay: 960ms;

}

.column:nth-child(33) {

left: 330px;

background-position: -330px 0;

animation-delay: 990ms;

}

.column:nth-child(34) {

left: 340px;

background-position: -340px 0;

animation-delay: 1020ms;

}

.column:nth-child(35) {

left: 350px;

background-position: -350px 0;

animation-delay: 1050ms;

}

.column:nth-child(36) {

left: 360px;

background-position: -360px 0;

animation-delay: 1080ms;

}

.column:nth-child(37) {

left: 370px;

background-position: -370px 0;

animation-delay: 1110ms;

}

.column:nth-child(38) {

left: 380px;

background-position: -380px 0;

animation-delay: 1140ms;

}

.column:nth-child(39) {

left: 390px;

background-position: -390px 0;

animation-delay: 1170ms;

}

.column:nth-child(40) {

left: 400px;

background-position: -400px 0;

animation-delay: 1200ms;

}

Кроме этого мы установили общие параметры контейнера, отметим, что урок достаточно простой, но он имеет место быть.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Анимация изображения для сайта с помощью CSS

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Анимация изображения для сайта с помощью CSS

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи