Открытка с Новым годом

4 марта 2019 | Qudrat Qodirov | Скрипты | 152

Слегка видоизмененная открытка к новому году найденная на codepen. Смотрится эффектно, при этом никакого сложного кода не написано. В основном это анимации на CSS3.

HTML

Разметка. Тут картинка для левой половинки открытки и текст поздравления для правой.

<div class="card">
  <div class="card-page cart-page-front">
    <div class="card-page cart-page-outside"></div>
    <div class="card-page cart-page-inside">
      <span class="merry-christmas">
        <img src="img/newyear.png" alt="">
      </span>
    </div>
  </div>
  <div class="card-page cart-page-bottom">
    <h3 class="card-page__title">Поздравляем с Новым годом!</h3>
    <div class="card-page__text">
      <p>Желаем преданных друзей, верных соратников, искренних эмоций, щенячьего восторга, тепла, любви и ласки!</p>
      <p>Здоровья, успехов, достатка, радости и взаимных симпатий. Будьте уверены, что все мечты исполнятся!</p>
    </div>
  </div>
</div>

</span>

</div>

<h3 class="card-page__title">Поздравляем с Новым годом!</h3>

<p>Желаем преданных друзей, верных соратников, искренних эмоций, щенячьего восторга, тепла, любви и ласки!</p>

<p>Здоровья, успехов, достатка, радости и взаимных симпатий. Будьте уверены, что все мечты исполнятся!</p>

</div>

CSS

В файле main.css стили открытки с анимацией. Учтена и адаптивность.

JS

Небольшой jQuery скрипт для смены классов по клику на открытку.

$(document).ready(function() {

  var $clickMe = $('.click-icon'),
      $card = $('.card');

  $card.on('click', function() {
    $(this).toggleClass('is-opened');
    $clickMe.toggleClass('is-hidden');
  });

});

$(document).ready(function() {

var $clickMe = $('.click-icon'),

$card = $('.card');

$card.on('click', function() {

$(this).toggleClass('is-opened');

$clickMe.toggleClass('is-hidden');

});

Исходники: newyear_card

Ссылки

https://codepen.io/lukasz-niedzwiecki/pen/ZBNmpy

Обсуждение закрыто.