Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Хаки / Дополнения
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Статическая анимированная страница "Звездная пыль"

    Дата добавления: 13.01.2018 - 01:30
    Добавил: Buger
    Количество просмотров: 2.2k
    Количество комментариев: 0
    Размер файла: 11.6 Kb
    Рейтинг материала: 3.0 / 1
    Статическая анимированная страница "Звездная пыль"
    БЕСПЛАТНО
    Демонстрация
    рейтинг 3.0
    /
    голосов 1
    Очень привлекательная, живая, визуальная страница с текстом и эффектом "звездная пыль".
    Данное решение можно применить для статических и отдельных страниц сайта. Также будет смотреться в качестве стартовой (Главной) страницы или страницы ошибки 404.

    HTML
    Код
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset='UTF-8'>
      <meta name="robots" content="noindex">
      <style type="text/css">
      @import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");

      body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background: #000000;
      }

      .title {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      font-family: "Montserrat";
      text-align: center;
      width: 100%;
      }

      .title h1 {
      position: relative;
      color: #FFF;
      font-weight: 100;
      font-size: 90px;
      padding: 0;
      margin: 0;
      line-height: 1;
      text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
      }

      .title h1 span {
      font-weight: 600;
      padding: 0;
      margin: 0;
      color: #FFFFFF;
      }

      .title h3 {
      font-weight: 200;
      font-size: 20px;
      padding: 0;
      margin: 0;
      line-height: 1;
      color: #FFFFFF;
      letter-spacing: 2px;
      }
      </style>
    </head>

    <body>
      <div class="title">
      <h3>Online shop - 2018</h3>
      <h1>ART-UCOZ</h1>
      <h3>ЗВЕЗДНАЯ <strong> ПЫЛЬ</strong></h3>
      </div>

      <script type="text/javascript">
      "use strict";
      "object" != typeof window.AU && (window.AU = {}), window.AU.PenTimer = {
      programNoLongerBeingMonitored: !1,
      timeOfFirstCallToShouldStopLoop: 0,
      _loopExits: {},
      _loopTimers: {},
      START_MONITORING_AFTER: 2e3,
      STOP_ALL_MONITORING_TIMEOUT: 5e3,
      MAX_TIME_IN_LOOP_WO_EXIT: 2200,
      exitedLoop: function(o) {
      this._loopExits[o] = !0
      },
      shouldStopLoop: function(o) {
      if (this.programKilledSoStopMonitoring) return !0;
      if (this.programNoLongerBeingMonitored) return !1;
      if (this._loopExits[o]) return !1;
      var t = this._getTime();
      if (0 === this.timeOfFirstCallToShouldStopLoop) return this.timeOfFirstCallToShouldStopLoop = t, !1;
      var i = t - this.timeOfFirstCallToShouldStopLoop;
      if (i < this.START_MONITORING_AFTER) return !1;
      if (i > this.STOP_ALL_MONITORING_TIMEOUT) return this.programNoLongerBeingMonitored = !0, !1;
      try {
      this._checkOnInfiniteLoop(o, t)
      } catch (o) {
      return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0
      }
      return !1
      },
      _shouldPostMessage: function() {
      return document.location.href.match(/boomerang/)
      },
      _findAroundLineNumber: function() {
      var o = new Error,
      t = 0;
      if (o.stack) {
      var i = o.stack.match(/boomerang\S+:(\d+):\d+/);
      i && (t = i[1])
      }
      return t
      },
      _getTime: function() {
      return +new Date
      }
      }, window.AU.shouldStopExecution = function(o) {
      var t = window.AU.PenTimer.shouldStopLoop(o);
      return t === !0 && console.warn(), t
      }, window.AU.exitedLoop = function(o) {
      window.AU.PenTimer.exitedLoop(o)
      };
      </script>
      <script src='http://art-ucoz.ru/.s/src/jquery-1.10.2.js'></script>
      <script>
      var _createClass = function() {
      function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
      if (window.AU.shouldStopExecution(1)) {
      break;
      }
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
      }
      window.AU.exitedLoop(1);
      }
      return function(Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
      };
      }();

      function _classCallCheck(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
      }
      }

      var particles = [];
      var microparticles = [];

      var c1 = createCanvas({
      width: $(window).width(),
      height: $(window).height()
      });

      var tela = c1.canvas;
      var canvas = c1.context;

      // $("body").append(tela);
      $("body").append(c1.canvas);

      var Particle = function() {
      function Particle(canvas) {
      _classCallCheck(this, Particle);

      this.random = Math.random();
      this.random1 = Math.random();
      this.random2 = Math.random();
      this.progress = 0;
      this.canvas = canvas;
      this.life = 1000 + Math.random() * 3000;

      this.x = $(window).width() / 2 + (Math.random() * 20 - Math.random() * 20);
      this.y = $(window).height();
      this.s = 2 + Math.random();
      this.w = $(window).width();
      this.h = $(window).height();
      this.direction = this.random > .5 ? -1 : 1;
      this.radius = 1 + 3 * this.random;
      this.color = "#ff417d";

      this.ID = setInterval(function() {
      microparticles.push(new microParticle(c1.context, {
      x: this.x,
      y: this.y
      }));
      }.bind(this), this.random * 20);

      setTimeout(function() {
      clearInterval(this.ID);
      }.bind(this), this.life);
      }

      _createClass(Particle, [{
      key: "render",
      value: function render() {
      this.canvas.beginPath();
      this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      // this.canvas.lineWidth = 2;
      this.canvas.shadowOffsetX = 0;
      this.canvas.shadowOffsetY = 0;
      // this.canvas.shadowBlur = 6;
      this.canvas.shadowColor = "#000000";
      this.canvas.fillStyle = this.color;
      this.canvas.fill();
      this.canvas.closePath();
      }
      }, {
      key: "move",
      value: function move() {
      this.x -= this.direction * Math.sin(this.progress / (this.random1 * 430)) * this.s;
      this.y -= Math.cos(this.progress / this.h) * this.s;

      if (this.x < 0 || this.x > this.w - this.radius) {
      clearInterval(this.ID);
      return false;
      }

      if (this.y < 0) {
      clearInterval(this.ID);
      return false;
      }
      this.render();
      this.progress++;
      return true;
      }
      }]);

      return Particle;
      }();

      var microParticle = function() {
      function microParticle(canvas, options) {
      _classCallCheck(this, microParticle);

      this.random = Math.random();
      this.random1 = Math.random();
      this.random2 = Math.random();
      this.progress = 0;
      this.canvas = canvas;

      this.x = options.x;
      this.y = options.y;
      this.s = 2 + Math.random() * 3;
      this.w = $(window).width();
      this.h = $(window).height();
      this.radius = 1 + this.random * 0.5;
      this.color = "#4EFCFE"; //this.random > .5 ? "#a9722c" : "#FFFED7"
      }

      _createClass(microParticle, [{
      key: "render",
      value: function render() {
      this.canvas.beginPath();
      this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      this.canvas.lineWidth = 2;
      this.canvas.fillStyle = this.color;
      this.canvas.fill();
      this.canvas.closePath();
      }
      }, {
      key: "move",
      value: function move() {
      this.x -= Math.sin(this.progress / (100 / (this.random1 - this.random2 * 10))) * this.s;
      this.y += Math.cos(this.progress / this.h) * this.s;

      if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
      }

      if (this.y > this.h) {
      return false;
      }
      this.render();
      this.progress++;
      return true;
      }
      }]);

      return microParticle;
      }();

      var random_life = 1000;

      setInterval(function() {
      particles.push(new Particle(canvas));
      random_life = 2000 * Math.random();
      }.bind(this), random_life);

      function clear() {
      var grd = canvas.createRadialGradient(tela.width / 2, tela.height / 2, 0, tela.width / 2, tela.height / 2, tela.width);
      grd.addColorStop(0, "rgba(82,42,114,1)");
      grd.addColorStop(1, "rgba(26,14,4,0)");
      // Fill with gradient
      canvas.globalAlpha = 0.16;
      canvas.fillStyle = grd;
      canvas.fillRect(0, 0, tela.width, tela.height);
      }

      function blur(ctx, canvas, amt) {
      // ctx.filter = `blur(${amt}px)`
      // ctx.drawImage(canvas, 0, 0)
      // ctx.filter = 'none'
      }

      function update() {
      clear();
      particles = particles.filter(function(p) {
      return p.move();
      });
      microparticles = microparticles.filter(function(mp) {
      return mp.move();
      });
      requestAnimationFrame(update.bind(this));
      }

      function createCanvas(properties) {
      var canvas = document.createElement('canvas');
      canvas.width = properties.width;
      canvas.height = properties.height;
      var context = canvas.getContext('2d');
      return {
      canvas: canvas,
      context: context
      };
      }
      update();
      </script>
    </body>

    </html>
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: