---
layout: default
---

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/assets/css/style.css">
  <link rel="stylesheet" href="/assets/css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Philosopher:400,700&display=swap&subset=cyrillic-ext" rel="stylesheet">
  <title>Реализация эффекта параллакса фона при движении мышкой</title>
  <meta name="description"
    content="Скрипт, позволяющий реализовать настоящий параллакс фона при движении мышкой.">
</head>
    
<body>
  
  <header class="header">

    <div class="header__offer" id="header__offer-scene">
      <div class="header__offer-inner" data-depth="0.6">
        <img class="header__offer-logo" src="/assets/icons/oie_1_transparent.png" width="100" alt="Логотип">
        <h1 class="header__offer-title">Kennel linux</h1>
        <p class="header__offer-description">Builds of all varieties</p>
        <div class="header__offer-buttons">
          <a class="btn" href="https://kennel-linux.rockedge.org/index.php" downloads>Kennel Linux</a> 
         <!-- <button class="header__offer-link header__offer-link_button">Kl</button> -->
        </div>
      </div>
    </div>

    <div class="header__bg-title" id="header__bg-title-scene">
      <img data-depth="0.4" src="/assets/icons/fake-order-text-xl.png" alt="FakeOrder">
    </div>
    
    <div class="header__bg-particles" id="header__bg-particles-scene">
      <img data-depth="0.8" src="/assets/icons/particles.png" alt="Фон с частицами">
    </div>

  </header>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
  <script>

    let headerBgTitle = document.getElementById('header__bg-title-scene');
    let headerBgParticles = document.getElementById('header__bg-particles-scene');
    let headerOffer = document.getElementById('header__offer-scene');

    let headerBgTitleInstance = new Parallax(headerBgTitle);
    let headerBgParticlesleInstance = new Parallax(headerBgParticles, {
        invertY: false,
        invertX: false
    });
    let headerOfferInstance = new Parallax(headerOffer, {
      pointerEvents: true
    });

  </script>

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/68a6e96190eb6b1926ae0134/1j35vva6i';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
  
{% include page-intro.html %}
  
  <main id="main" class="page-content" aria-label="Content">
  <div class="inner">
    <div class="entry-wrap">
      <div class="entry-content">
        {{ content }}
      </div>
      <aside class="entry-sidebar">
        {% include author %}
        {% if author_picture %}
          <img class="author-picture" src="{{ author_picture }}" alt="{{ author_name }}">
        {% endif %}
      </aside>
    </div>
  </div>
</main>
  
  </body>
  
</html>
