Raised This Month: $12 Target: $400
 3% 

Motd with snow effect, i'ts possible?


Post New Thread Reply   
 
Thread Tools Display Modes
Author Message
tarsisd2
Veteran Member
Join Date: Feb 2016
Location: brazil
Old 12-07-2017 , 16:14   Motd with snow effect, i'ts possible?
Reply With Quote #1

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
tarsisd2 is offline
Relaxing
AlliedModders Donor
Join Date: Jun 2016
Location: White Plains
Old 12-08-2017 , 07:13   Re: Motd with snow effect, i'ts possible?
Reply With Quote #2

Use javascript for snow environment.
__________________
Relaxing is offline
r3D w0LF
Senior Member
Join Date: Dec 2013
Location: Albania
Old 12-09-2017 , 13:08   Re: Motd with snow effect, i'ts possible?
Reply With Quote #3

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

Last edited by r3D w0LF; 12-09-2017 at 13:10.
r3D w0LF is offline
tarsisd2
Veteran Member
Join Date: Feb 2016
Location: brazil
Old 12-09-2017 , 20:28   Re: Motd with snow effect, i'ts possible?
Reply With Quote #4

Quote:
Originally Posted by r3D w0LF View Post
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
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{
    
backgroundnone;
    
font-familyAndrogyne;
    
background-imageurl('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');
    
height100%;
    
left0;
    
positionabsolute;
    
top0;
    
width100%;
    
z-index:1;
    -
webkit-animationsnow 10s linear infinite;
    -
moz-animationsnow 10s linear infinite;
    -
ms-animationsnow 10s linear infinite;
    
animationsnow 10s linear infinite;
}
@
keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
moz-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position400px 1000px200px 400px100px 300px;}
}
@-
webkit-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
ms-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 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

Last edited by tarsisd2; 12-09-2017 at 20:34. Reason: edit
tarsisd2 is offline
r3D w0LF
Senior Member
Join Date: Dec 2013
Location: Albania
Old 12-10-2017 , 12:24   Re: Motd with snow effect, i'ts possible?
Reply With Quote #5

A few tweaks were needed:
PHP Code:
<html>
<
head>
<
style>
#snow{
    
backgroundnone;
    
font-familyAndrogyne;
    
background-imageurl('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');
    
height100%;
    
left0;
    
positionabsolute;
    
top0;
    
width100%;
    
z-index:1;
    -
webkit-animationsnow 10s linear infinite;
    -
moz-animationsnow 10s linear infinite;
    -
ms-animationsnow 10s linear infinite;
    
animationsnow 10s linear infinite;
}
@
keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
moz-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position400px 1000px200px 400px100px 300px;}
}
@-
webkit-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
ms-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 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-imageurl("http://animationsa2z.com/attachments/Image/snowy_backgrounds/snow1.gif");
background-repeatrepeat;
}
</
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.

Last edited by r3D w0LF; 12-10-2017 at 12:26.
r3D w0LF is offline
tarsisd2
Veteran Member
Join Date: Feb 2016
Location: brazil
Old 12-10-2017 , 18:23   Re: Motd with snow effect, i'ts possible?
Reply With Quote #6

Quote:
Originally Posted by r3D w0LF View Post
A few tweaks were needed:
PHP Code:
<html>
<
head>
<
style>
#snow{
    
backgroundnone;
    
font-familyAndrogyne;
    
background-imageurl('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');
    
height100%;
    
left0;
    
positionabsolute;
    
top0;
    
width100%;
    
z-index:1;
    -
webkit-animationsnow 10s linear infinite;
    -
moz-animationsnow 10s linear infinite;
    -
ms-animationsnow 10s linear infinite;
    
animationsnow 10s linear infinite;
}
@
keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
moz-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position400px 1000px200px 400px100px 300px;}
}
@-
webkit-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
ms-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 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-imageurl("http://animationsa2z.com/attachments/Image/snowy_backgrounds/snow1.gif");
background-repeatrepeat;
}
</
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

Last edited by tarsisd2; 12-10-2017 at 18:24. Reason: bug
tarsisd2 is offline
r3D w0LF
Senior Member
Join Date: Dec 2013
Location: Albania
Old 12-11-2017 , 15:04   Re: Motd with snow effect, i'ts possible?
Reply With Quote #7

Its such a pity as that effect shows but text doesnt. Maybe give this one a last try
PHP Code:
<html>
<
head>
<
style>
#snow{
    
backgroundnone;
    
font-familyAndrogyne;
    
background-imageurl('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');
    
height100%;
    
left0;
    
positionabsolute;
    
top0;
    
width100%;
    
z-index:-1;
    -
webkit-animationsnow 10s linear infinite;
    -
moz-animationsnow 10s linear infinite;
    -
ms-animationsnow 10s linear infinite;
    
animationsnow 10s linear infinite;
}

center {
  
z-index:10;
}

@
keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
moz-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position400px 1000px200px 400px100px 300px;}
}
@-
webkit-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
ms-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 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
r3D w0LF is offline
tarsisd2
Veteran Member
Join Date: Feb 2016
Location: brazil
Old 12-12-2017 , 11:10   Re: Motd with snow effect, i'ts possible?
Reply With Quote #8

Quote:
Originally Posted by r3D w0LF View Post
Its such a pity as that effect shows but text doesnt. Maybe give this one a last try
PHP Code:
<html>
<
head>
<
style>
#snow{
    
backgroundnone;
    
font-familyAndrogyne;
    
background-imageurl('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');
    
height100%;
    
left0;
    
positionabsolute;
    
top0;
    
width100%;
    
z-index:-1;
    -
webkit-animationsnow 10s linear infinite;
    -
moz-animationsnow 10s linear infinite;
    -
ms-animationsnow 10s linear infinite;
    
animationsnow 10s linear infinite;
}

center {
  
z-index:10;
}

@
keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
moz-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position400px 1000px200px 400px100px 300px;}
}
@-
webkit-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 400px, -100px 300px;}
}
@-
ms-keyframes snow {
  
0% {background-position0px 0px0px 0px0px 0px;}
  
50% {background-position500px 500px100px 200px, -100px 150px;}
  
100% {background-position500px 1000px200px 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



i'll add some text and a logo for my clan and some music on entrance, it will be so cool
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

Last edited by tarsisd2; 12-12-2017 at 11:18. Reason: see above
tarsisd2 is offline
Relaxing
AlliedModders Donor
Join Date: Jun 2016
Location: White Plains
Old 12-18-2017 , 09:27   Re: Motd with snow effect, i'ts possible?
Reply With Quote #9

Quote:
Originally Posted by tarsisd2 View Post
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?
__________________
Relaxing is offline
Airkish
AlliedModders Donor
Join Date: Apr 2016
Location: Lithuania
Old 12-18-2017 , 11:17   Re: Motd with snow effect, i'ts possible?
Reply With Quote #10

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
__________________
Airkish is offline
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -4. The time now is 10:47.


Powered by vBulletin®
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Theme made by Freecode