About Teletype
Join
@onthewaytothesun
March 15, 2021

Делаем красивый таплинк

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

Инициируем нужные библиотеки

В настройках в графу "вставка кода" вставляем. Этот код нужен не для всех примеров из статьи, только для тех, где вы в коде видите значок доллара "quot;.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Гамбургер

Код гамбургера можете просто копировать и вставить себе с комментариями (они не мешают работе кода). Код я взял отсюда https://taplink.cc/max_taplink, добавив туда свой скрипт для закрытия меню при нажатии на любой пункт (изначальный вариант кода не работает адекватно с ссылками на текущую страницу. Впрочем, что-то мне подсказывает, что и он сам не автор этого меню).

В таплинке жмите "добавить блок", выбирайте "html-код", и вставляйте всю эту бурду, имеющую серый фон (это сам код, собственно):

Чтобы поменять пункты менюшки, просто перебейте названия. Для добавления новых пунктов можете просто дублировать строку, начинающуюся на <li> и заканчивающуюся на </li> и перебить ссылку с текстом.

Прочитайте код, там будут комментарии, что вы можете и должны в нем менять. 

<nav class="mobile-menu">
    <input type="checkbox" id="menucheckbox" class="mobile-menu__checkbox">
    <label for="menucheckbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
    <div class="mobile-menu__container">
    <ul class="mobile-menu__list">
        <li class="mobile-menu__item"><a href="/" class="mobile-menu__link"><img width="30" src="https://img.icons8.com/material-sharp/24/ffffff/home.png" alt="Home" class="loaded"></a></li>
    	<li class="mobile-menu__item"><a href="https://worldofgetcourse.ru/price" class="mobile-menu__link">Прайс на услуги</a></li>
        <li class="mobile-menu__item"><a href="https://worldofgetcourse.ru/portfolio" class="mobile-menu__link">Портфолио</a></li>
      <li class="mobile-menu__item"><a href="#contacts" class="mobile-menu__link">Контакты</a></li>
      <li class="mobile-menu__item"><a href="https://t.me/worldofgetcourse" class="mobile-menu__link">Мой тг канал для жалоб и предложений</a></li>
 		      </ul>
    </div>
</nav>
<style>

  .mobile-menu {
        box-sizing: border-box;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  /* В СТРОКЕ НИЖЕ МОЖНО ВСТАВИТЬ СВОЙ ЦВЕТ ФОНА КРУЖОЧКА МЕНЮ. ЗАГУГЛИТЕ "GRADIENT CSS GENERATOR",
  ЧЧТОБЫ ПОЛУЧИТЬ ТАКОЙ ЖЕ КОД ГРАДИЕНТА, НО УЖЕ СВОЕГО */
  background: linear-gradient(to right, #1E2FC2 0%, #4D59C2 100%);
  border-radius: 20px;
box-shadow: 0px 8px 10px 0px rgba(0, 93, 186, 0.1);
  width: 50px;
  top: 10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: 10px;
  height: 50px;
  z-index: 9999;
}
.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
  transition: .4s;
}
.mobile-menu__icon {
  display: block;
  position: relative;
  /* ЦВЕТ ПАЛОЧКИ В БУРГЕРЕ РАСПОЛОЖЕН НИЖЕ. СМЕНИТЕ WHITE НА СВОЙ ЦВЕТ. 
  ПАЛИТРУ ЦВЕТОВ МОЖНО ЗАГУГЛИТЬ ПО ЗАПРОСУ "HTML-ЦВЕТА" */
  background: white;
  width: 90%;
  height: 3px;
  transition: .4s;
  border-radius: 5px;
}
.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  /* ЦВЕТ ВЕРХНЕЙ И НИЖНЕЙ ПАЛОЧКИ БУРГЕРА */
  background: white;
  width: 100%;
  height: 3px;
  transition: .4s;
  border-radius: 5px;
}
.mobile-menu__icon::after {
  top: 8px;
}
.mobile-menu__icon::before {
  top: -8px;
}
.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 900;
  height: 0;
  opacity: 1;
  transition: .5s;
  overflow: hidden;
  /* ЦВЕТ ФОНА ПОЛОТНА МЕНЮ */
   background: linear-gradient(to right, #1E2FC2 0%, #4D59C2 100%);
}
.mobile-menu__list {
  transition: .5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px;
}
.mobile-menu__item {
  font-size: 20px;
  padding-bottom: 15px;
}
.mobile-menu__link {
  text-decoration: none;
  color: white;
}
.mobile-menu__checkbox {
  display: none;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
</style>
<script>
  const menulinks = document.querySelectorAll('.mobile-menu__link');
for(var i = 0, menucount = menulinks.length; i < menucount; i++) {
 menulinks[i].onclick = function() {
   document.getElementById("menucheckbox").checked = false;
 } 
}
</script>

Делаем всплывающее окошко

Просто жмем "добавить блок" и "вставить html". Вместо "подробнее" пишем свой текст, по нажатию которого будет открываться всплывающее окно. Вместо "Онлайн-школы" пишем свой заголовок всплывающего окна. Вместо "https://taplink.cc/onthewaytothesun#" пишем свой адрес таплинка с решеткой в конце. Вместо "техническая реализация" пишите свое описание. Во всплывающее окно можно вставить не только текст, но и видео, формы с геткурса и т.д. Если это интересно, напишите мне в тг t.me/onthewaytothesun

<a href="#popup1"> Подробнее </a> <div id="popup1" class="overlay"> <div class="popup"> <h2>Онлайн-школы</h2> <a class="close" href="https://taplink.cc/onthewaytothesun#">×</a> <div class="content"> Техническая реализация автоматизированной воронки продаж для функционирования онлайн-школ от А до Я. </div> </div> </div> <style> .overlay { position: fixed; top: 30%; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { z-index: 99; visibility: visible; opacity: 1; }

.popup { margin: 5px auto; padding: 5px; background: #000; border-radius: 5px; width: 90%; position: relative; transition: all 1s ease-in-out; }

.popup h2 { margin-top: 0; padding: 30px; color: #fff; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #0383de; } .popup .content { max-height: 80%; overflow: auto; } a[href$="#popup1"] {text-decoration: underline !important; color: #0383de !important;} </style>

Для последующих всплывающих окон вставляйте другой код, заменяя текст как в первом случае. Для третьего, четвертого и других окон меняйте циферку "2" отсюда на порядковый номер окошка

<a href="#popup2"> Подробнее </a> <div id="popup2" class="overlay"> <div class="popup"> <h2>Настройка таргетированной рекламы</h2> <a class="close" href="https://taplink.cc/onthewaytothesun#yak2">×</a> <div class="content"> Настройка таргетированной рекламы в соцсетях Facebook, Instagram, Вконтакте, MyTarget </div> </div> </div> <style> a[href$="#popup2"] {text-decoration: underline !important; color: #0383de !important;} </style>

Делаем крутой кастомный блок "связаться" вместо стандартной кнопки

Жмем "добавить HTML-блок", добавляем контент кнопки

<div class="svyazatsya">
  <div class="share-button">
  <div class="lid">Связаться</div>
  <div class="share-items-wrapper">
      <div class="share-items">
        <a href="https://wa.me/79514983724" class="share-item">      
         <img src="https://img.icons8.com/ios/50/000000/whatsapp.png"/> 
        </a>
        <a href="https://vk.me/onthewaytothesun" class="share-item">
         <img src="https://img.icons8.com/fluency-systems-regular/48/000000/vkontakte.png"/>
        </a>
        <a href="https://t.me/onthewaytothesun" class="share-item">
          <img src="https://img.icons8.com/material-outlined/48/000000/telegram-app.png"/>
        </a>
        <a href="https://instagram.com/onthewaytothesun" class="share-item">
         <img src="https://img.icons8.com/material-outlined/24/000000/instagram-new.png"/>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-tumblr"></span>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-behance"></span>
        </a>
      </div>
    </div>
  <div class="thank-you">
    Перехожу
  </div>
</div>
</div>

По умолчанию видно 4 иконки в ряд. Вы можете использовать свои ссылки и иконки с сайта https://icons8.ru/ (тут они бесплатные). Предыдущий вариант этого кода я убрал, т.к. он устарел согласно веб-стандартам.

Теперь вставим стили. Жмем "добавить HTML-блок" и вставляем

<style>

*,*:before,*:after{
  box-sizing: border-box;
}
.svyazatsya {
   border-radius: 20px;
  height: 100px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  }

.share-button {
  border: 1px solid #0092DB;
  position: absolute;
  height: 36px;
  top: 50%;
  margin-top: -17px;
  width: 135px;
  left: 50%;
  margin-left: -65px;
  background: #0092DB;
  border-radius: 20px;
  overflow: hidden;
  line-height: 36px;
  user-select: none;
}
/*----- FIX overflow + transform + border-radius ---*/
.share-button:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';

box-sizing: content-box;
transform: translate(0,0);
border-radius: 50px;
z-index: 3;
pointer-events: none;
}
.lid{
   font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background: #fff;
  border-radius: 20px;
  color: #0092DB;
  transition: 300ms ease all;
  transform-origin: 0 0;
  cursor: default;
z-index: 4;
}
.open .lid{
  transform: rotateX(90deg);
}
.thank-you {
  position:absolute;
top: -100px;
left: 0;
width: 100%;
color: #fff;
  transition: 300ms ease all;
}
.thankyou .thank-you{
  position:absolute;
  top:0px;
}
.share-item{
 
  display: block;
  color: #000;
  background: #fff;
  text-decoration: none;
  height: 30px;
  width: 30px !important;
  text-align: center;
  line-height: 30px;  
  border-radius: 50%;
  float: left;
  margin-left: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: 500ms ease all;
  padding: 0px;
  min-height: auto;
}
 .share-item img {
  width: 100%;
  height: 100%;
  padding: 2px;
  margin: 0px;
  }
  .share-item:hover{
  background: #eb4c89;
  transition: 50ms ease all;
}
.share-item:active{
  background: #eb4c89;
  transition: 50ms ease all;
}
.share-item:nth-child(1){
transform: translateX(200px) rotate(180deg);
}
.share-item:nth-child(2){
transform: translateX(400px) rotate(200deg);
}
.share-item:nth-child(3){
transform: translateX(580px) rotate(220deg);
}
.share-item:nth-child(4){
transform: translateX(740px) rotate(240deg);
}
.open .share-item{
transform: translateX(0) rotate(0);  
margin-left:3px;
}
.share-items {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 3px 0;
width: 201px;
}
.share-items-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;  
  width : 267px;
  left: 50%;
  margin-left:-133.5px;
}
.shared .share-item{
  transform :translateY(200px);
}
.shared .share-item:nth-child(1){
  transition: 200ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(2){
  transition: 600ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(3){
  transition: 1000ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(4){
  transition: 1400ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(5){
  transition: 1800ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(6){
  transition: 2200ms cubic-bezier(.32,-0.22,.9,.93) all;
}
  .fa {
  color: black;
  }
</style>

Осталось вставить скрипт. Добавляем HTML, вставляем

<script>
$('.share-button').on('click',function(){  
  $(this).addClass('open');
})
$( ".share-items" ).draggable({ 
  axis: "x",
  containment : ".share-items-wrapper"
});
$( ".share-item" ).on('click',function(){
   $('.share-button').addClass('shared');
   setTimeout(function(){
    $('.share-button').addClass('thankyou');
  }, 800);
  setTimeout(function(){
    $('.share-button').removeClass('open');
    $('.share-button').removeClass('shared');
    $('.share-button').removeClass('thankyou');
  }, 250);
});
</script>

Готово!

Как всё это выглядит на практике https://taplink.cc/onthewaytothesun

@onthewaytothesun
March 15, 2021, 19:02
0 views
3 reactions
3 replies
0 reposts