Day And Night Toggle Using HTML CSS & Js With Source Code | CodeWithNinju

codewithninjuby 4 years ago   in Source Code 0 comments
chrome_IyHG4IvEfE

Day And Night Toggle Using HTML  CSS & Js With Source Code


chrome_IyHG4IvEfE






  • Source Code of Day And Night Toggle Are Below You can Copy Past It or You can download It Using Link 
  • Link is Given After This Code

  1. Index.html


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Day &amp; Night Toggle</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<label for="toggle">
<input type="checkbox" />
<svg viewBox="0 0 100 45" width="400" height="180">
<defs>
<!-- rectangle used for the background and re-used in the clip and mask elements -->
<rect id="background" x="0" y="0" width="90" height="40" rx="20"></rect>
<!-- clip cutting out the elements exceeding the rounded rectangle -->
<clipPath id="clip">
<use href="#background"></use>
</clipPath>
<!-- for the light variant -->
<!-- gradient used for the background -->
<linearGradient id="gradient-light" x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#8bc8f2" offset="0"></stop>
<stop stop-color="#fff" offset="1"></stop>
</linearGradient>
<!-- filter applied to (a copy of) the sun to blur the edges -->
<filter id="blur-light">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<!-- pattern for the waves -->
<pattern id="pattern-light" width="0.1" height="1" viewBox="0 0 10 45">
<path fill="#40b5f8" d="M 0 0 a 6 6 0 0 0 10 0 v 45 h -10 z"></path>
</pattern>
<!-- for the dark variant -->
<!-- gradient used for the background -->
<linearGradient id="gradient-dark" x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#1F2241" offset="0"></stop>
<stop stop-color="#7D59DF" offset="1"></stop>
</linearGradient>
<!-- gradient used for the the mask
the idea is to have the mask use the [#000-#fff] gradient to progressively hide the shapes as they approach the bottom
-->
<linearGradient id="gradient-mask" x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#000" offset="0"></stop>
<stop stop-color="#fff" offset="1"></stop>
</linearGradient>
<!-- mask to conceal the stars at the bottom of the toggle -->
<mask id="mask-dark">
<use fill="url(#gradient-mask)" href="#background"></use>
</mask>
<!-- gradients for the moon and craters -->
<radialGradient id="gradient-moon">
<stop stop-color="#fdfdfd" offset="0.7"></stop>
<stop stop-color="#e2e2e2" offset="1"></stop>
</radialGradient>
<radialGradient id="gradient-crater">
<stop stop-color="#e0e0e0" offset="0"></stop>
<stop stop-color="#d9d9d9" offset="1"></stop>
</radialGradient>
<!-- pattern for the stars -->
<pattern id="pattern-dark" width="0.2" height="1" viewBox="0 0 20 45">
<path fill="#fff" d="M 2 5 l 1 1 l -1 1 l -1 -1 l 1 -1"></path>
<path fill="#fff" d="M 10 16 l 1 1 l -1 1 l -1 -1 l 1 -1"></path>
<path fill="#fff" d="M 16 27 l 1 1 l -1 1 l -1 -1 l 1 -1"></path>
<path fill="#fff" d="M 10 38 l 1 1 l -1 1 l -1 -1 l 1 -1"></path>
</pattern>
</defs>
<!-- actual graphics
the idea is to include the elements for the light variant on top of the dark counterpart and change the opacity when the input is toggled
! beside changing the opacity of the .light elements the transition also affects the position of the sun/moon and of the patterns
-->
<g transform="translate(5 2.5)">
<g clip-path="url(#clip)">
<g class="dark">
<use fill="url(#gradient-dark)" href="#background"></use>
<!-- translate the stars above the toggle
! the change in y scale allows to transition the stars with a faster pace (see the CSS)
-->
<g class="background" transform="translate(0 -40) scale(1 0.4)">
<rect transform="translate(-40 0) rotate(4)" fill="url(#pattern-dark)" x="0" y="0" width="100" height="45"></rect>
</g>
<use mask="url(#mask-dark)" fill="url(#gradient-dark)" href="#background"></use>
</g>
<g class="light">
<use fill="url(#gradient-light)" href="#background"></use>
<!-- translate the waves above the toggle and reset their position with an opposite translation
by translating the first group to 0 (alongside the stars) the waves are pushed below
-->
<g class="background" transform="translate(-30 -20)">
<g transform="translate(30 20)">
<rect fill="url(#pattern-light)" x="-5" y="27.5" width="100" height="45"></rect>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(77.5 22.5)">
<!-- translate this group to move the sun/moon to the right -->
<g class="translate" transform="translate(-55)">
<!-- rotate this group to rotate the moon -->
<g class="rotate" transform="rotate(-100)">
<g class="dark">
<circle fill="url(#gradient-moon)" cx="0" cy="0" r="20.5"></circle>
<g transform="translate(-8 -7.5)">
<ellipse transform="rotate(-30)" fill="url(#gradient-crater)" stroke="#d5d5d5" stroke-width="0.2" cx="0" cy="0" rx="4" ry="3"></ellipse>
</g>
<g transform="translate(11 5)">
<ellipse fill="url(#gradient-crater)" stroke="#d5d5d5" stroke-width="0.2" cx="0" cy="0" rx="3.85" ry="4"></ellipse>
</g>
<g transform="translate(-6 12)">
<ellipse transform="rotate(-10)" fill="url(#gradient-crater)" stroke="#d5d5d5" stroke-width="0.2" cx="0" cy="0" rx="2" ry="1.75"></ellipse>
</g>
</g>
</g>
<g class="light">
<circle fill="#FFD21F" cx="0" cy="0" r="21" filter="url(#blur-light)"></circle>
<circle fill="#FFD21F" cx="0" cy="0" r="20.5"></circle>
</g>
</g>
</g>
</svg>
<script src="./script.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
// change the background of the page according to the value of the checkbox
const input = document.querySelector('input[type="checkbox"]');
function handleInput() {
const { checked } = this;
document.querySelector('body').style.background = checked ? '#151d29' : '#d6e7f7';
}
input.addEventListener('input', handleInput);
view raw script.js hosted with ❤ by GitHub
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: #151d29;
background: #d6e7f7;
color: hsl(0, 0%, 98%);
/* center the label in the viewport */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.75s ease-in-out;
}
/* absolute position the input element on top of the accompanying svg element */
label {
position: relative;
}
label input {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
opacity: 0;
}
label svg {
width: 350px;
height: auto;
display: block;
}
/* include transitions for the elements modified as the input is checked */
label input + svg .light {
transition: opacity 0.75s cubic-bezier(0.68, 0.25, 0.265, 1);
}
label input + svg .translate,
label input + svg .rotate,
label input + svg .background,
label input + svg .astronaut,
label input + svg .surfer {
transition: transform 0.75s cubic-bezier(0.68, 0.25, 0.265, 1);
}
/* make the .light element fully transparent to have the .dark variant see through */
label input:checked + svg .light {
opacity: 0;
}
/* translate the sun/moon toward the right (by default it is pushed back with a negative translation) */
label input:checked + svg .translate {
transform: translateX(0px);
}
/* rotate the moon (by default it is rotated counter-clockwise) */
label input:checked + svg .rotate {
transform: rotate(0deg);
}
/* translate the scale the backgrounds to 0
this is rather neat, so meant an extra comment
- the light background is positioned with two groups, one pushing it below the graphic, one back up; by removing the translation of this last group the background "returns" below the toggle
- the dark background is positioned above and with a smaller vertical scale; by removing the translation it is placed in full view and by increasing its scale it's as if the stars would tumble down with different rates
*/
label input:checked + svg .background {
transform: translate(0px) scale(1);
}
view raw style.css hosted with ❤ by GitHub

Tags:
codewithninju

You may also like:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
(C) Copyright 2020 CodeWithNinju, All rights reserved.