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.
To apply the snowfall effect using cPanel or FTP :
<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 include "snowfall.php" ?>
<?php if(!wp_is_mobile()) { include "snowfall.php" } ?>
<?php if(wp_is_mobile()) { include "snowfall.php" } ?>
To apply snowfall effect using WordPress admin dashboard/ control panel :
<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