Almost every human begins especially the kids love the snow and it is one of the dream for everyone to see the snowfall — especially for the Indian, where snowfall is merely seen in the Northern region such as Kashmir, North Sikkim, Manali, Rohtang Pass, Gulmarg and Nainital etc. Here in this article we are not going to discuss about tourism or traveling, but we’ll learn — How to add snowfall effect to your WordPress powered website without using any plugin or much coding.
You can apply the snowfall effect on your WordPress website for the Desktop users, Mobile Users and even for the apps if you’ve build an app that enable your users-cum-visitor to access your website via a WebView based app. You can also restrict it i.e. — can only apply this effect for the Desktop users or Mobile users or vice-versa. I’ll recommend you to apply only for the desktop users since most of mobile browsers may not support this features. (You can see it here in action)
There are many free and pro WordPress plugins that offers the snowfall effect which is very easy to integrate as all you have to do is to search, install and activate, but in other hand it causes several problems like you’ve to regularly update it, it may slow down your website and may have security vulnerabilities.
In fact it is always advised to keep the minimum numbers of possible plugins in use and that’s the reason we are here going to apply the snowfall effect to your WordPress website or the blog without the use of any plugins.
Method 1 — Applying Snowfall Effect using cPanel/ FTP ?
To apply the snowfall effect using cPanel or FTP :
- Open the default directory of your WordPress theme (generally located at public_html/wp-content/themes/Name-of-Your-Default-Theme )
- Create a new file and name it as “snowfall.php“
- Once the file is created, edit it and add the following code
<style>
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
body {
background-color: #6b92b9;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
</style>
- Save the file and re-open your default theme directory
- Now edit the header.php file and add the below code just before the </head> section
- To apply the effect on the Desktop and Mobile browsers add this code
<?php include "snowfall.php" ?>
- To apply the effect only to the Desktop Browsers add the follow code
<?php
if(!wp_is_mobile()) { include "snowfall.php" }
?>
- To apply the effect only to the Mobile Browsers add the follow code
<?php
if(wp_is_mobile()) { include "snowfall.php" }
?>
- Now Save the header.php file and test your website
How applying Snowfall Effect using WordPress admin dashboard?
To apply snowfall effect using WordPress admin dashboard/ control panel :
- Login into your WordPress website with the account having admin or super-admin privilege
- Go to Apperances> Editor
- Select header.php from the right sidebar
- Add the below code just before the </head> section in your header.php file
<style>
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
body {
background-color: #6b92b9;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
</style>
The above code applies the snowfall effect to the Desktop and the Mobile browsers both. To apply it only to the desktop browsers add the below code instead of the above one :
<?php
if(!wp_is_mobile()) { ?>
<style>
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
body {
background-color: #6b92b9;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
</style>
<?php } ?>
To apply the snowfall effect only to the Mobile Browsers i.e. — users add this code :
<?php
if(wp_is_mobile()) { ?>
<style>
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
body {
background-color: #6b92b9;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
</style>
<?php } ?>
I’ve uploaded the demo here for the same which you may like 🙂 to test it out
