Дизайн материалов - Создание пульсации по щелчку - анимация в точке щелчка

#jquery #html #css #material-design

#jquery #HTML #css #материал-дизайн

Вопрос:

Во-первых, вот ссылка (нажмите на любую из плиток):http://www.google.com/design/#resources

Я просмотрел код

  <svg width="100%" height="100%" overflow="hidden">
  <defs></defs>
    <g>
      <ellipse cx="27.5" cy="189.46875" rx="20" ry="20" stroke="none" fill="white" class="ripple" fill-opacity="0.5" style="-webkit-transform: scale(1); opacity: 0;">
       </ellipse>
    </g>
 </svg>

При щелчке, в точке щелчка генерируется указанный выше эллипс.

Кто-нибудь может помочь, как создать это в точке щелчка?

Ответ №1:

Используйте event.pageX и event.pageY , чтобы найти координаты мыши в обработчике событий. Используйте эти значения для позиционирования круга.

jsfiddle.net/pu8jX

Ответ №2:

Это лучший пример, который я нашел, я надеюсь, что они служат!

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

Другая удивительная библиотека — Waves: эффект щелчка, вдохновленный дизайном материалов Google

http://publicis-indonesia.github.io/Waves/

Ответ №3:

Я создал плагин для этого, он доступен на github, чтобы вы могли его использоватьhttps://github.com/ninox92/Google-material-design-ripple-effect /

предварительный просмотр на:http://thomasreynders.com/google-material-design-plugin /