• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Эффекты наклона при наведении на CSS +JS (Анимация наклона изображения с наведением)
Эффекты наклона при наведении на CSS +JS
Kosten
Дата: Понедельник, 2020-12-21, 13:45 | Сообщение 1
Оффлайн
Администраторы
Сообщений:36965
Награды: 65


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

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



HEAD

HTML

Код
<div class="bcg">
  <div class="hero">

    <!-- Top part -->
    <div class="top">

      <!-- Slide 1 top content -->
      <div class="homeSlide slide01 active">

        <h1>Green<span>Sock</span> Tilt Effect</h1>

      </div>

      <!-- Slide 2 top content -->
      <div class="homeSlide slide02">

        <h1>Split Screen Slider</h1>

      </div>

      <!-- Slide 3 top content -->
      <div class="homeSlide slide03">

        <h1>Slide 3 Title</h1>

      </div>

    </div><!-- /Top part -->

    <!-- Bottom part -->
    <div class="bottom">

      <!-- Slide 1 bottom content -->
      <div class="homeSlide slide01 active">

        <p>
          Move your mouse to see the tilt effect in action.

          <em>Your current position is: <strong>0, 0</strong></em>
        </p>

      </div>

      <!-- Slide 2 bottom content -->
      <div class="homeSlide slide02">

        <p>
          Another slide description goes here.
        </p>

      </div>

      <!-- Slide 3 bottom content -->
      <div class="homeSlide slide03">

        <p>
          Another slide description goes here.
        </p>

      </div>

    </div><!-- /Bottom part -->

    <!-- Fancy divider with gradient backgound -->
    <div class="divider"></div>

  </div>

  <!-- Prev/Next Navigation -->
  <div id="slideNav">
    <ul>
      <li class="slideNavPrev">
        <a href="#" title="Go to previous slide">
          <span class="ico ico-up">↓</span>
        </a>
      </li>
      <li class="slideNavNext">
        <a href="#" title="Go to next slide">
          <span class="ico ico-down">↑</span>
        </a>
      </li>
    </ul>
  </div>

</div>

CSS


JS


Демонстрация
Прикрепления: 5868738.png(536.0 Kb) · greensock.zip(7.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Эффекты наклона при наведении на CSS +JS (Анимация наклона изображения с наведением)
  • Страница 1 из 1
  • 1
Поиск: