{"id":2872,"date":"2026-05-12T11:39:08","date_gmt":"2026-05-12T11:39:08","guid":{"rendered":"https:\/\/design.mylda.lt\/?page_id=2872"},"modified":"2026-05-22T11:37:32","modified_gmt":"2026-05-22T11:37:32","slug":"tttt","status":"publish","type":"page","link":"https:\/\/design.mylda.lt\/index.php\/tttt\/","title":{"rendered":"tttt"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2872\" class=\"elementor elementor-2872\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71267d7 e-con-full e-flex e-con e-parent\" data-id=\"71267d7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f41ea4 elementor-widget elementor-widget-html\" data-id=\"1f41ea4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"hero\">\r\n\r\n  <!-- TOP TEXT -->\r\n  <h1 class=\"hero_title\">\r\n    Internetini\u0173 svetaini\u0173 k\u016brimas\r\n  <\/h1>\r\n\r\n  <div class=\"hero_subtitle\">\r\n    j\u016bs\u0173 prek\u0117s \u017eenklui\r\n  <\/div>\r\n\r\n  <!-- VIDEO -->\r\n  <div class=\"hero_video_wrap\" id=\"videoWrap\">\r\n    <video class=\"hero_video\" muted autoplay loop playsinline preload=\"metadata\" id=\"heroVideo\">\r\n      <source src=\"https:\/\/mylda.lt\/wp-content\/uploads\/2026\/05\/internetiniu-svetainiu-kurimas.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n  <\/div>\r\n\r\n  <!-- BOTTOM TEXT -->\r\n  <div class=\"hero_bottom\">\r\n    <span>UI\/UX dizainas<\/span>\r\n    <span>svetain\u0117ms ir verslo augimui<\/span>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;700&display=swap');\r\n\r\n.hero{\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  margin-top: -10px;\r\n}\r\n\r\n\/* TOP TEXT *\/\r\n.hero_title{\r\n  text-align: center;\r\n  font-size: clamp(24px, 10vw, 55px);\r\n  font-weight: 400;\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  position: relative;\r\n  z-index: 3;\r\n  margin-bottom: -12vh;\r\n  will-change: transform;\r\n}\r\n\r\n.hero_subtitle{\r\n  text-align: center;\r\n  font-size: clamp(16px, 6vw, 32px);\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  position: relative;\r\n  z-index: 3;\r\n  margin-top: 10vh;\r\n  will-change: transform;\r\n}\r\n\r\n\/* DESKTOP *\/\r\n@media (min-width: 1451px) {\r\n\r\n  .hero_bottom {\r\n    margin-top: -10vh;\r\n    transform: translateY(-100px);\r\n  }\r\n}\r\n\r\n.hero_bottom{\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  letter-spacing: 0.5px;\r\n  font-weight: 400;\r\n}\r\n\r\n\/* VIDEO *\/\r\n.hero_video_wrap{\r\n  position: sticky;\r\n  top: 0;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  z-index: 2;\r\n}\r\n\r\n.hero_video{\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transform: scale(0.5);\r\n  transform-origin: center;\r\n  top: -15%;\r\n  will-change: transform;\r\n}\r\n\r\n\/* BOTTOM TEXT *\/\r\n.hero_bottom{\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 0 5vw;\r\n  font-size: clamp(12px, 2vw, 16px);\r\n  text-transform: lowercase;\r\n  margin-top: -30vh;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* LAPTOP OPTIMIZATION *\/\r\n@media (min-width: 769px) and (max-width: 1450px){\r\n\r\n  .hero_title{\r\n    margin-bottom: -5vh;\r\n  }\r\n\r\n  .hero_subtitle{\r\n    margin-top: 8vh;\r\n  }\r\n\r\n  .hero_bottom{\r\n    transform: translateY(-60px);\r\n  }\r\n\r\n  .hero_video{\r\n    top: -8%;\r\n  }\r\n}\r\n\r\n\/* LARGE SCREENS *\/\r\n@media (min-width: 1600px){\r\n  .hero_bottom{\r\n    margin-top: -20vh;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width:768px){\r\n\r\n  .hero{\r\n    margin-top: 0;\r\n  }\r\n\r\n  .hero_title{\r\n    line-height: 1.1;\r\n  }\r\n\r\n  .hero_subtitle{\r\n    margin-top: 13vh;\r\n  }\r\n\r\n  .hero_video_wrap{\r\n    position: relative;\r\n    height: 40vh;\r\n    border-radius: 18px;\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .hero_video{\r\n    position: relative;\r\n    transform: none !important;\r\n    top: 0;\r\n  }\r\n\r\n  .hero_bottom{\r\n    margin-top: 20px;\r\n    flex-direction: row;\r\n    padding: 0 10px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n\r\n  if (window.innerWidth <= 768) return;\r\n\r\n  const video = document.getElementById(\"heroVideo\");\r\n  const wrap = document.getElementById(\"videoWrap\");\r\n\r\n  const title = document.querySelector(\".hero_title\");\r\n  const subtitle = document.querySelector(\".hero_subtitle\");\r\n\r\n  let progress = 0;\r\n  let locked = true;\r\n\r\n  const scaleStart = 0.5;\r\n  const scaleEnd = 1;\r\n\r\n  function clamp(value, min, max) {\r\n    return Math.min(Math.max(value, min), max);\r\n  }\r\n\r\n  function render() {\r\n\r\n    \/\/ clamp progress (stabilumui)\r\n    progress = clamp(progress, 0, 1);\r\n\r\n    \/\/ VIDEO SCALE (cinematic zoom)\r\n    const scale = scaleStart + (scaleEnd - scaleStart) * progress;\r\n    video.style.transform = `scale(${scale})`;\r\n\r\n    \/\/ TEXT PARALLAX\r\n    const isLaptop = window.matchMedia(\"(min-width: 769px) and (max-width: 1450px)\").matches;\r\n\r\n    const moveY = progress * -160;\r\n    const mult = isLaptop ? 0.6 : 1;\r\n\r\n    const baseTitle = isLaptop ? 10 : 40;\r\n    const baseSub = isLaptop ? 25 : 65;\r\n\r\n    title.style.transform =\r\n      `translateY(${baseTitle + moveY * mult}px)`;\r\n\r\n    subtitle.style.transform =\r\n      `translateY(${baseSub + moveY * mult}px)`;\r\n  }\r\n\r\n  function onWheel(e) {\r\n\r\n    const down = e.deltaY > 0;\r\n\r\n    const rect = wrap.getBoundingClientRect();\r\n\r\n    \/\/ \ud83d\udd25 HARD UNLOCK \u2013 kai jau vir\u0161uje ir animation reset\r\n    if (window.scrollY <= 0 && progress <= 0.01) {\r\n      locked = false;\r\n    }\r\n\r\n    \/\/ SCROLL DOWN (lock animation)\r\n    if (down && progress < 1) {\r\n      e.preventDefault();\r\n\r\n      progress += e.deltaY * 0.0015;\r\n\r\n      if (progress >= 1) {\r\n        progress = 1;\r\n        locked = false;\r\n      }\r\n\r\n      render();\r\n      return;\r\n    }\r\n\r\n    \/\/ SCROLL UP (re-lock only if still in hero zone)\r\n    if (!down) {\r\n\r\n      if (rect.top >= 0 && progress > 0) {\r\n        locked = true;\r\n      }\r\n\r\n      if (locked) {\r\n        e.preventDefault();\r\n\r\n        progress += e.deltaY * 0.0015;\r\n\r\n        if (progress <= 0) {\r\n          progress = 0;\r\n          locked = false; \/\/ \ud83d\udd25 svarbu \u2013 paleid\u017eiam scroll\r\n        }\r\n\r\n        render();\r\n      }\r\n    }\r\n  }\r\n\r\n  window.addEventListener(\"wheel\", onWheel, { passive: false });\r\n\r\n  render();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d872408 e-flex e-con-boxed e-con e-parent\" data-id=\"d872408\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5645942 elementor-widget elementor-widget-html\" data-id=\"5645942\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 id=\"animated-title\">\r\n Kuriu modernias internetines svetaines pagal UI\/UX dizaino principus.\r\n<\/h2>\r\n\r\n<p id=\"animated-subtitle\">\r\n Vizualiai \u0161var\u016bs ir funkcional\u016bs sprendimai, kuriami galvojant apie patogi\u0105 vartotojo patirt\u012f.\r\n<\/p>\r\n\r\n<style>\r\n\r\n\/* \ud83d\udda5 DEFAULT (DESKTOP + DIDELI EKRANAI) *\/\r\n#animated-title,\r\n#animated-subtitle {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-weight: 200;\r\n  font-size: 3.2rem;\r\n  line-height: 1.4;\r\n\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 20px;\r\n\r\n  color: white;\r\n  text-align: left;\r\n\r\n  opacity: 0;\r\n  transform: translateY(60px);\r\n  transition: all 1s ease;\r\n}\r\n\r\n\/* tarpai *\/\r\n#animated-title {\r\n  margin-top: 100px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n#animated-subtitle {\r\n  margin-bottom: 0;\r\n}\r\n\r\n\/* \ud83d\udcbb LAPTOPAI (iki 1440px) *\/\r\n@media (max-width: 1440px) {\r\n  #animated-title,\r\n  #animated-subtitle {\r\n    font-size: 2.6rem;\r\n    max-width: 1000px;\r\n  }\r\n}\r\n\r\n\/* \ud83d\udcbb MA\u017dESNI LAPTOPAI (iki 1024px) *\/\r\n@media (max-width: 1024px) {\r\n  #animated-title,\r\n  #animated-subtitle {\r\n    font-size: 2.2rem;\r\n    max-width: 900px;\r\n  }\r\n}\r\n\r\n\/* \ud83d\udcf1 MOBILE *\/\r\n@media (max-width: 768px) {\r\n  #animated-title,\r\n  #animated-subtitle {\r\n    font-size: 2rem;\r\n    padding: 0 20px;\r\n  }\r\n\r\n  #animated-title {\r\n    margin-top: 40px;\r\n  }\r\n}\r\n\r\n\/* ANIMACIJA *\/\r\n.visible {\r\n  opacity: 1 !important;\r\n  transform: translateY(0) !important;\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  const title = document.getElementById('animated-title');\r\n  const subtitle = document.getElementById('animated-subtitle');\r\n\r\n  function showOnScroll() {\r\n    const trigger = window.innerHeight - 100;\r\n\r\n    if(title.getBoundingClientRect().top < trigger) {\r\n      title.classList.add('visible');\r\n    }\r\n\r\n    if(subtitle.getBoundingClientRect().top < trigger) {\r\n      subtitle.classList.add('visible');\r\n    }\r\n  }\r\n\r\n  window.addEventListener('scroll', showOnScroll);\r\n  showOnScroll();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-439359c e-con-full e-flex e-con e-parent\" data-id=\"439359c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35f1efb elementor-widget elementor-widget-html\" data-id=\"35f1efb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"hero-gallery\">\r\n  <div class=\"hero-item\">\r\n    <div class=\"hero-wrapper\">\r\n      <img decoding=\"async\" src=\"https:\/\/mylda.lt\/wp-content\/uploads\/2026\/05\/ui-ux-dizainas-mobili-svetaine-wordpress-1-1.png\" alt=\"Hero 1\">\r\n      <canvas class=\"hero-mask\"><\/canvas>\r\n\r\n     <a href=\"https:\/\/mylda.lt\/chestnutinnovations\/\" class=\"hero-button\">\r\n  <span data-text=\"Chestnut innovations\">Chestnut innovations<\/span>\r\n<\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n  \r\n\r\n  <div class=\"hero-item\">\r\n    <div class=\"hero-wrapper\">\r\n      <img decoding=\"async\" src=\"https:\/\/mylda.lt\/wp-content\/uploads\/2026\/05\/Restorano-Dia-internetines-svetaines-prezentacija.png\" alt=\"Hero 2\">\r\n      <canvas class=\"hero-mask\"><\/canvas>\r\n\r\n <a href=\"https:\/\/mylda.lt\/restoranas-dia\/\" class=\"hero-button\">\r\n  <span data-text=\"Restoranas DIA\">Restoranas DIA<\/span>\r\n<\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.hero-button {\r\n  position: absolute;\r\n  bottom: 25px;\r\n  left: 25px;\r\n  z-index: 3;\r\n\r\n  background: #ffffff;\r\n  color: #000;\r\n\r\n  font-family: \"Space Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\r\n  font-weight: 600;\r\n\r\n  padding: 12px 28px;\r\n  border-radius: 12px;\r\n  text-decoration: none;\r\n\r\n  border: 1px solid rgba(0,0,0,0.1);\r\n\r\n  transition: all 0.3s ease;\r\n\r\n  display: inline-block;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u274c remove underline *\/\r\n.hero-button,\r\n.hero-button:visited,\r\n.hero-button:hover,\r\n.hero-button:active {\r\n  text-decoration: none !important;\r\n}\r\n\r\n\/* \u2728 TEKSTO SHINE *\/\r\n.hero-button span {\r\n  position: relative;\r\n  display: inline-block;\r\n  color: #000;\r\n}\r\n\r\n.hero-button span::after {\r\n  content: attr(data-text);\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  color: transparent;\r\n  background: linear-gradient(\r\n    120deg,\r\n    transparent 30%,\r\n    rgba(255,255,255,0.9),\r\n    transparent 70%\r\n  );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  transform: translateX(-120%);\r\n  opacity: 0;\r\n}\r\n\r\n\/* hover \u2192 va\u017eiuoja per tekst\u0105 *\/\r\n.hero-button:hover span::after {\r\n  animation: text-shine 0.9s ease;\r\n  opacity: 1;\r\n}\r\n\r\n@keyframes text-shine {\r\n  0% { transform: translateX(-120%); }\r\n  100% { transform: translateX(120%); }\r\n}\r\n\r\n\/* hover lift *\/\r\n.hero-button:hover {\r\n  transform: translateY(-2px);\r\n}\r\n\r\n\r\n\r\n\r\n\/* \ud83d\udcf1 MOBILE *\/\r\n@media (max-width: 768px) {\r\n  .hero-button {\r\n    bottom: 15px;\r\n    left: 15px;\r\n    padding: 10px 18px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .hero-button:hover {\r\n    transform: none;\r\n  }\r\n}\r\n@media (max-width: 768px) {\r\n  .hero-mask {\r\n    opacity: 0.15;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  document.querySelectorAll('.hero-wrapper').forEach(wrapper => {\r\n    const canvas = wrapper.querySelector('.hero-mask');\r\n    const ctx = canvas.getContext('2d');\r\n\r\n    function resizeCanvas() {\r\n      canvas.width = wrapper.offsetWidth;\r\n      canvas.height = wrapper.offsetHeight;\r\n    }\r\n\r\n    resizeCanvas();\r\n    window.addEventListener('resize', resizeCanvas);\r\n\r\n    function drawGradient(x = canvas.width \/ 2, y = canvas.height \/ 2) {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n      const gradient = ctx.createRadialGradient(\r\n        x, y, 50,\r\n        x, y, canvas.width \/ 1.5\r\n      );\r\n\r\n      gradient.addColorStop(0, 'rgba(0,0,0,0.1)');\r\n      gradient.addColorStop(1, 'rgba(0,0,0,0)');\r\n\r\n      ctx.fillStyle = gradient;\r\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n    }\r\n\r\n    drawGradient();\r\n\r\n    wrapper.addEventListener('mousemove', e => {\r\n      const rect = wrapper.getBoundingClientRect();\r\n      const x = e.clientX - rect.left;\r\n      const y = e.clientY - rect.top;\r\n\r\n      drawGradient(x, y);\r\n\r\n      wrapper.querySelector('img').style.transform =\r\n        `scale(1.05) translate(${(x - canvas.width \/ 2) \/ 50}px, ${(y - canvas.height \/ 2) \/ 50}px)`;\r\n    });\r\n\r\n    wrapper.addEventListener('mouseleave', () => {\r\n      drawGradient();\r\n      wrapper.querySelector('img').style.transform = 'scale(1) translate(0,0)';\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Internetini\u0173 svetaini\u0173 k\u016brimas j\u016bs\u0173 prek\u0117s \u017eenklui UI\/UX dizainas svetain\u0117ms ir verslo augimui Kuriu modernias internetines svetaines pagal UI\/UX dizaino principus. Vizualiai \u0161var\u016bs ir funkcional\u016bs sprendimai, kuriami galvojant apie patogi\u0105 vartotojo patirt\u012f. Chestnut innovations Restoranas DIA<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2872","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/pages\/2872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/comments?post=2872"}],"version-history":[{"count":169,"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/pages\/2872\/revisions"}],"predecessor-version":[{"id":3042,"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/pages\/2872\/revisions\/3042"}],"wp:attachment":[{"href":"https:\/\/design.mylda.lt\/index.php\/wp-json\/wp\/v2\/media?parent=2872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}