« Отличный скрипт "Снег" для сайтов uCoz, 6 вариантов »

Описание материала:

Описание было взято с сайта webmaster-ucoz.ru

До нового года осталось совсем немного, суета с подарками, все начинают ставить елки у себя дома, украшать окна снежинками, километры гирлянд и мишуры, все это и создает праздник, почему же не принести это же настроение на свой сайт? Давайте добавим праздничного настроения наступающего нового года и запустим настоящий падающий снег для сайта... Предлагаю Вам несколько 6 вариантов падающего снега. Каждый снег уникален и красив по своему, но я рекомендую Вам установить 1 вариант снега

1 вариант - демонстрация скрипта
Код снега:

Код
<script type="text/javascript">  
imageDir = "http://webmaster-ucoz.ru/master/prazdnik/novyj_god/snezhinki/";  
sflakesMax = 65;  
sflakesMaxActive = 65;  
svMaxX = 2;  
svMaxY = 6;  
ssnowStick = 1;  
ssnowCollect = 0;  
sfollowMouse = 1;  
sflakeBottom = 0;  
susePNG = 1;  
sflakeTypes = 5;  
sflakeWidth = 15;  
sflakeHeight = 15;  
</script>  
<script type="text/javascript" src="http://webmaster-ucoz.ru/master/prazdnik/novyj_god/js/snow.js"></script>

2 вариант - демонстрация скрипта
Код снега:
Код
<script type='text/javascript' src='http://webmaster-ucoz.ru/ucoz/1/sneg/js/sneg1.js'></script>  
<script type='text/javascript'>  
var aaSnowConfig = {snowflakes: '200'};  
</script>

3 вариант - демонстрация скрипта
Код снега:
Код
<script src='http://webmaster-ucoz.ru/ucoz/1/sneg/js/sheg2.js'></script>  
<div class="mince">  
  <a class="s1" id="clear" href="javascript://">Очистить</a>  
  <a class="s1" id="round" href="javascript://">Большие хлопья</a>  
  <a class="s1" id="shadows" href="javascript://">Маленькие с тенью</a>  
  <a class="s1" id="roundshadows" href="javascript://">Кругляшки с тенью</a>  
  <a class="s1" id="collection" href="javascript://">Скопление снега</a>  
</div>  
<script type='text/javascript'>  
  $(document).ready(function(){  
  //Start the snow default options you can also make it snow in certain elements, etc.  
  $(document).snowfall();  
   
  $("#clear").click(function(){  
  $(document).snowfall('clear'); // How you clear  
  });  
   
  $("#round").click(function(){  
  $(document).snowfall('clear');  
  $(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded  
  });  
   
  $("#shadows").click(function(){  
   
  $(document).snowfall('clear');  
   
   
  $(document).snowfall({shadow : true, flakeCount:200}); // add shadows  
  });  

  $("#roundshadows").click(function(){  

  $(document).snowfall('clear');  
  $(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows  
  });  
   
  $("#collection").click(function(){  

  $(document).snowfall('clear');  
   
   
  $(document).snowfall({collection : '.mince', flakeCount : 300});  
  });  
  });  
  </script>

4 вариант - демонстрация скрипта
Код снега:
Код
<script type="text/javascript">  
var SNOW_Picture = "http://webmaster-ucoz.ru/ucoz/1/sneg/img/sheg1.png"; // ссылка на снежинку  
var SNOW_Width = "25px"; // длина снежинки  
var SNOW_Height = "25px"; // высота снежинки  
var SNOW_no = 99; // количество снежинок на странице одновременно  
</script>  
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/sneg/js/sheg3.js"></script>

5 вариант - демонстрация скрипта
Код снега:
Код
<!-- Снег -->  
<div class="opacity">  
<img title="Погода" onclick="apoSnow()" src="http://webmaster-ucoz.ru/ucoz/1/sneg/img/Msnow.png" width="45px" height="45px" class="apoCloud" />  
</div>  
<script src="http://webmaster-ucoz.ru/ucoz/1/sneg/js/sneg4.js"></script>  
<script src="http://webmaster-ucoz.ru/ucoz/1/sneg/js/sneg4.1.js"></script>  
<style>  
  .apoCloud {position:fixed;top:5px;right:21px;z-index:5;cursor:pointer;}  
</style>  
<!-- /Снег -->

6 вариант - демонстрация скрипта
Код снега:
Код
<body onload="init()">  
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/sneg/js/sheg5.js"></script>  
  <script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/sneg/js/sneg5.1.js"></script>  
<script>  

  var SCREEN_WIDTH = window.innerWidth;  
  var SCREEN_HEIGHT = window.innerHeight;  

  var container;  

  var particle;  

  var camera;  
  var scene;  
  var renderer;  

  var mouseX = 0;  
  var mouseY = 0;  

  var windowHalfX = window.innerWidth / 2;  
  var windowHalfY = window.innerHeight / 2;  
   
  var particles = [];  
  var particleImage = new Image();//THREE.ImageUtils.loadTexture( "http://webmaster-ucoz.ru/ucoz/1/sneg/img/sheg5.png" );  
  particleImage.src = 'http://webmaster-ucoz.ru/ucoz/1/sneg/img/sheg5.1.png';  

   
   
  function init() {  

  container = document.createElement('div');  
  document.body.appendChild(container);  

  camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );  
  camera.position.z = 1000;  

  scene = new THREE.Scene();  
  scene.add(camera);  
   
  renderer = new THREE.CanvasRenderer();  
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);  
  var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );  
   
  for (var i = 0; i < 500; i++) {  

  particle = new Particle3D( material);  
  particle.position.x = Math.random() * 2000 - 1000;  
  particle.position.y = Math.random() * 2000 - 1000;  
  particle.position.z = Math.random() * 2000 - 1000;  
  particle.scale.x = particle.scale.y = 1;  
  scene.add( particle );  
   
  particles.push(particle);  
  }  

  container.appendChild( renderer.domElement );  

   
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );  
  document.addEventListener( 'touchstart', onDocumentTouchStart, false );  
  document.addEventListener( 'touchmove', onDocumentTouchMove, false );  
   
  setInterval( loop, 1000 / 60 );  
   
  }  
   
  function onDocumentMouseMove( event ) {  

  mouseX = event.clientX - windowHalfX;  
  mouseY = event.clientY - windowHalfY;  
  }  

  function onDocumentTouchStart( event ) {  

  if ( event.touches.length == 1 ) {  

  event.preventDefault();  

  mouseX = event.touches[ 0 ].pageX - windowHalfX;  
  mouseY = event.touches[ 0 ].pageY - windowHalfY;  
  }  
  }  

  function onDocumentTouchMove( event ) {  

  if ( event.touches.length == 1 ) {  

  event.preventDefault();  

  mouseX = event.touches[ 0 ].pageX - windowHalfX;  
  mouseY = event.touches[ 0 ].pageY - windowHalfY;  
  }  
  }  

  //  

  function loop() {  

  for(var i = 0; i<particles.length; i++)  
  {  

  var particle = particles[i];  
  particle.updatePhysics();  
   
  with(particle.position)  
  {  
  if(y<-1000) y+=2000;  
  if(x>1000) x-=2000;  
  else if(x<-1000) x+=2000;  
  if(z>1000) z-=2000;  
  else if(z<-1000) z+=2000;  
  }  
  }  
   
  camera.position.x += ( mouseX - camera.position.x ) * 0.05;  
  camera.position.y += ( - mouseY - camera.position.y ) * 0.05;  
  camera.lookAt(scene.position);  

  renderer.render( scene, camera );  

   
  }  

  </script>


Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 1768


Поделиться в соц. сетях:
Комментариев к материалу: 2
Nick 16.12.2016 в 05:55Спам
Второй вариант очень нравиться но не могу его установить на сайт сделанный на Битрикс!

Либо снега вообще не видно, либо они появляется в самом низу сайта, куда бы я его не вставлял. sad
0
Не плохо.
1
avatar