AlliedModders - Motd with snow effect, i'ts possible?

Page 1 of 2

Show 40 post(s) from this thread on one page

AlliedModders (https://forums.alliedmods.net/index.php)

- HL1 Servers (HLDS) (https://forums.alliedmods.net/forumdisplay.php?f=131)

- - Motd with snow effect, i'ts possible? (https://forums.alliedmods.net/showthread.php?t=303449)

tarsisd2

12-07-2017 16:14

Motd with snow effect, i'ts possible?

Hi everyone, i was wandering if it is possible to use snow effect in cs 1.6 welcome Motd, i'm not sure since it uses javascript, but maybe someone knows another way to do it

im going for some thing like this in html

PHP Code:


		
			
<html>

<head>

  <title>SPECIAL ADDONS FOR CHRISTMAS;</title>

</head>

<body style="background-color: black;">

<center>

<h2 style="color: rgb(255, 66, 40);"><small><small><font

 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br>

</font></small></small></h2>

<img style="border: 0px solid ; width: 411px; height: 175px;"

 alt="" src="LINK TO PICTURE"><br>

<br>

<small><span

 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span

 style="color: rgb(204, 204, 204); background-color: transparent;"><span

 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br>

<span style="color: rgb(255, 255, 255);">SERVER IP HERE</span><br>

</span><span style="color: rgb(255, 255, 255);"><span

 style="color: rgb(204, 204, 204);"></span></span></span></small></center>

</body>

</html>

i will set the background black, some texte and a small banner, then the snow effect if it is possible!

thanks

Relaxing

12-08-2017 07:13

Re: Motd with snow effect, i'ts possible?

Use javascript for snow environment.

r3D w0LF

12-09-2017 13:08

Re: Motd with snow effect, i'ts possible?

I'm not sure how the motd works in cs 1.6, and whether it is capable of rendering snow, but I'm listing a few light examples (in javascript)
https://jsfiddle.net/loktar/UdyN6/
http://jsfiddle.net/dodopod/5SzEz/ not too realistic but probably the easiest to render
This:
https://jsfiddle.net/osc9yrL2/15/
is a simplified version of this:
https://jsfiddle.net/osc9yrL2/

Also check this link with more snow, but not sure whether they will render on motd:
https://engageinteractive.co.uk/blog...n-snow-effects
I definitely don't recommend you use 4 and 5 since they use external files.
Now, I'm not sure if motd is even capable of running javascript since I never got to try it. The closest I've got to using the motd is a few simple html lines.

This seems to be fully in css https://codepen.io/NickyCDK/pen/AIonk
And this one https://codepen.io/jpschwinghamer/pen/QwwbgO

tarsisd2

12-09-2017 20:28

Re: Motd with snow effect, i'ts possible?

Quote:

Originally Posted by r3D w0LF (Post 2565256)

i did using this code with css and the snow worked, on the website i tested everything was ok but on motd it doesnt show the content with pictures and text, just the snow, maybe i did something wrong since i don't know too much about html and css

PHP Code:


		
			
<html>
<body>
<div id="snow">
</div>

<style>
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}    
</style>

<head> 
<body style="background-color: black;">
  <title>MERRY CHRISTMAS;</title> 
</head>  
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span 
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body> 
</html>

i tried to use the ones with javascript but it didnt work at all on motd, on th website was perfect

edit: i also tried to make a web page and put just the link on the motd but also did not work, the snow didn't have any animation on motd shile on the internet had

r3D w0LF

12-10-2017 12:24

Re: Motd with snow effect, i'ts possible?

A few tweaks were needed:

PHP Code:


		
			
<html>
<head>
<style>
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}    
</style> 
</head>  
<body style="background-color: black;">
<div id="snow" style="z-index:-1">
</div>
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body> 
</html>

This is the easiest render you are going to get:

PHP Code:


		
			
<html>
<head>
<style>
body {
background-image: url("http://animationsa2z.com/attachments/Image/snowy_backgrounds/snow1.gif");
background-repeat: repeat;
}
</style>
</head> 
<body style="background-color: black;">
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span 
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body>
</html>

But if the first one works, then go with it since it is waaaay better.

tarsisd2

12-10-2017 18:23

Re: Motd with snow effect, i'ts possible?

Quote:

Originally Posted by r3D w0LF (Post 2565447)

A few tweaks were needed:

PHP Code:


		
			
<html>
<head>
<style>
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}    
</style> 
</head>  
<body style="background-color: black;">
<div id="snow" style="z-index:-1">
</div>
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body> 
</html>

This is the easiest render you are going to get:

PHP Code:


		
			
<html>
<head>
<style>
body {
background-image: url("http://animationsa2z.com/attachments/Image/snowy_backgrounds/snow1.gif");
background-repeat: repeat;
}
</style>
</head> 
<body style="background-color: black;">
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span 
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body>
</html>

But if the first one works, then go with it since it is waaaay better.

the first one didn't work, got the effect but the text and picture didn't show

the second one worked fine, thanks a million

r3D w0LF

12-11-2017 15:04

Re: Motd with snow effect, i'ts possible?

Its such a pity as that effect shows but text doesnt. Maybe give this one a last try

PHP Code:


		
			
<html>
<head>
<style>
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:-1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}

center {
  z-index:10;
}

@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}    
</style> 
</head>  
<body style="background-color: black;">
<div id="snow">
</div>
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px; z-index:10;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body> 
</html>

tarsisd2

12-12-2017 11:10

Re: Motd with snow effect, i'ts possible?

Quote:

Originally Posted by r3D w0LF (Post 2565676)

Its such a pity as that effect shows but text doesnt. Maybe give this one a last try

PHP Code:


		
			
<html>
<head>
<style>
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:-1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}

center {
  z-index:10;
}

@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}    
</style> 
</head>  
<body style="background-color: black;">
<div id="snow">
</div>
  <title>MERRY CHRISTMAS;</title> 
<center> 
<h2 style="color: rgb(255, 66, 40);"><small><small><font 
 face="arial"><span style="color: rgb(0,255,0);"># MERRY CHRISTMAS #</span><br> 
</font></small></small></h2> 
<img style="border: 0px solid ; width: 411px; height: 175px; z-index:10;" 
 alt="" src="http://fastdownloadcs.tk/czero/feliznatalalpha.jpg"><br> 
<br> 
<small><span
 style="font-family: Arial; font-weight: bold; color: rgb(224, 65, 36);"><span 
 style="color: rgb(204, 204, 204); background-color: transparent;"><span 
 style="color: rgb(255,255,0);">ADD ON FAVORITES;</span><br> 
<span style="color: rgb(255, 255, 255);">SERVER IP</span><br> 
</span><span style="color: rgb(255, 255, 255);"><span 
 style="color: rgb(204, 204, 204);"></span></span></span></small></center> 
</body> 
</html>

still the effect but no text/picture

but i appreciate the help, your gif background gave me a few ideas for after christmas, like this one

https://media1.tenor.com/images/a5be...4548/tenor.gif

i'll add some text and a logo for my clan and some music on entrance, it will be so cool :wink:
thanks a million

edit: i will ask the guys in rehlds development if it is possible to implement javascript in motd since they are bringing a lot of new stuff, i might go back using in the future

Relaxing

12-18-2017 09:27

Re: Motd with snow effect, i'ts possible?

Quote:

Originally Posted by tarsisd2 (Post 2565787)

edit: i will ask the guys in rehlds development if it is possible to implement javascript in motd since they are bringing a lot of new stuff, i might go back using in the future

A better suggestion: HTML5?

Airkish

12-18-2017 11:17

Re: Motd with snow effect, i'ts possible?

MOTD has a limited characters count (iirc 1536)

Place html file in your web and in MOTD type link to your html file i.e. alliedmods.net/snow.html

All times are GMT -4. The time now is 05:34.

Page 1 of 2

Show 40 post(s) from this thread on one page