HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Day and Night</title>
<script src='http://libs.itshubao.com/other/TweenMax.min.js'></script>
</head>
<body>
<!-- start of container -->
<div id="background" class="container">
<!-- svg file -->
<svg id="svgout" height= '100%' width= '100%' viewBox= "0 0 550 400" preserveAspectRatio = "true" >
<defs>
<g id="bottomShadow">
<path fill="#000000" stroke="none" d="
M 270.5 225.95
L 127.35 316.65 266.8 400 409.6 309.25 270.5 225.95 Z"/>
</g>
<g id="Layer52_0_FILL">
<path class="topGrass" fill="#B9D668" stroke="none" d="
M 397.85 229.3
L 397.85 225.6 269.85 152 135.75 228.6 135.75 233.65 262.1 306.55 397.85 229.3 Z"/>
</g>
<g id="Layer51_0_FILL">
<path class="leftSideGrass" fill="#6E9E4F" stroke="none" d="
M 135.1 229.95
L 135.1 256.85 262.1 328.4 262.1 301.85 135.1 229.95 Z"/>
</g>
<g id="Layer50_0_FILL">
<path class="rightGrassTop" fill="#8CB154" stroke="none" d="
M 397.85 225.95
L 395.8 225.95 261.75 301.55 261.75 328.4 397.85 251.15 397.85 225.95 Z"/>
</g>
<g id="Layer48_0_FILL">
<path class="crustLeftTop" fill="#955541" stroke="none" d="
M 135.45 282.4
L 135.75 298.15 262.1 372.1 261.75 355.65 135.45 282.4 Z"/>
</g>
<g id="Layer47_0_FILL">
<path class="middleLeftCrust" fill="#C77E61" stroke="none" d="
M 135.1 270.3
L 135.1 283.05 275.9 364.35 271.85 348.9 135.1 270.3 Z"/>
</g>
<g id="Layer46_0_FILL">
<path class="crustLeftTop" fill="#955541" stroke="none" d="
M 135.1 255.15
L 135.1 270.3 262.1 343.55 262.1 328.05 135.1 255.15 Z"/>
</g>
<g id="Layer45_0_FILL">
<path class="topRightCrust" fill="#A47237" stroke="none" d="
M 397.5 294.5
L 397.5 277 261.75 355.3 261.75 372.75 397.5 294.5 Z"/>
</g>
<g id="Layer44_0_FILL">
<path class="middleRightCrust" fill="#C89451" stroke="none" d="
M 397.5 269.95
L 397.15 266.6 262.1 343.2 262.1 355.95 397.5 279.7 397.5 269.95 Z"/>
</g>
<g id="Layer43_0_FILL">
<path class="topRightCrust" fill="#A47237" stroke="none" d="
M 397.5 266.6
L 397.5 250.45 261.75 328.4 261.75 343.85 397.5 266.6 Z"/>
</g>
<g id="Layer41_0_FILL">
<path class="greyRoad" fill="#B2B2B1" stroke="none" d="
M 295.05 283.05
Q 299.05 280.35 308.45 275.3 317.85 269.95 323.6 266.9
L 268.8 233.65 338.05 191.35 309.15 174.55 177.75 254.5
Q 191.55 262.2 198.25 266.25 204.65 269.95 209.7 271.95
L 241.6 250.45 295.05 283.05 Z"/>
</g>
<g id="Layer40_0_FILL">
<path fill="#FFFFFF" stroke="none" d="
M 199.95 256.85
Q 194.55 261.2 191.9 262.2
L 194.9 263.9 200.95 259.2 199.95 256.85
M 225.8 243.75
L 224.8 241.75 211.05 250.8 212.05 252.8 225.8 243.75
M 308.15 275.65
L 296.7 266.6 295.35 268.6 306.8 277.7 308.15 275.65
M 275.9 253.5
L 274.55 255.5 285.95 264.55 287.3 262.55 275.9 253.5
M 251.7 227.3
L 250.7 225.25 236.9 234.35 237.9 236.35 251.7 227.3
M 257.05 240.7
L 254.05 240.7 268.8 249.8 269.5 247.75 257.05 240.7
M 277.2 207.8
L 263.45 216.85 264.45 218.9 278.25 209.8 277.2 207.8
M 305.1 192.65
L 304.1 190.65 290.3 199.75 291.35 201.75 305.1 192.65 Z"/>
</g>
<g id="Layer38_0_FILL">
<path class="frontFascia" fill="#ECB27B" stroke="none" d="
M 359.25 187.95
L 346.4 174.95 333.85 202.9 359.25 187.95 Z"/>
</g>
<g id="Layer37_0_FILL">
<path class="frontWall" fill="#EFA258" stroke="none" d="
M 334 201.05
L 334.35 232 359.2 217.55 359.25 187.95 334 201.05 Z"/>
</g>
<g id="Layer36_0_FILL">
<path class="leftWall" fill="#C57F42" stroke="none" d="
M 334.35 232.3
L 334.35 205.1 305.1 191.35 305.1 216.85 334.35 232.3 Z"/>
</g>
<g id="Layer35_0_FILL">
<path class="rightRoof" fill="#EF4427" stroke="none" d="
M 329.7 167.9
L 331.05 167.9 344.55 176.7 347.85 176.7 363 192.25 363.15 189.55 350.65 176.7 350.55 176.7 334.25 167.5 334.25 159.1 329.7 159.1 329.7 164.9 322.65 160.95 322.3 162.15 329.7 167 329.7 167.9 Z"/>
</g>
<g id="Layer34_0_FILL">
<path class="leftRoof" fill="#F2563B" stroke="none" d="
M 334.05 207.05
L 350.65 176.7 322.1 160.45 302.1 192.05 334.05 207.05 Z"/>
</g>
<g id="Layer30_0_FILL">
<path id="windowFour" class="windows" stroke="none" fill="#975A42" d="
M 341.35 203.3
Q 340.9 203.45 340.5 203.8 340.1 204.2 339.85 204.75 339.7 205 339.7 205.3 339.6 205.75 339.7 206.1 339.7 206.15 339.7 206.2 339.8 206.5 340 206.8 340.55 207.4 341.45 207.4 342.35 207.4 343 206.8 343.4 206.5 343.65 206.1 343.85 205.75 343.95 205.3 344.05 204.4 343.55 203.8 343.3 203.45 343 203.3 342.65 203.15 342.2 203.15 341.8 203.15 341.35 203.3
M 355.85 198.45
Q 355.8 198.2 355.6 198 355.1 197.4 354.2 197.4 353.35 197.4 352.6 198 351.85 198.65 351.7 199.55 351.7 199.7 351.7 199.85 351.6 200.5 352 201.05 352.55 201.65 353.45 201.65 354.3 201.65 355.05 201.05 355.45 200.7 355.7 200.25 355.8 200.05 355.9 199.85 355.95 199.7 355.95 199.55 356.05 198.95 355.85 198.45 Z"/>
<path class="door" fill="#B65041" stroke="none" d="
M 351.95 211.2
L 351.8 211.2 346.05 215.1 346.05 225.2 351.95 221.6 351.95 211.2
M 351.2 211.2
L 351.35 211.2 351.35 211.1 351.2 211.2 Z"/>
</g>
<g>
<path id="Layer30_0_FILL" fill="#000000" fill-opacity="1" stroke="none" d="
M 183.7 215.3
L 183.7 215.6
Q 187.25 231.75 212.25 234.35
L 183.7 215.3 Z"/>
</g>
<g id="Layer29_0_FILL">
<path fill="#000000" fill-opacity="0.4" stroke="none" d="
M 305.1 216.85
L 305.15 217.2
Q 309.45 233.2 334.35 232.3
L 305.1 216.85 Z"/>
</g>
<g id="Layer27_0_FILL">
<path class="vegetation" fill="#78A950" stroke="none" d="
M 177.45 231.65
Q 175.75 235.35 181.8 239.35 185.5 235.7 185.15 231.3 182.8 230.65 181.45 234 179.45 231.3 177.45 231.65
M 236.9 266.6
Q 235.2 270.3 241.25 274.3 244.95 270.6 244.65 266.25 242.3 265.6 240.95 268.95 238.9 266.25 236.9 266.6
M 254.7 277
Q 253.05 280.7 259.1 284.75 262.75 281.05 262.45 276.65 260.1 276 258.75 279.35 256.7 276.65 254.7 277
M 315.5 245.75
Q 313.5 243.05 311.5 243.4 309.8 247.1 315.85 251.15 319.55 247.45 319.2 243.05 316.85 242.4 315.5 245.75
M 295.35 232.65
Q 293.7 236.35 299.75 240.4 303.45 236.7 303.1 232.3 300.75 231.65 299.4 235 297.4 232.3 295.35 232.65
M 277.2 171.85
Q 275.55 175.55 281.6 179.55 285.3 175.85 284.95 171.5 282.6 170.85 281.25 174.2 279.25 171.5 277.2 171.85 Z"/>
</g>
<g id="Layer26_0_FILL">
<path class="treeWood" fill="#AE663D" stroke="none" d="
M 175.1 177.55
L 172.05 177.55 172.05 191.1 159.3 172.85
Q 154.6 171.5 172.05 195.7
L 172.05 212.5 175.1 212.5 175.1 177.55
M 252.7 151.35
L 249 151.35 249 176.9 252.7 176.9 252.7 151.35 Z"/>
</g>
<g id="Layer25_0_FILL">
<path class="vegetation" fill="#77A951" stroke="none" d="
M 192.55 179.55
Q 200.95 173.5 200.95 165.1 200.95 156.4 192.55 150 184.15 144.3 172.05 144.3 160.3 144.3 151.9 150 143.15 156.4 143.15 165.1 143.15 173.5 151.9 179.55 160.3 185.95 172.05 185.95 184.15 185.95 192.55 179.55
M 236.25 106.65
Q 230.2 116.05 230.2 129.15 230.2 142.25 236.25 151.35 242.3 160.75 250.7 160.75 258.75 160.75 264.8 151.35 270.85 142.25 270.85 129.15 270.85 116.05 264.8 106.65 258.75 97.6 250.7 97.6 242.3 97.6 236.25 106.65 Z"/>
</g>
<g id="Layer24_0_FILL">
<path class="vegetation" fill="#77A951" stroke="none" d="
M 158.3 221.9
Q 160.65 221.9 161.95 220.2 163 219.55 163.3 218.55 164.65 218.9 166.35 218.9 170.05 218.9 172.4 216.2 175.1 213.85 175.1 210.15 175.1 206.45 172.4 203.75 170.05 201.4 166.35 201.4 162.65 201.4 159.95 203.75 157.6 206.45 157.6 210.15 157.6 210.8 157.6 211.15 155.95 211.5 154.6 212.5 152.9 214.15 152.9 216.55 152.9 218.9 154.6 220.2 156.25 221.9 158.3 221.9
M 338.35 240.05
Q 341.05 237.7 341.05 234 341.05 230.3 338.35 227.6 336 225.25 332.3 225.25 328.65 225.25 325.95 227.6 323.6 230.3 323.6 234 323.6 237.7 325.95 240.05 328.65 242.75 332.3 242.75 336 242.75 338.35 240.05 Z"/>
</g>
<g id="Layer22_0_FILL">
<path class="rightRoof" fill="#D05041" stroke="none" d="
M 220 173.85
L 236.8 186.7 264.35 171.15 244.5 159.55 220 173.85 Z"/>
</g>
<g id="Layer21_0_FILL">
<path class="leftWall" fill="#C57F42" stroke="none" d="
M 212.25 191.35
L 183.35 172.3 183.7 215.3 212.25 234.35 212.25 191.35 Z"/>
</g>
<g id="Layer20_0_FILL">
<path class="rightRoof" fill="#EF4427" stroke="none" d="
M 192.1 149.85
L 236.45 174.8 243.1 171.4
Q 220.05 150.55 196.3 139.95
L 192.1 149.85 Z"/>
</g>
<g id="Layer19_0_FILL">
<path class="frontFascia" fill="#EBB17B" stroke="none" d="
M 226.85 160.95
L 212 190.6 229.75 192.6 239.75 172.85 226.85 160.95 Z"/>
</g>
<g id="Layer18_0_FILL">
<path class="frontWall" fill="#EFA258" stroke="none" d="
M 240.15 172.65
L 211.9 191.6 212.25 233.65 264.35 201.7 264.35 170.8 240.8 184.45 240.15 172.65 Z"/>
</g>
<g id="Layer17_0_FILL">
<path class="rightRoof" fill="#EF4427" stroke="none" d="
M 210.9 142.2
L 205.9 142.2 205.9 152.65 210.9 152.65 210.9 142.2 Z"/>
</g>
<g>
<path id="Layer16_0_FILL" class="leftRoof" fill="#F2563B" stroke="none" d="
M 210.25 195.5
L 227.4 160.95 195.45 141.35 177.65 175.85 210.25 195.5 Z"/>
</g>
<g>
<path id="sun" fill="#E3BD0E" stroke="none" d="
M 257.05 15.95
Q 251.7 15.95 248 19.65 244.3 23.35 244.3 28.7 244.3 34.1 248 37.8 251.7 41.5 257.05 41.5 262.45 41.5 266.15 37.8 269.85 34.1 269.85 28.7 269.85 23.35 266.15 19.65 262.45 15.95 257.05 15.95 Z"/>
</g>
<g id="Layer8_0_FILL">
<path fill="#975A42" stroke="none" d="
M 238.45 189.65
Q 238.295703125 189.362109375 238.05 189.1 237.35 188.3 236.2 188.3 235.05 188.3 234.15 189.1 233.3 189.9 233.2 191.05 233.1 192.2 233.8 193 234.55 193.8 235.7 193.8 236.85 193.8 237.7 193 238.1970703125 192.558203125 238.45 192 238.6552734375 191.56484375 238.7 191.05 238.7671875 190.276953125 238.45 189.65
M 220.55 197.55
Q 220 197.55 219.5 197.75 218.95 197.95 218.5 198.35 217.933203125 198.8833984375 217.7 199.55 217.5833984375 199.916796875 217.55 200.3 217.4923828125 200.96171875 217.7 201.5 217.852734375 201.9103515625 218.15 202.25 218.95 203.05 220.1 203.05 221.25 203.05 222.05 202.25 222.95 201.45 223.05 200.3 223.15 199.15 222.4 198.35 222.05 197.95 221.65 197.75 221.15 197.55 220.55 197.55 Z"/>
</g>
<g id="Layer7_0_FILL">
<path class="door" fill="#B65041" stroke="none" d="
M 233.55 206.75
L 225.9 211.95 226.25 225.5 233.95 220.35 233.55 206.75 Z"/>
</g>
<g>
<path id="windowOne" class="windows" fill="#975A42" stroke="none" d="
M 188.65 198.4
L 188.8 204.1 198.65 210.45 198.55 204.75 188.65 198.4
M 208.45 216.8
L 208.35 211.1 198.55 204.75 198.65 210.45 208.45 216.8
M 188.8 204.1
L 188.95 209.8 198.8 216.15 198.65 210.45 188.8 204.1
M 208.6 222.5
L 208.45 216.8 198.65 210.45 198.8 216.15 208.6 222.5 Z"/>
</g>
<g>
<path id="windowThree" class="windows" fill="#975A42" stroke="none" d="
M 311.7 214.1
L 318.55 217.55 318.45 211.9 311.6 208.45 311.7 214.1
M 325.4 221
L 325.25 215.35 318.45 211.9 318.55 217.55 325.4 221
M 318.4 206.2
L 311.5 202.75 311.6 208.45 318.45 211.9 318.4 206.2
M 325.25 215.35
L 325.2 209.7 318.4 206.2 318.45 211.9 325.25 215.35 Z"/>
</g>
<g id="Layer2_0_FILL">
<path class="door" fill="#B65041" stroke="none" d="
M 259.7 183.25
L 244.6 191.9 244.6 213.8 259.7 204.55 259.7 183.25 Z"/>
</g>
<path id="windowTwo" fill="#975A42" class="windows" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" d="
M 223.05 200.3
Q 222.95 201.45 222.05 202.25 221.25 203.05 220.1 203.05 218.95 203.05 218.15 202.25 217.852734375 201.9103515625 217.7 201.5 217.4923828125 200.96171875 217.55 200.3 217.5833984375 199.916796875 217.7 199.575 217.933203125 198.8833984375 218.5 198.35 218.95 197.95 219.5 197.75 220 197.55 220.55 197.55 221.15 197.55 221.65 197.75 222.05 197.95 222.4 198.35 223.15 199.15 223.05 200.3 Z
M 238.7 191.05
Q 238.6552734375 191.56484375 238.45 192 238.1970703125 192.558203125 237.7 193 236.85 193.8 235.7 193.8 234.55 193.8 233.8 193 233.1 192.2 233.2 191.05 233.3 189.9 234.15 189.1 235.05 188.3 236.2 188.3 237.35 188.3 238.05 189.1 238.295703125 189.362109375 238.45 189.65 238.7671875 190.276953125 238.7 191.05 Z"/>
<path fill="#F2563B" stroke="none" d=" M 351.95 211.2 L 351.8 211.2 346.05 215.1 346.05 225.2 351.95 221.6 351.95 211.2 Z"/>
<path id="Layer6_0_1_STROKES" class="windowRims" stroke="#AE663D" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 198.55 204.75
L 208.35 211.1 208.45 216.8 208.6 222.5 198.8 216.15 188.95 209.8 188.8 204.1 188.65 198.4 198.55 204.75 198.65 210.45 208.45 216.8
M 198.8 216.15
L 198.65 210.45 188.8 204.1"/>
<path id="Layer5_0_1_STROKES" class="windowRims" stroke="#AE663D" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 325.25 215.35
L 325.4 221 318.55 217.55 311.7 214.1 311.6 208.45 311.5 202.75 318.4 206.2 325.2 209.7 325.25 215.35 318.45 211.9 318.55 217.55
M 318.4 206.2
L 318.45 211.9 311.6 208.45"/>
</defs>
<g id="shadow">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#bottomShadow"/>
</g>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#sun"/>
</g>
<g id="earth">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer52_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer51_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer50_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer48_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer47_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer46_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer45_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer44_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer43_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer41_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer40_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer38_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer37_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer36_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer35_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer34_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#windowFour"/>
<use class="element" xlink:href="#Layer32_0_1_STROKES"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer30_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer27_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer26_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer25_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer24_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer22_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer21_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer20_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer19_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer18_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer17_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer16_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer8_0_FILL"/>
<use class="element" xlink:href="#windowTwo"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer7_0_FILL"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#windowOne"/>
<use class="element" xlink:href="#Layer6_0_1_STROKES"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#windowThree"/>
<use class="element" xlink:href="#Layer5_0_1_STROKES"/>
</g>
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use class="element" xlink:href="#Layer2_0_FILL"/>
</g>
</g>
</svg>
<! -- End of SVG file -->
<! -- Moon/Sun Toggle -->
<div id="toggleButton" class="day-toggle">
<div class="sun-icon"></div>
<label class="switch">
<input id="toggleCheckbox" type="checkbox">
<div class="slider"></div>
</label>
<div class="cloud-icon"></div>
</div>
<! -- Moon/Sun Toggle -->
<! -- End of Container -->
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#toggleButton {
margin: 5%;
}
.day-toggle {
position: absolute;
right: 0%;
top: 0%;
}
.container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
-moz-transition-property: background-color;
-o-transition-property: background-color;
-webkit-transition-property: background-color;
transition-property: background-color;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.switch {
width: 100px;
height: 40px;
display: inline-block;
}
.switch input {
display: none;
}
.slider {
position: absolute;
background-color: white;
width: inherit;
height: inherit;
border-radius: 34px;
cursor: pointer;
}
.slider:before {
position: absolute;
left: 5px;
top: 5px;
content: "";
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #469CCE;
transition: .4s, background-color 1s linear;
-webkit-transition: .4s, background-color 1s linear;
-moz-transition: .4s, background-color 1s linear;
-o-transition: .4s, background-color 1s linear;
}
input:checked + .slider:before {
background-color: #2c3e50;
}
input:checked + .slider:before {
-webkit-transform: translateX(60px);
-ms-transform: translateX(60px);
transform: translateX(60px);
}
JavaScript
(function(){
var fullSVG = document.getElementById("svgout"),
sun = document.getElementById('sun'),
bg = document.getElementById('background'),
bottomShadow = document.getElementById('bottomShadow'),
shadow = document.getElementById('shadow'),
earth = document.getElementById('earth'),
toggleButton = document.getElementById('toggleButton');
TweenMax.set(bg, {backgroundColor: "#469CCE" });
introTimeline = new TimelineLite();
introTimeline.from(fullSVG, 1 , {scale: 0, rotation: "120" ,ease: SteppedEase.config(12), y: -500})
.staggerFrom('.element', 0.5 , {scale: 0, rotation: "120" ,ease: Back.easeOut.config(1.7), y: -500}, 0.1)
.from(sun, 0.51, {scale: 0, rotation: "100" , ease:Elastic.easeOut})
.fromTo(shadow, 0.2, {opacity: 0, ease:Linear.easeNone}, {opacity: 0, ease:Linear.easeNone})
.to(earth, 0.2, {y: "0%", ease:Linear.easeNone, onComplete:floating})
.from(toggleButton, 0.5, {scale: 0})
function floating() {
TweenMax.fromTo(shadow, 3, {opacity: 0 ,ease:Linear.easeNone}, { opacity: 0.1 ,ease:Linear.easeNone, yoyo: true, repeat: -1});
TweenMax.fromTo(earth, 3, {y: "0%", ease:Linear.easeNone}, {y: "3%", ease:Linear.easeNone, yoyo: true, repeat: -1
});
}
function toggleBox() {
var checkbox = document.getElementById("toggleCheckbox");
checkbox.onchange = function() {
if(this.checked) {
console.log('night');
TweenMax.to(bg, 0.5, {backgroundColor: "#2c3e50", ease: Linear.easeOut});
TweenMax.to(sun, 1, {fill: "#ffffff", scale: 2, rotation: "120" , x: "-20%"});
TweenMax.to(".windows", 1, {fill: "#e3be00" ,ease: Elastic.easeOut});
TweenMax.to(".vegetation", 1, {fill: "#955ca2" ,ease: Linear.easeOut});
TweenMax.to(".topGrass", 1, {fill: "#a679d1" ,ease: Linear.easeOut});
TweenMax.to(".greyRoad", 1, {fill: "#c8b1c0" ,ease: Linear.easeOut});
TweenMax.to(".treeWood", 1, {fill: "#5a749b" ,ease: Linear.easeOut});
TweenMax.to(".leftWall", 1, {fill: "#5a749b" ,ease: Linear.easeOut});
TweenMax.to(".windowRims", 1, {stroke: "#334e97" ,ease: Linear.easeOut});
TweenMax.to(".leftRoof", 1, {fill: "#72bad8" ,ease: Linear.easeOut});
TweenMax.to(".rightRoof", 1, {fill: "#5199b7" ,ease: Linear.easeOut});
TweenMax.to(".frontWall", 1, {fill: "#4d6992" ,ease: Linear.easeOut});
TweenMax.to(".frontFascia", 1, {fill: "#8ba2df" ,ease: Linear.easeOut});
TweenMax.to(".door", 1, {fill: "#334e97" ,ease: Linear.easeOut});
TweenMax.to(".leftSideGrass", 1, {fill: "#8f5897" ,ease: Linear.easeOut});
TweenMax.to(".rightGrassTop", 1, {fill: "#8f5897" ,ease: Linear.easeOut});
TweenMax.to(".crustLeftTop", 1, {fill: "#607489" ,ease: Linear.easeOut});
TweenMax.to(".middleLeftCrust", 1, {fill: "#899cbe" ,ease: Linear.easeOut});
TweenMax.to(".topRightCrust", 1, {fill: "#5a6498" ,ease: Linear.easeOut});
TweenMax.to(".middleRightCrust", 1, {fill: "#7c83c0" ,ease: Linear.easeOut});
} else {
TweenMax.to(bg, 0.51, {backgroundColor: "#469CCE", ease: Bounce.easeOut});
TweenMax.to(sun, 0.51, {fill: "#e3be00", scale: 1, rotation: "0" , x: "0%"});
TweenMax.to(".windows", 1, {fill: "#975A42" ,ease: Elastic.easeOut});
TweenMax.to(".vegetation", 1, {fill: "#77a951" ,ease: Linear.easeOut});
TweenMax.to(".topGrass", 1, {fill: "#b9d668" ,ease: Linear.easeOut});
TweenMax.to(".greyRoad", 1, {fill: "#b2b2b1" ,ease: Linear.easeOut});
TweenMax.to(".treeWood", 1, {fill: "#ae663d" ,ease: Linear.easeOut});
TweenMax.to(".leftWall", 1, {fill: "#C57F42" ,ease: Linear.easeOut});
TweenMax.to(".windowRims", 1, {stroke: "#AE663D" ,ease: Linear.easeOut});
TweenMax.to(".leftRoof", 1, {fill: "#F2563B" ,ease: Linear.easeOut});
TweenMax.to(".rightRoof", 1, {fill: "#F2563B" ,ease: Linear.easeOut});
TweenMax.to(".frontWall", 1, {fill: "#EFA258" ,ease: Linear.easeOut});
TweenMax.to(".frontFascia", 1, {fill: "#ECB27B" ,ease: Linear.easeOut});
TweenMax.to(".door", 1, {fill: "#B65041" ,ease: Linear.easeOut});
TweenMax.to(".leftSideGrass", 1, {fill: "#6e9e4f" ,ease: Linear.easeOut});
TweenMax.to(".rightGrassTop", 1, {fill: "#8cb154" ,ease: Linear.easeOut});
TweenMax.to(".crustLeftTop", 1, {fill: "#96563d" ,ease: Linear.easeOut});
TweenMax.to(".middleLeftCrust", 1, {fill: "#c67e5c" ,ease: Linear.easeOut});
TweenMax.to(".topRightCrust", 1, {fill: "#a5732a" ,ease: Linear.easeOut});
TweenMax.to(".middleRightCrust", 1, {fill: "#5a6498" ,ease: Linear.easeOut});
TweenMax.to(".middleRightCrust", 1, {fill: "#c89451" ,ease: Linear.easeOut});
}
}
}
document.getElementById("toggleCheckbox").addEventListener("click", toggleBox);
})();