Dew Drops
Written by 21 August 2012
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.
Code Snippet:
<!-- 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>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Laxsan_victor, BEINVENUDO, CryptoTech, AstroAudrey, admin_js
