<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<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'>JavaScript Best Codes</a>