Exore LTD » CSS3 » Креативные блоки с анимацией на CSS
Лого SiteHere.ru

Октябрь 29, 2019 Запись была обновлена

Время чтения: < 1 мин. Прочитать позже

Креативные блоки с анимацией на CSS

Креативные блоки с анимацией на CSS

Каждый владелец сайта хочет сделать свой сайт неповторимым. Хочет добавить свою изюминку в каждый его элемент, чтобы он отличался от других и имел свою уникальность. На сайте находится огромное множество различных элементов, которые Вы можете применить на своём сайте. Но сегодня я решил создать еще один элемент — это блоки с анимацией на CSS. А также записал видео с подробным разбором исходного кода данного элемента.

По анимации рекомендую изучить следующие уроки

Смотрите реальный пример блоков:

Посмотреть примерСкачать

Вот как выглядит состояние блоков при наведении и без:

Состояние блоков

Видео с разбором исходного кода

Я записал видео по данному элементу, где подробно рассказал что и где изменить чтобы отредактировать стиль блоков для своего сайта. Смотрите видео:

Все вопросы по данному элементу Вы можете задать ниже в комментариях!

Успехов!

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

18 комментариев к записи
  • Levisitors

    Уважаемый Юрий!
    В данной статье ссылка СКАЧАТЬ ведёт на страницу 404.

    Извините, но запрашиваемая Вами страница не найдена…
    Перейти на главную
    Подскажите, пожалуйста, как скачать исходник кода?

     
    Ответить
    • Юрий

      Добрый день!
      Спасибо что написали об ошибке. Исправил.

       
      Ответить
  • Максим

    Спасибо за статью, взял для своего багажа знаний CSS.

     
    Ответить
  • Алексей

    Добрый вечер, Юрий. Подскажите пожалуйста, как сделать их в стоку. Поставил себе на сайт, но в столб занимают много места. Заранее спасибо 😉

     
    Ответить
  • Алексей

    Спасибо огромное, я даже не успел расстроиться 😎

     
    Ответить
  • Юрий

    С Новым годом и добрый вечер! Красивые реально блоки, проблем с установкой не возникло. Но есть одно но.., на сенсорных устройствах не работают( Буду благодарен, если подскажите, как реализовать на практике поддержку сенсора, спасибо.

     
    Ответить
    • Юрий Немец

      Здравствуйте, Юрий!

      Спасибо, Вас также с Новым годом 🙂

      Чтобы сделать еще и на мобильных устройствах, Вам необходимо "повесить" обработчики событий при клике с помощью библиотеки jQuery Mobile.

       
      Ответить
  • Юрий

    Спасибо Юрий за наводку, представляю себе это примерно так, подключить к сайту библиотеку и вешаем обработчик на класс,

    $('.class').on('click', function(){
// что-то делаем
});

    но вот, что внутри..? темный лес для меня, знаний в jQ и JS нулевые. Вы не поможете с кодом?

     
    Ответить
    • Юрий Немец

      Всё верно с подключением. Что писать внутри — смотрите документацию, ссылку я прислал Вам ранее.

       
      Ответить
  • Юрий

    Не могу разобраться, так как, не знаю из чего должен состоять код в скобках, нашел событие которое мне нужно это tap. а вот как применить его не смог понять, поиск тоже не пролил свет в кромешной тьме моих знаний jQ) На смартфоне все таки блоки работают только при долгом тапе, а хотелось бы, что б при коротком. Спасибо и на этом)

     
    Ответить
  • Сергей

    Здравствуйте Юрий! В первую очередь, благодарю за Вашу работу, очень много полезного и нужного на сайте, спасибо большое!!

    Но если можно, подскажите пожалуйста, по какой причине в блоке не выодятся картинки (вообще ни как).

    Текст, заголовок при навидении есть, еффекты рамки CSS есть, а clapboard.png и 2-е остальные картинки нет!

    Уже перерыл все возможные пути ..ни как.

    <link rel="stylesheet" href="catalog/view/theme/fastor/css/img-style.css">
                     <div class="container">
			<div class="oneACommon">
				<div class="oneA">
					<div class="imgDef1"></div>
					<a href="#" class="sitehereA" title="Нажми на меня!"></a>
					<h3>Заголовок 1</h3>
					<div class="lineTop"></div>
					<div class="lineRight"></div>
					<div class="lineBottom"></div>
					<div class="lineLeft"></div>
				</div>
				<div class="oneA">
					<div class="imgDef2"></div>
					<a href="#" class="sitehereA" title="Нажми на меня!"></a>
					<h3>Заголовок 2</h3>
					<div class="lineTop"></div>
					<div class="lineRight"></div>
					<div class="lineBottom"></div>
					<div class="lineLeft"></div>
				</div>
				<div class="oneA">
					<div class="imgDef3"></div>
					<a href="#" class="sitehereA" title="Нажми на меня!"></a>
					<h3>Заголовок 3</h3>
					<div class="lineTop"></div>
					<div class="lineRight"></div>
					<div class="lineBottom"></div>
					<div class="lineLeft"></div>
				</div>
			</div>
		</div>
     
    Ответить
    • Юрий Немец

      Добрый день, Сергей!

      Внимательно смотрите на CSS. У Вас в стилях нет изображений в блоках.

       
      Ответить
      • Сергей

        Огромное спасибо за быстрый отклик (честно не ожидал) Благодарю!!

        Но файл CSS из фашего архива, ничего не менял, подскажите плиз что пропущено и куда это дописать.

        Я так понял нужно еще путь src: ..image.png дописать, но как это правильней в данном случае сделать..?

        За ранее спасибо большое, Удачи и развития Вашемму проекту!!

         
        Ответить
        • Юрий Немец

          Спасибо, Сергей!

          Скачайте архив с демо-примером и разархивируйте, чтобы смотреть на него и делать по аналогии.

          Сначала вам необходимо расположить все файлы как в примере. То есть изображения "положить" в соответствующую папку в своем проекте. Затем лишь прописать путь до изображений относительно (обратите на это внимание!) того, где расположен файл стилей.

          Проще всего сначала разобраться в демо-примере, который сделал я, а затем переносить по аналогии на свой проект:

          1. HTML структуру и изображения разместить в своей папке.

          2. CSS стили.

           
          Ответить
  • Татьяна

    Здравствуйте, Юра!

    Спасибо большое за понятный урок и отличный пример для анимации блоков.

    У меня получилось! 

    http://front-ninja.ru/code/creative-blocks/index.html

     
    Ответить
    • Юрий Немец

      Добрый день, Татьяна!

      Отлично, приятно видеть, что мои наработки приносят пользу 🙂 .

       
      Ответить
  • Виталий

    Здравствуйте Юрий, не могли бы вы чуть более развёрнуто пояснить об установке на WP, не получается. В стиль цсс, добавил, пути к картинкам прописал….

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *