Metro Interactive Live Tiles

Developer
Keith Pickering
Size
5,953 Kb
Views
36,432
  1. Metro Interactive Live Tiles Previews
  2. Metro Interactive Live Tiles HTML Codes
  3. Metro Interactive Live Tiles CSS Codes
  4. Metro Interactive Live Tiles JS Codes

How do I make an metro interactive live tiles?

What is a metro interactive live tiles? How do you make a metro interactive live tiles? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Metro Interactive Live Tiles Previews
IQ Test

Metro Interactive Live Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Metro Interactive Live Tiles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: "Segoe UI", sans-serif; background: #2d89ef;
}
button { cursor: default;
}
.tile { cursor: default; position: absolute; overflow: hidden; margin: 6px; color: white; background: black; border: 1px solid rgba(255, 255, 255, 0.65);
}
.tile--large { width: 248px; height: 248px;
}
.tile__title { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 12px; font-size: 14px; background: #da532c;
}
.tile__background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: 200%; background-position: center; background-color: red; animation: slide 30s linear; animation-iteration-count: infinite;
}
.tile__background--paused { animation-play-state: paused;
}
.tile__colors { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(45deg, #da532c, #2d89ef, #00aba9, #9f00a7, #1e7145, #da532c); background-size: 2000px; animation: colors 80s; animation-iteration-count: infinite; opacity: 0.5;
}
.tile__colors--paused { animation-play-state: paused;
}
@keyframes slide { 0% { opacity: 0; background-position: 0 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 100% 50%; }
}
@keyframes colors { 0% { background-position: 0 0; } 100% { background-position: 100% 0; }
}
.controls { position: absolute; display: flex; bottom: 40px; left: 6px;
}
.controls > button { flex: 0 0 auto; width: 44px; height: 44px; appearance: none; border: 0; outline: 0; color: white; background: transparent; transition: all 200ms;
}
.controls > button:hover { text-shadow: none; background: #da532c; transition: all 100ms;
}
.controls > button:active { padding: 0; transform: scale(0.9);
}
.controls__play--pause > .fa:before { content: "\f04c";
}
.nowplaying { position: absolute; top: 0; left: 0; right: 0; padding: 12px;
}
.nowplaying__item { position: absolute; padding: 12px; top: 24px; left: 0; right: 0; transform: translate(100%, 0);
}
.nowplaying__item--active { left: 0; transform: none; transition: all 250ms;
}
.nowplaying__item--skip { transform: translate(-100%, 0); opacity: 0; transition: all 250ms;
}
.nowplaying__item--skip-back { transform: translate(100%, 0);
}
.nowplaying__title, .nowplaying__artist { font-size: 14px;
}
.nowplaying__title { opacity: 0.25; text-transform: uppercase; font-weight: 700;
}
.nowplaying__song { font-size: 24px; font-weight: 200;
}
.nowplaying__artist { margin-left: 24px; transition: margin-left 250ms 150ms;
}
.nowplaying__item--active .nowplaying__artist { margin-left: 0;
}
.heart { position: absolute; right: 12px; top: 0; width: 44px; height: 44px; background: transparent; border: 0; outline: 0; z-index: 10;
}
.heart:after { font-family: "fontawesome"; content: "\f08a"; opacity: 0.25; transition: all 150ms;
}
.heart--checked:after { content: "\f004"; opacity: 1;
}
.heart:active { transform: scale(0.9);
}
.progress { position: absolute; bottom: 32px; left: 0; right: 0; height: 2px;
}
.progress:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e99a83; animation: progress 120s linear; animation-fill-mode: forwards;
}
.progress--paused:before { animation-play-state: paused;
}
@keyframes progress { 0% { width: 0; } 100% { width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="tile tile--large tile--music"> <div class="tile__background tile__background--1" style="background-image:url(http://www.bostonska.net/wp-content/uploads/2013/05/Reel-Big-Fish.png);"></div> <div class="tile__colors"></div> <div class="tile__title"> Music </div> <button class="heart"></button> <div class="nowplaying"> <div class="nowplaying__title">Now Playing</div> <div class="nowplaying__item nowplaying__item--active"> <div class="nowplaying__song">Sell Out</div> <div class="nowplaying__artist">Reel Big Fish</div> </div> <div class="nowplaying__item"> <div class="nowplaying__song">Beer</div> <div class="nowplaying__artist">Reel Big Fish</div> </div> <div class="nowplaying__item"> <div class="nowplaying__song">Take On Me</div> <div class="nowplaying__artist">Reel Big Fish</div> </div> </div> <div class="controls"> <button class="controls__back"> <i class="fa fa-step-backward"></i> </button> <button class="controls__play controls__play--pause"> <i class="fa fa-play"></i> </button> <button class="controls__forward"> <i class="fa fa-step-forward"></i> </button> </div> <div class="progress"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Metro Interactive Live Tiles - Script Codes CSS Codes

body { font-family: "Segoe UI", sans-serif; background: #2d89ef;
}
button { cursor: default;
}
.tile { cursor: default; position: absolute; overflow: hidden; margin: 6px; color: white; background: black; border: 1px solid rgba(255, 255, 255, 0.65);
}
.tile--large { width: 248px; height: 248px;
}
.tile__title { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 12px; font-size: 14px; background: #da532c;
}
.tile__background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: 200%; background-position: center; background-color: red; animation: slide 30s linear; animation-iteration-count: infinite;
}
.tile__background--paused { animation-play-state: paused;
}
.tile__colors { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(45deg, #da532c, #2d89ef, #00aba9, #9f00a7, #1e7145, #da532c); background-size: 2000px; animation: colors 80s; animation-iteration-count: infinite; opacity: 0.5;
}
.tile__colors--paused { animation-play-state: paused;
}
@keyframes slide { 0% { opacity: 0; background-position: 0 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 100% 50%; }
}
@keyframes colors { 0% { background-position: 0 0; } 100% { background-position: 100% 0; }
}
.controls { position: absolute; display: flex; bottom: 40px; left: 6px;
}
.controls > button { flex: 0 0 auto; width: 44px; height: 44px; appearance: none; border: 0; outline: 0; color: white; background: transparent; transition: all 200ms;
}
.controls > button:hover { text-shadow: none; background: #da532c; transition: all 100ms;
}
.controls > button:active { padding: 0; transform: scale(0.9);
}
.controls__play--pause > .fa:before { content: "\f04c";
}
.nowplaying { position: absolute; top: 0; left: 0; right: 0; padding: 12px;
}
.nowplaying__item { position: absolute; padding: 12px; top: 24px; left: 0; right: 0; transform: translate(100%, 0);
}
.nowplaying__item--active { left: 0; transform: none; transition: all 250ms;
}
.nowplaying__item--skip { transform: translate(-100%, 0); opacity: 0; transition: all 250ms;
}
.nowplaying__item--skip-back { transform: translate(100%, 0);
}
.nowplaying__title, .nowplaying__artist { font-size: 14px;
}
.nowplaying__title { opacity: 0.25; text-transform: uppercase; font-weight: 700;
}
.nowplaying__song { font-size: 24px; font-weight: 200;
}
.nowplaying__artist { margin-left: 24px; transition: margin-left 250ms 150ms;
}
.nowplaying__item--active .nowplaying__artist { margin-left: 0;
}
.heart { position: absolute; right: 12px; top: 0; width: 44px; height: 44px; background: transparent; border: 0; outline: 0; z-index: 10;
}
.heart:after { font-family: "fontawesome"; content: "\f08a"; opacity: 0.25; transition: all 150ms;
}
.heart--checked:after { content: "\f004"; opacity: 1;
}
.heart:active { transform: scale(0.9);
}
.progress { position: absolute; bottom: 32px; left: 0; right: 0; height: 2px;
}
.progress:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e99a83; animation: progress 120s linear; animation-fill-mode: forwards;
}
.progress--paused:before { animation-play-state: paused;
}
@keyframes progress { 0% { width: 0; } 100% { width: 100%; }
}

Metro Interactive Live Tiles - Script Codes JS Codes

$(".heart").click(function() { $(this).toggleClass("heart--checked"); if ( $(this).hasClass("heart--checked") ) { $(this).parents(".tile").find(".nowplaying__item--active").data("favorite", 1); } else { $(this).parents(".tile").find(".nowplaying__item--active").data("favorite", 0); }
});
$(".controls__play").click(function() { $(this).toggleClass("controls__play--pause"); if ( !$(this).hasClass("controls__play--pause") ) { $(this).parents(".tile").find(".tile__colors") .addClass("tile__colors--paused"); $(this).parents(".tile").find(".tile__background") .addClass("tile__background--paused"); $(this).parents(".tile").find(".progress") .addClass("progress--paused"); } else { $(this).parents(".tile").find(".tile__colors") .removeClass("tile__colors--paused"); $(this).parents(".tile").find(".tile__background") .removeClass("tile__background--paused"); $(this).parents(".tile").find(".progress") .removeClass("progress--paused"); }
});
$(".controls__forward").click(function() { var active = $(this).parents(".tile").find(".nowplaying__item--active"), next = active.next(".nowplaying__item"), item = $(this).parents(".tile").find(".nowplaying__item"); $(active).removeClass("nowplaying__item--active") .addClass("nowplaying__item--skip"); setTimeout(function() { $(item).removeClass("nowplaying__item--skip") }, 250); $(next).addClass("nowplaying__item--active"); if ( $(active).next(".nowplaying__item").length ) { //alert("next song exists"); active = $(next); next = $(active).next(".nowplaying__item"); } else { //alert("last song"); active = $(this).parents(".tile").find(".nowplaying__item:first"); next = $(active).next(".nowplaying__item"); $(active).addClass("nowplaying__item--active"); } if ( $(active).data("favorite") == 1 ) {	$(this).parents(".tile").find(".heart")	.addClass("heart--checked"); } else { $(this).parents(".tile").find(".heart")	.removeClass("heart--checked"); } var progress = $(this).parents(".tile").find(".progress"), clone = progress.clone(true); progress.before(clone); $(progress).remove();
});
$(".controls__back").click(function() { var active = $(this).parents(".tile").find(".nowplaying__item--active"), prev = active.prev(".nowplaying__item"), item = $(this).parents(".tile").find(".nowplaying__item"); $(active).removeClass("nowplaying__item--active") .addClass("nowplaying__item--skip"); setTimeout(function() { $(item).removeClass("nowplaying__item--skip") }, 250); $(prev).addClass("nowplaying__item--active"); if ( $(active).prev(".nowplaying__item").length ) { //alert("prev song exists"); active = $(prev); prev = $(active).prev(".nowplaying__item"); } else { //alert("first song"); active = $(this).parents(".tile").find(".nowplaying__item:first"); prev = $(active).prev(".nowplaying__item"); $(active).addClass("nowplaying__item--active"); } if ( $(active).data("favorite") == 1 ) {	$(this).parents(".tile").find(".heart")	.addClass("heart--checked"); } else { $(this).parents(".tile").find(".heart")	.removeClass("heart--checked"); } var progress = $(this).parents(".tile").find(".progress"), clone = progress.clone(true); progress.before(clone); $(progress).remove();
});
$(function() { var progress = $(this).parents(".tile").find(".progress"); //$(progress).one("webkitAnimationEnd oAnimationEnd animationend", //function(e) { // alert("done") //});
})
Metro Interactive Live Tiles - Script Codes
Metro Interactive Live Tiles - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 5,953 Kb
Views 36,432
Do you need developer help for Metro Interactive Live Tiles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Pickering (keithpickering) Script Codes
Name
A Pen by Keith Pickering
Lovely Transforming Menu Button
Reusable Styles
Delicious SASS Buttons
Easy Container-Breaking Sidebar
Windows 10 Concept
Material Inspired Menu
Image with inset shadow
Sliding Navigation Menu
Smooth, Semantic Tab Box
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!