Date and time following mouse

Wave

Wavy

Text

Effect

Moving

Move

Automatic

Scrollbar

Textbox

Wind

Twinkle

Dropdown

List

Browser

Explorer

Histry

Back

Top

Title

Checkbox

Check

Uncheck

All

Written by @kerixa 21 August 2012

Using a specific style for the mouse will make your website more beautiful. In the following code date and time follows the mouse pointer in the form of a clock. In the center of this clock, date and time is located and around it, instead of hands, 3 strips are used around the clock which move forward in harmony with time. One is the second counter, the other is the minute counter and the last is the hour counter. This code actually combines digital and analog clocks and puts it with the date of the day in a beautiful manner.

Code Snippet:

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

<style>
/*oscar*/
body {
    margin: 0;
    background: green;
    height: 300px;
}

#oscar {
    width: 30px;
}
/*oscar*/
*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html, body {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #10191f;
    font-family: "Courgette", Monaco, Consolas, monospace;
    font-size: 30px;
    font-weight: normal;
    color: #20292f;
}

body:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("http://www.javascriptfreecode.com/files//abstract_wireframe.jpg");
    background-position: center bottom;
    background-size: cover;
    content: "";
    z-index: 1;
    opacity: 0.1;
}

.clock-wrap {
    position: relative;
    font-size: 2vw;
    height: 20vw;
    width: 20vw;
    z-index: 100;
}

@media only screen and (min-width: 420px) {
.clock-wrap {
    font-size: 2.5vh;
    height: 25vh;
    width: 25vh;
}
}

.clock-wrap .clock-day,
.clock-wrap .clock-date,
.clock-wrap .clock-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    white-space: nowrap;
}

.clock-wrap .clock-day {
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    letter-spacing: 0;
    font-size: 80%;
    color: #b3b3b3;
}

.clock-wrap .clock-date {
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    letter-spacing: 0;
    font-size: 70%;
    color: gray;
}

.clock-wrap .clock-time {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #35434d;
}

.clock-wrap .clock-time > span {
    padding: 0 0.05em;
}

.clock-wrap .clock-time .hours {
    color: OliveDrab;
}

.clock-wrap .clock-time .minutes {
    color: DeepPink;
}

.clock-wrap .clock-time .seconds {
    color: SteelBlue;
}

.clock-wrap svg {
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
}

.clock-wrap svg circle {
    position: relative;
    fill: none;
    stroke-linecap: round;
    transform-origin: center center;
    transform: rotate(-90deg);
}

.clock-wrap svg .track {
    z-index: 1;
    stroke-width: 16;
    stroke: #20292f;
}

.clock-wrap svg .path {
    z-index: 2;
    stroke-width: 16;
    transition: stroke-dashoffset 500ms ease-out;
}

.clock-wrap .clock-seconds .path {
    stroke: rgba(70, 130, 180, 0.8);
}

.clock-wrap .clock-minutes .path {
    stroke: rgba(255, 20, 147, 0.8);
}

.clock-wrap .clock-hours .path {
    stroke: rgba(107, 142, 35, 0.8);
}

.clock-wrap .clock-markers .dots {
    stroke-width: 16;
    stroke: #313e47;
}
</style>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Courgette'>
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="oscar" viewBox="0 0 391.837 391.837">

	<div class="clock-wrap">

		<div class="clock-day">
			<span class="day">...</span>
		</div>

		<div class="clock-date">
			<span class="date">...</span>
		</div>

		<div class="clock-time">
			<span class="hours">00</span>
			<span class="dots">:</span>
			<span class="minutes">00</span>
			<span class="dots">:</span>
			<span class="seconds">00</span>
			<span class="ampm">AM</span>
		</div>

		<svg width="100%" height="100%" viewBox="0 0 600 600">
			<g class="clock-seconds">
				<circle class="track" cx="300" cy="300" r="280" />
				<circle class="path" cx="300" cy="300" r="280" />
			</g>
			<g class="clock-minutes">
				<circle class="track" cx="300" cy="300" r="260" />
				<circle class="path" cx="300" cy="300" r="260" />
			</g>
			<g class="clock-hours">
				<circle class="track" cx="300" cy="300" r="240" />
				<circle class="path" cx="300" cy="300" r="240" />
			</g>
			<g class="clock-markers">
				<circle class="dots" cx="300" cy="300" r="210" />
			</g>
		</svg>

	</div>

  
</svg>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script>

(function () {
    const txtDay = document.querySelector('.clock-wrap .clock-day .day');
    const txtDate = document.querySelector('.clock-wrap .clock-date .date');
    const timeHours = document.querySelector('.clock-wrap .clock-time .hours');
    const timeMins = document.querySelector('.clock-wrap .clock-time .minutes');
    const timeSecs = document.querySelector('.clock-wrap .clock-time .seconds');
    const timeAmPm = document.querySelector('.clock-wrap .clock-time .ampm');
    const pathSecs = document.querySelector('.clock-wrap .clock-seconds .path');
    const pathMins = document.querySelector('.clock-wrap .clock-minutes .path');
    const pathHours = document.querySelector('.clock-wrap .clock-hours .path');
    const markDots = document.querySelector('.clock-wrap .clock-markers .dots');

    // add zero on left
    const pad = (num) => {
        return (num < 10) ? '0' + num : '' + num;
    };

    // calculate dash offset for a path
    const updatePath = (path, cur, max) => {
        const len = Math.floor(path.getTotalLength());
        const offset = Math.floor(len - (cur * len / max));
        path.style.strokeDasharray = len + ' ' + len;
        path.style.strokeDashoffset = offset;
    };

    // update clock text display
    const updateClock = (elm, num) => {
        elm.textContent = pad(num);
    };

    // update day of the week
    const updateDay = (date) => {
        let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        txtDay.textContent = days[date.getDay()];
    };

    // update full date
    const updateDate = (date) => {
        let month = pad(date.getMonth() + 1);
        let day = pad(date.getDate());
        let year = pad(date.getFullYear());
        txtDate.textContent = [month, day, year].join('/');
    };

    // add clock marks
    const addMarks = () => {
        const len = Math.floor(markDots.getTotalLength());
        markDots.style.strokeDasharray = 1 + ' ' + Math.floor(len / 12);
    };

    // get time and update stuff
    const updateTime = () => {
        let date = new Date();
        let secs = date.getSeconds();
        let mins = date.getMinutes();
        let fhours = date.getHours();
        let hours = (fhours >= 12) ? (fhours - 12) : fhours;

        updatePath(pathSecs, secs, 60);
        updatePath(pathMins, mins, 60);
        updatePath(pathHours, hours, 12);
        updateClock(timeHours, hours ? hours : 12);
        updateClock(timeMins, mins);
        updateClock(timeSecs, secs);
        updateClock(timeAmPm, (fhours < 12) ? 'am' : 'pm');
        updateDate(date);
        updateDay(date);
    };

    // update time on interval
    setInterval(updateTime, 1000);
    updateTime();
    addMarks();
})();
//oscar
console.clear();

var oscar = document.getElementById("wrapper");
document.addEventListener("mousemove", getMouse);


oscar.style.position = "absolute";
var oscarpos = { x: 0, y: 0 };

setInterval(followMouse, 50);

var mouse = { x: 0, y: 0 };
var dir = "right";

function getMouse(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;

    if (mouse.x > oscarpos.x) {
        dir = "right";
    } else {
        dir = "left";
    }
}

function followMouse() {
    var distX = mouse.x - oscarpos.x - 15;
    var distY = mouse.y - oscarpos.y - 10;
    //Easing motion
    //Progressive reduction of distance 
    oscarpos.x += distX / 5;
    oscarpos.y += distY / 2;

    oscar.style.left = oscarpos.x + "px";
    oscar.style.top = oscarpos.y + "px";


    //Apply css class 
    if (dir == "right") {
        oscar.setAttribute("class", "right");
    } else {
        oscar.setAttribute("class", "left");
    }

}

TweenMax.set('#wrapper', { perspective: 800, force3D: true, transformStyle: "preserve-3d" });
//oscar
</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Tags:

effect moving move automatic

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300