<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

После создания блога он размещается в Интернете, опять же на Ваших глазах. Таким образом, приобретя данный курс, Вы, не обладая никакими знаниями по созданию сайтов, уже сможете их делать, а также выкладывать в Интернет.

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать прелоадер на чистом CSS3.

Как сделать прелоадер на чистом CSS3.

Всем привет! Сегодня мы рассмотрим, как сделать прелоадер на чистом CSS3.

Раньше, чтобы выполнить такую задачу, нам пришлось бы использовать javascript, однако теперь мы можем делать все на чистом CSS3. И, как это сделать, мы и рассмотрим в этой статье.

Для начала создадим разметку

<div class="pre-loader">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

Как видите, разметка достаточно простая. Все заключено в стилях

Пропишем базовые стили для всех блоков

.pre-loader {
  margin: 200px auto;
  width: 66px;
  height: 50px;
}

.pre-loader > div {
  background-color: #34495e;
  height: 100%;
  width: 10px;
  display: inline-block;
}

Создадим анимацию

@keyframes myMove {
  0% {top: 0px;}
  25% {top: 200px;}
  50% {top: 100px;}
  75% {top: 200px;}
  100% {top: 0px;}
}

И еще несколько анимаций

@-webkit-keyframes heightChange {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes heightChange {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1.0); }
}

Запишем анимацию блокам

.pre-loader > div {
  background-color: #fff;
  height: 100%;
  width: 10px;
  display: inline-block;
  -webkit-animation: heightChange 1s infinite ease-in-out;
  animation: heightChange 1s infinite ease-in-out;
}

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

.pre-loader .box2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.pre-loader .box3 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.pre-loader .box4 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.pre-loader .box5 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

Вот и все! Вот так просто можно сделать прелоадер на чистом CSS3.

Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (16):

ababiy ababiy 13.05.2015 03:25:10

А демо есть? Без демо - голый код который думаешь, использовать, не использовать...

Ответить

GALAPERIDOL GALAPERIDOL 13.05.2015 09:46:21

Результат можно посмотреть на он-лайн генераторах типа данного: http://codepen.io/anon/pen/WvwxpK

Ответить

Sasha-saturn Sasha-saturn 13.05.2015 13:58:57

Все конечно красиво!Понимать бы, что каждое из свойств выполняет!?К примеру: @keyframes myMove

Ответить

php_programmer php_programmer 14.05.2015 17:24:13

Здесь используются абсолютно все изученные ранее свойства. Нет ничего нового. Если Вам не понятно какое-то свойство, вы можете ввести его в поиск(слева сверху на сайте), выбрать нужную статью и прочитать. Конкретно про анимации вот Вам статья - http://myrusakov.ru/animation.html Удачи! :)

Ответить

Gorbunko Gorbunko 13.05.2015 17:18:45

А как сделать так чтобы он во время загрузки отображался? Подскажите пожалуйста.

Ответить

php_programmer php_programmer 14.05.2015 17:22:23

Не совсем понял, что именно вы имеете ввиду.

Ответить

Gorbunko Gorbunko 15.05.2015 11:20:38

Ну прелоадер должен отображаться во время загрузки страницы, как это сделать?

Ответить

php_programmer php_programmer 15.05.2015 14:52:59

Ну, это нужно делать с помощью скриптов. В комментариях я Вам не смогу все описать.

Ответить

Gorbunko Gorbunko 15.05.2015 15:43:04

Если не трудно, сможете написать нужный скрипт для этого прелоадера на сайте https://jsfiddle.net ? Заранее спасибо :)

Ответить

php_programmer php_programmer 15.05.2015 20:34:39

Все, что Вам нужно сделать, это написать простой скрипт с if() {} else {} условием, где запускать прелоадер тогда, когда Вам это нужно. Самый простой способ конкретно с этим прелоадером это добавить к классу pre-loader свойство display со значением none и менять его на display со значением block, когда у Вас что-то происходит на сайте

Ответить

Gorbunko Gorbunko 16.05.2015 15:33:49

В js не разбираюсь вообще, практики не было, да и в теории не очень. Поэтому и не знаю что да как, вот и попросил Вас. А на счёт display none и block, это ничего не даст, потому что в css нету псевдоэлемента :onload.

Ответить

php_programmer php_programmer 16.05.2015 16:54:59

Причем здесь псевдоэлемент? Когда у Вас начинается какая-то работа(к примеру, вы удаляете 1 миллион записей), которая занимает продолжительное время, Вы просто скриптом меняете свойство display на block. Когда работа заканчивается, Вы опять же скриптом меняете свойство display на none. Вот и все. Чтобы убедиться, что это работает, Вы можете перейти по ссылке http://codepen.io/anon/pen/WvwxpK и там в классе .pre-loader добавить свойство display: none;, убедиться, что прелоадер исчез, вернуть свойство display в значение block и убедиться, что анимация снова работает. Теперь же все, что Вам осталось, это сделать абсолютно то же самое, но не вручную, а с помощью javascript. Попозже скину код.

Ответить

Gorbunko Gorbunko 16.05.2015 18:13:04

Мне надо чтобы прелоадер показывался во время загрузки. Как на сайте http://uquotes.net, а не во время удаления 1 миллиона записей. Я не знал как вставить этот прелоадер таким образом.

Ответить

php_programmer php_programmer 16.05.2015 19:20:53

Уже передумали спрашивать на форуме?) В любом случае я скидываю Вам код: http://codepen.io/anon/pen/gpMPBq Может быть, пригодится.

Ответить

php_programmer php_programmer 16.05.2015 19:21:19

Вот то, что вы имеете ввиду: http://codepen.io/anon/pen/pJbgYy

Ответить

Gorbunko Gorbunko 16.05.2015 21:37:46

Уже спросил,а за код спасибо. Но как сделать чтобы у него (прелоадера) был не прозрачный фон, а белый как на сайте http://uquotes.net ? Просто проблема в том что на главной странице (да и вообще на всех страницах) сайта есть картинки (прямо сразу как заходишь на страницу) и они мешают, но убрать их это не вариант. Если нужно поменять какое-то свойство в js коде, то просто скажите какое (сам я в js не разбираюсь вообще). За вашу помощь большое спасибо.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.