Скрипты - Всё для Вебмастера

EngineGamePanel v3

zoro451 — Tue, 13 Sep 2022 17:09:57 +0300

Панель управления игровыми серверами - EGPV3. это обновлённая и доработанная оригинальная версия EngineGamePanel v3 с которой вы можете с лёгкостью открыть многофункциональный проект или просто запустить игровой сервер, общаться в чате, подключать vds к панели, загружать сборки с яндекс диска. Устанавливать WEB МОДУЛИ (CSBANS, AMXBANS, ASTATS, CSSTATS, Buy Privileges) и многое другое

[media=https://youtu.be/aERglIccXRI]

Скачать Website 2 APK

Project Team — Wed, 20 Jul 2022 21:47:27 +0300

Website 2 APK Builder Pro — отличная программа для преобразования вашего веб-сайта в приложение для Android. Преобразование HTML, CSS, JS или веб-URL в приложение для Android. Веб-сайт 2 APK Builder очень прост в использовании, просто сделайте пошаговые настройки для вашего приложения, создайте его, пока вы его завершаете. Скачать Website 2 APK Builder Pro можно бесплатно.

Георгиевская ленточка на сайт

Project Team — Sun, 09 May 2021 05:29:37 +0300

Каждый год, в день празднования 9 мая мы видим неотъемлемый его символ - Георгиевскую ленту. Она настолько "срослась" с этим праздником, что уже совершенно потерялся весь ее смысл. Между тем, это не просто кусочек полосатой ткани, это награда и символ с богатой предысторией.
Георгиевская лента – лента, с ее цветовым решением, получаемая за личную храбрость, проявленную в сражении, названа в честь Святого Георгия Победоносца, христианского мученика, жившего в III веке нашей эры, творившего чудеса во имя Христа и принявшего мученическую смерть за свою веру.
Сама награда была учреждена в XVIII веке великой императрицей Екатериной II и выдавалась в форме ордена с лентой в уже знакомой цветовой гамме - с тремя черными и двумя желтыми полосами. Сам орден имел четыре степени и, соответственно четыре вида оформления, в зависимости от степени заслуги.
Первый орден получили солдаты отряда Суворова в августе 1787 года за сражение с турками.
Особое почетное применение награда получила при награждения солдат Российской армии. Ее украшали тогда и сейчас парадные, кавалерийские и пехотные трубы.
Утвержденная награда стала самой массовой медалью, вручаемой солдатам за личную храбрость в бою.
В годы Великой Отечественной Войны была учреждена еще одна награда – Орден Славы, состоящий из трех ступеней, который также украсила знаменитая георгиевская лента.
В современном виде лента получила свое распространение после того, как 2 марта 1992 года было принято решение о восстановлении данного вида награды, упраздненной после окончания войны.
С 2005 года по настоящее время мы можем любоваться этим символом Победы, символизирующим не только отличительную храбрость в борьбе с захватчиками, но и огромные людские потери, которые перетерпела наша страна в сумрачные годы.

Для тех кто хочет немного украсить свой сайт в честь великого дня Победы , предлагаю установить данный код к себе на сайт:

На движке DLE в частности на моём шаблоне код установлен в sidebar.tpl. На своих сайтах экспериментируем cами.
Надеюсь материал был полезен.... Если да, то палец вверх.

Панель управления игровым хостингом Game-Host

Project Team — Mon, 04 Jan 2021 20:45:05 +0300

Слив последний панели управления игровым хостингом Game-Host
Основа панели управления EGP

Новогодний скрипт гирлянды на сайт

Project Team — Sat, 12 Dec 2020 20:13:18 +0300

Простая гирлянда, выполненная на основе SVG-изображений и CSS. Все лампочки в гирлянде плавно мигают. Можно экспериментировать с фоном, общим стилем, цветом лампочек, скоростью воспроизведения анимации и так далее.

HTML

CSS

/* Simple SVG Christmas Lights Animation */

body {
  background: #2AA5A0
}

#Christmas_Lights {
  height: 100%;
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: 1000
}

.light_cord {
  fill: none;
  stroke: #174700;
}

.light_fixture {
  fill: #134413;
}

.red_bulb {
  fill: #CA2128;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.green_bulb {
  fill: #2D754A;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.blue_bulb {
  fill: #2C3EA8;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.white_bulb {
  fill: #F5EED7;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.gold_bulb {
  fill: #ffcc5e;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}


/* Simply changing the opacity of the SVG fill to create the glow effect for the bulbs */

.bulb {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: glow;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  animation-name: glow;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@-webkit-keyframes glow {
  0% {
    fill-opacity: 0.25;
  }
  100% {
    fill-opacity: 1
  }
}

@keyframes glow {
  0% {
    fill-opacity: 0.25;
  }
  100% {
    fill-opacity: 1.0
  }
}


/* Made a set of ten animation delays to create a more random effect of lights blinking.  Simplest way without jumping through SVG hoops. */

.blink-1 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.blink-2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-4 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.blink-5 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.blink-6 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.blink-7 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-8 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.blink-9 {
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}

.blink-10 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

Анимация метели

Project Team — Wed, 09 Dec 2020 20:28:24 +0300

Анимация метели выполнена с помощью с помощью pixi.js

CSS

* {
  box-sizing: border-box;
}
body {
  background-color: #111;
}
canvas {
  height: 100vh;
  width: 100vw;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}

JS

Подключаем библиотеку pixi.js

https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js

Сам скрипт

const UPPER_LIMIT_Y = 20
const UPPER_LIMIT_X = 2
const LOWER_LIMIT_X = -2
const MAX_SIZE = 6
const MIN_SIZE = 2
const AMOUNT = 250
const COLOR = 0xffffff
const { Application, Graphics } = PIXI
const floored = v => Math.floor(Math.random() * v)
const update = p =>
  Math.random() > 0.5
    ? Math.max(LOWER_LIMIT_X, p - 1)
    : Math.min(p + 1, UPPER_LIMIT_X)

const reset = p => {
  p.x = floored(app.renderer.width)
  p.y = -(p.height + floored(app.renderer.height))
  p.vy = floored(UPPER_LIMIT_Y)
}

const genParticles = t =>
  new Array(AMOUNT).fill().map(p => {
    const SIZE = floored(MAX_SIZE) + MIN_SIZE
    p = new PIXI.Sprite(t)
    p.scale.x = p.scale.y = SIZE / 100
    // p.width = p.height = SIZE
    p.vx = floored(UPPER_LIMIT_X) - UPPER_LIMIT_X
    p.vy = floored(UPPER_LIMIT_Y)
    p.alpha = Math.random()
    p.x = floored(app.renderer.width)
    p.y = -(SIZE + floored(app.renderer.height))
    drops.addChild(p)
    return p
  })

const app = new Application({
  antialias: true,
  transparent: true,
})

const drops = new PIXI.particles.ParticleContainer(AMOUNT, {
  scale: true,
  position: true,
  alpha: true,
})
app.stage.addChild(drops)

const p = new Graphics()
p.beginFill(COLOR)
p.drawCircle(0, 0, 100)
p.endFill()
const baseTexture = app.renderer.generateTexture(p)
let particles = genParticles(baseTexture)

// app.stage.filters = [new PIXI.filters.BlurFilter(3)]
app.ticker.add(i => {
  if (
    app.renderer.height !== innerHeight ||
    app.renderer.width !== innerWidth
  ) {
    app.renderer.resize(innerWidth, innerHeight)
    drops.removeChildren()
    particles = genParticles(baseTexture)
  }
  for (let particle of particles) {
    if (particle.y > 0) particle.x += particle.vx
    particle.y += particle.vy

    if (Math.random() > 0.9) particle.vx = update(particle.vx)
    if (Math.random() > 0.9)
      particle.vy = Math.min(particle.vy + 1, UPPER_LIMIT_Y)

    if (
      particle.x > app.renderer.width ||
      particle.x < 0 ||
      particle.y > app.renderer.height
    )
      reset(particle)
  }
})

document.body.appendChild(app.view)

Снегопад на шейдерах c three.js

Project Team — Wed, 09 Dec 2020 20:22:10 +0300

Новогоднее украшение для сайта снегопад на шейдерах c three.js.

HTML

https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/ccapture.js

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
  touch-action: none;
}

JS

/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw 
the shader. The only thing to see here really is the uniforms sent to 
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/

let container;
let camera, scene, renderer;
let uniforms;

let loader=new THREE.TextureLoader();
let texture;
loader.setCrossOrigin("anonymous");
loader.load(
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
  function do_something_with_texture(tex) {
    texture = tex;
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;
    init();
    animate();
  }
);

function init() {
  container = document.getElementById( 'container' );

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

  uniforms = {
    u_time: { type: "f", value: 1.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    u_noise: { type: "t", value: texture },
    u_mouse: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  } );
  material.extensions.derivatives = true;

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );

  container.appendChild( renderer.domElement );

  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );

  document.addEventListener('pointermove', (e)=> {
    let ratio = window.innerHeight / window.innerWidth;
    uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
    uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
    
    e.preventDefault();
  });
}

function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate(delta) {
  requestAnimationFrame( animate );
  render(delta);
}






let capturer = new CCapture( { 
  verbose: true, 
  framerate: 60,
  // motionblurFrames: 4,
  quality: 90,
  format: 'webm',
  workersPath: 'js/'
 } );
let capturing = false;

isCapturing = function(val) {
  if(val === false && window.capturing === true) {
    capturer.stop();
    capturer.save();
  } else if(val === true && window.capturing === false) {
    capturer.start();
  }
  capturing = val;
}
toggleCapture = function() {
  isCapturing(!capturing);
}

window.addEventListener('keyup', function(e) { if(e.keyCode == 68) toggleCapture(); });

let then = 0;
function render(delta) {
  
  uniforms.u_time.value = -10000 + delta * 0.0005;
  renderer.render( scene, camera );
  
  if(capturing) {
    capturer.capture( renderer.domElement );
  }
}

Гирлянда на сайт на чистом CSS

Project Team — Tue, 01 Dec 2020 21:18:34 +0300

Ищите простое и креативное решение для украшения сайта к новому году? Тогда Вы попали туда куда нужно.
Данное решение позволит Вам на своем сайте организовать простую гирлянду.
Гирлянда построена на чистом CSS. Минимальная копотня в коде, а в итоге красивая мерцающая гирлянда.
Приступим устанавливаем HTML код на свою страницу.

По сути элемент li это есть лампочка.

Не забываем про стили CSS:

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}

.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.66667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.33333px;
  border-radius: 3px;
  top: -4.66667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.66667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  content: none;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@-webkit-keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

Вот и всё!!! Всех с Наступающим!!!!

Падающий снег для сайта на HTML5 Canvas

Project Team — Tue, 01 Dec 2020 21:17:10 +0300

Добрый вечер уважаемые посетители портала скриптов и шаблонов FOR-WEB.ru . Зимние праздники продолжаются, а я в свою очередь подобрал еще один эффект падающего снега реализованного на Canvas. Отличительной чертой является то, что снег отлетает от курсора мыши. И так приступим.

HTML


 
 
 
 
 Вернуться к новости

CSS

.xmas {
 height: 100%;
 width: 100%;
 position: relative;
 background: url("https://for-web.ru/script/merrycristmas/xmas-large.jpg") no-repeat 0 0/cover;
}
.xmas .xmas-message {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 2;
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 width: calc(90% - 6rem);
 height: calc(100% - 12rem);
 margin: 0 auto;
 background: url(https://for-web.ru/script/merrycristmas/merryxmas.png) no-repeat 50% 50% / contain;
}
.xmas .from {
 position: absolute;
 bottom: 40px;
 width: 100%;
 z-index: 3;
 text-align: center;
}
.xmas .from div {
 font-family: "quimby-mayoral", sans-serif;
 color: #ffffff;
 font-size: 40px;
 margin-bottom: 10px;
}
.xmas .from .gc-link {
 display: inline-block;
 font-family: "brandon-grotesque", sans-serif;
 font-size: 24px;
 color: #ffffff;
 -webkit-transition: 400ms ease;
 transition: 400ms ease;
 text-decoration: none;
 text-transform: uppercase;
}
.xmas .from .gc-link:hover {
 color: #1cff94;
}
.xmas #xmas {
 width: 100%;
 height: 100%;
 position: relative;
 z-index: 2;
}

Не забываем сменить пути

JS

$(document).ready(function(){
 
 initLetItSnow();
});
 
var initLetItSnow = function(){
 
 (function() {
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
 function(callback) {
 window.setTimeout(callback, 1000 / 60);
 };
 window.requestAnimationFrame = requestAnimationFrame;
 })();
 
 var flakes = [],
 canvas = document.getElementById("xmas"),
 ctx = canvas.getContext("2d"),
 mX = -100,
 mY = -100;
 
 if( $(window).width() < 999 ){
 var flakeCount = 125;
 } else {
 var flakeCount = 450;
 }
 
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
 function snow() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 for (var i = 0; i < flakeCount; i++) {
 var flake = flakes[i],
 x = mX,
 y = mY,
 minDist = 250,
 x2 = flake.x,
 y2 = flake.y;
 
 var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
 dx = x2 - x,
 dy = y2 - y;
 
 if (dist < minDist) {
 var force = minDist / (dist * dist),
 xcomp = (x - x2) / dist,
 ycomp = (y - y2) / dist,
 deltaV = force;
 
 flake.velX -= deltaV * xcomp;
 flake.velY -= deltaV * ycomp;
 
 } else {
 flake.velX *= .98;
 if (flake.velY <= flake.speed) {
 flake.velY = flake.speed
 }
 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
 }
 
 ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
 flake.y += flake.velY;
 flake.x += flake.velX;
 
 if (flake.y >= canvas.height || flake.y <= 0) {
 reset(flake);
 }
 
 if (flake.x >= canvas.width || flake.x <= 0) {
 reset(flake);
 }
 
 ctx.beginPath();
 ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
 ctx.fill();
 }
 requestAnimationFrame(snow);
 };
 
 function reset(flake) {
 flake.x = Math.floor(Math.random() * canvas.width);
 flake.y = 0;
 flake.size = (Math.random() * 3) + 2;
 flake.speed = (Math.random() * 1) + 0.5;
 flake.velY = flake.speed;
 flake.velX = 0;
 flake.opacity = (Math.random() * 0.5) + 0.3;
 }
 
 function init() {
 for (var i = 0; i < flakeCount; i++) {
 var x = Math.floor(Math.random() * canvas.width),
 y = Math.floor(Math.random() * canvas.height),
 size = (Math.random() * 3) + 4,
 speed = (Math.random() * 1) + 0.5,
 opacity = (Math.random() * 0.5) + 0.3;
 
 flakes.push({
 speed: speed,
 velY: speed,
 velX: 0,
 x: x,
 y: y,
 size: size,
 stepSize: (Math.random()) / 160,
 step: 0,
 opacity: opacity
 });
 }
 
 snow();
 };
 
 canvas.addEventListener("mousemove", function(e) {
 mX = e.clientX,
 mY = e.clientY
 });
 
 window.addEventListener("resize",function(){
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 })
 
 init();
};

Подключаем JQuery

Защита текста от копирования

Project Team — Wed, 18 Nov 2020 20:26:37 +0300

Защита текста от копирования - это постоянная боль для вебмастера, особенно когда контент пишется вручную и в него инвестируешь много времени и души. А потом текст копируют на множество сайтов и даже не ставят обратной ссылки.

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

Я не буду писать о том, как сделать такой банальный метод. Я хочу написать Вам об одном очень интересном скрипте, который сам ставит ссылку на вас. Даже если текст скопировали с сайта и кинули в в контакте, то ссылка на источник будет там присутствовать и владелец текста больше всего получит нового посетителя на сайт.

Такая защита текста от копирования может дать больше естественной ссылочной массы!

Ну и сам скрипт:

Его можно установить на любую CMS, главное вставить код перед тегом /head.

Удачной работы, надеюсь это поможет Вам собрать сайту ссылочную массу, а так же защитить немного текст вашего сайта!