Javascript Code: Dew Drops

You can use special animations and styles for different parts of your webpage to beautify your website. One of these animations is in the following code which creates dewdrops on your web page which slides down in page, like a morning dew that sits on the glass.
<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
.magnify-container {
    border: 1px solid #ccc;
    margin: auto;
    position: relative;
}

.magnify-container .magnify-glass {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    z-index: 999;
}

.magnify-container .magnify-image {
    width: 100%;
    height: 100%;
}


body {
    position: relative;
    padding-top: 50px;
}

#example2,
#example3,
#example4 {
    width: 200px;
}

#example3 .magnify-glass {
    width: 800px;
    height: 600px;
}

#example4 .magnify-glass {
    width: 300px;
    height: 300px;
}

.chk {
    background: rgba(0,250,255,.09);
}
/*-----------------*/
.dropmd {
    position: absolute;
    /*float:left;*/
    z-index: 100001;
    display: block;
    height: 45px;
    margin-top: 6%;
    margin-left: 5%;
    border-radius: 50%;
    background: rgba(05,255,255,.05) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%);
    box-shadow: inset 0 -1px 7px rgba(0,0,0,.2), inset 0 -5px 6px rgba(0,0,0,.4), inset 0 1px 3px rgba(0,0,0,.3), inset 0 1px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.2);
    /*  -webkit-transition: margin 1s ease;
    -moz-transition: margin 1s ease;
    -o-transition: margin 1s ease;
    -ms-transition: margin 1s ease;
        transition: margin 1s ease;
*/
}
/*-----------*/
.dropfall {
    -webkit-animation: dropfall 5s ease-in 2s infinite;
    -moz-animation: dropfall 5s ease-in 2s infinite;
    animation: dropfall 5s ease-out 2s infinite;
}

.dropfall2 {
    -webkit-animation: dropfall 7s ease 3s infinite;
    -moz-animation: dropfall 7s ease 3s infinite;
    animation: dropfall 7s ease 7s infinite;
}

.dropfall3 {
    -webkit-animation: dropfall 11s ease 5s infinite;
    -moz-animation: dropfall 11s ease 5s infinite;
    animation: dropfall 11s ease 5s infinite;
}

@keyframes dropfall {
0% {
    transform: scale(.1);
    margin-top: 4%;
    border-radius: 50%;
}

10% {
    height: 30px;
    transform: scale(.3);
    margin-top: 10%;
    border-radius: 50%;
}

25% {
    height: 45px;
    transform: scale(.6);
    margin-top: 15%;
    border-radius: 65%;
}

35% {
    height: 55px;
    transform: scale(.7);
    margin-top: 20%;
    border-radius: 65%;
}

50% {
    height: 55px;
    transform: scale(.8);
    margin-top: 30%;
    border-radius: 70%;
}

70% {
    height: 65px;
    transform: scale(.9);
    margin-top: 50%;
    border-radius: 75%;
}

85% {
    height: 75px;
    transform: scale(.9);
    margin-top: 70%;
    border-radius: 75%;
}

100% {
    height: 35px;
    transform: scale(1.7);
    margin-top: 95%;
    border-radius: 75%;
}
}

/*--- ticker */
@-webkit-keyframes ticker {
0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
}

@keyframes ticker {
0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
}

.ticker-wrap {
    position: relative;
    /*bottom: 10px;*/
    width: 100%;
    overflow: hidden;
    height: auto;
    background-color: salmon;
    padding-left: 100%;
    padding-bottom: 20px;
}

.ticker {
    display: inline-block;
    height: auto;
    line-height: 30px;
    white-space: nowrap;
    padding-right: 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
}

.ticker__item {
    display: inline-block;
    padding: 0 5px;
    font-size: 20px;
    color: white;
}
/* ticker idea by lewismcarey -----**/
</style>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<div class="container">
<div class="row">
    <span class="dropmd dropfall2"></span>
    <span class="dropmd dropfall3" style="margin-left:5%;margin-top:10%;width:5px;"></span>
    <span class="dropmd dropfall" style="margin-left:30%;margin-top:10%;width:20px;"></span>
    <span class="dropmd dropfall" style="margin-left:15%;margin-top:15%;width:15px;"></span>
    <span class="dropmd dropfall3" style="margin-left:35%;margin-top:20%;width:10px;"></span>
     <span class="dropmd dropfall2"></span>
    <span class="dropmd dropfall3" style="margin-left:55%;margin-top:10%;width:5px;"></span>
    <span class="dropmd dropfall" style="margin-left:70%;margin-top:10%;width:20px;"></span>
    <span class="dropmd dropfall" style="margin-left:65%;margin-top:15%;width:15px;"></span>
    <span class="dropmd dropfall3" style="margin-left:75%;margin-top:20%;width:10px;"></span>
       <span class="dropmd dropfall3" style="margin-left:95%;margin-top:10%;width:5px;"></span>
    <div class="col-md-3">
    <span class="dropmd dropfall" style="margin-left:15%;margin-top:15%;width:15px;"></span>
    <span class="dropmd dropfall3" style="margin-left:35%;margin-top:20%;width:10px;"></span>
    </div>

</div> 
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script>
(function () {
    'use strict';

    var magnify = angular.module('ngMagnify', []);

    magnify.directive('ngMagnify', function () {
        return {
            restrict: 'EA',
            replace: true,
            template: '<div class="magnify-container" data-ng-style="getContainerStyle()">' +
                '<div class="magnify-glass" data-ng-style="getGlassStyle()"></div>' +
                '<img class="magnify-image" data-ng-src="{{ imageSrc }}"/>' +
                '</div>',
            scope: {
                imageSrc: '@',
                imageWidth: '=',
                imageHeight: '=',
                glassWidth: '=',
                glassHeight: '='
            },
            link: function (scope, element) {
                var glass = element.find('div'),
                    image = element.find('img'),
                    el, nWidth, nHeight, magnifyCSS;

                // if touch devices, do something
                if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
                    return;
                }
                element.on('mouseenter', function () {
                    el = angular.extend(scope.getOffset(element[0]), {
                        width: element[0].offsetWidth,
                        height: element[0].offsetHeight,
                        imageWidth: image[0].offsetWidth,
                        imageHeight: image[0].offsetHeight,
                        glassWidth: glass[0].offsetWidth,
                        glassHeight: glass[0].offsetHeight
                    });
                })
                    .on('mousemove', function (evt) {
                        magnifyCSS = scope.magnify(evt);

                        if (magnifyCSS) {
                            glass.css(magnifyCSS);
                        }
                    })
                    .on('mouseout', function () {
                        glass.on('mouseleave', function () {
                            glass.css({
                                opacity: 0,
                                filter: 'alpha(opacity=0)'
                            });
                        });
                    });

                scope.magnify = function (evt) {
                    var mx, my, rx, ry, px, py, bgp, img;

                    if (!nWidth && !nHeight) {
                        img = new Image();
                        img.onload = function () {
                            nWidth = img.width;
                            nHeight = img.height;
                        };
                        img.src = scope.imageSrc;
                    } else {
                        // IE8 uses evt.x and evt.y
                        mx = (evt.pageX) ? (evt.pageX - el.left) : evt.x;
                        my = (evt.pageY) ? (evt.pageY - el.top) : evt.y;

                        if (mx < el.width && my < el.height && mx > 0 && my > 0) {
                            glass.css({
                                opacity: 1,
                                'z-index': 1,
                                filter: 'alpha(opacity=100)'
                            });
                        } else {
                            glass.css({
                                opacity: 0,
                                'z-index': -1,
                                filter: 'alpha(opacity=0)'
                            });
                            return;
                        }

                        rx = Math.round(mx / el.imageWidth * nWidth - el.glassWidth / 2) * -1;
                        ry = Math.round(my / el.imageHeight * nHeight - el.glassHeight / 2) * -1;
                        bgp = rx + 'px ' + ry + 'px';

                        px = mx - el.glassWidth / 2;
                        py = my - el.glassHeight / 2;

                        return { left: px + 'px', top: py + 'px', backgroundPosition: bgp };
                    }
                    return;
                };

                scope.getOffset = function (el) {
                    var offsetLeft = 0,
                        offsetTop = 0;

                    while (el) {
                        if (!isNaN(el.offsetLeft)) {
                            offsetLeft += el.offsetLeft;
                            offsetTop += el.offsetTop;
                        }
                        el = el.offsetParent;
                    }

                    return {
                        left: offsetLeft,
                        top: offsetTop
                    };
                };

                scope.getContainerStyle = function () {
                    return {
                        width: (scope.imageWidth) ? scope.imageWidth + 'px' : '',
                        height: (scope.imageHeight) ? scope.imageHeight + 'px' : ''
                    };
                };

                scope.getGlassStyle = function () {
                    return {
                        background: 'url(' + scope.imageSrc + ') no-repeat',
                        width: (scope.glassWidth) ? scope.glassWidth + 'px' : '',
                        height: (scope.glassHeight) ? scope.glassHeight + 'px' : ''
                    };
                };
            }
        };
    });
})();

var app = angular.module('demoapp', ['ngMagnify']);
app.controller('ExampleCtrl', ['$scope', function ($scope) {
}]);
</script><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Tags: effect, move, dropdown
Javascript Best Codes

Javascript Code: Dew Drops

Links
