Memasang Kode Windows 10
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
background:#000;}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top:-2px;
width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#AA80FE,#660099, #809FFE, #B0E0E6, #809FFE,#660099, #AA80FE);
border-bottom: 3px solid #24006B;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background: #111;
border-top: 2px solid #222;
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, #000 50%, transparent 90%);
background: linear-gradient(transparent 10%, #000 50%, transparent 90%);
}
#M-2010, #teks, #posisi, #dibawah #shadow;}
.text-bawah {
}
.M2010-textshadow {
margin: 0 auto;
text-align: center;
color: #00248E;
text-shadow: #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px, #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px,#00248E 0px -10px 30px;
color: #eee;
background:#eee;
mix-blend-mode: screen;
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:40px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px #809FFE,
0 5px 15px #809FFE, 0 0 50px #809FFE,
0 -10px 2px #809FFE;
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
/*end*/
.shadow-atas:after {
content: " ";
box-shadow: 0 0 200px 108px #24006B;
}
.shadow-atas:before {
content: " ";
box-shadow: 0 0 200px 110px #AA80FE;
}
#M2010-shadow-atas {
margin:-110px;
box-shadow: 0 0 150px 80px #24006B;
}
.shadow-bawah:before,.shadow-bawah:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px #24006B;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow-bawah:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
.Liplop {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #000;
margin-top:-3px;
}
.Liplop {
-webkit-animation: fade-in 0.2s linear infinite alternate;
-moz-animation: fade-in 0.2s linear infinite alternate;
animation: fade-in 0.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*end*/
M2010-text-bawah-shadow;}
.text-bawah {
position: absolute;
right: 410px;
bottom: -310px;
font-size: 50px;
font-family: agency fb, sans-serif;
text-transform: uppercase;
}
.text-bawah1 {
position: absolute;
left: 90px;
bottom: 189px;
text-align: left;
text-transform: uppercase;}
.text-bawah2 {
position: absolute;
right: 90px;
bottom: 189px;
text-align: right;
text-transform: uppercase;
}
.M2010-textshadow {
margin: 0 auto;
text-align: center;
color: #FFF8DC;
text-shadow: #dad 10px 0px 30px, #033FFF -10px 0px 30px, #dad 0px 10px 30px, #dad 0px -10px 30px;
color: #eee;
background:#eee;
mix-blend-mode: screen;
}
/*win*/
@import url(http://fonts.googleapis.com/css?family=Gudea);
body {
background-color: #312949;
margin: auto;
overflow: hidden;
}
h1 {
color: white;
margin-top:170px;
text-transform: uppercase;
font-family:Bernard MT Condensed;
font-size: 32pt;
letter-spacing: 4px;
width: 800px;
}
.container {
width:800px;
padding: 0;
margin: 0;
}
.win-1 {
width: 760px;
padding: 0;
margin-left: -240px;
position: fixed;
}
.win-2 {
width: 320px;
padding: 0;
position: fixed;
left: 387px;
}
.win-3{
width: 320px;
padding: 0;
position: fixed;
left: 699px;
}
.win-4 {
width: 470px;
padding: 0;
left: 1013px;
position: fixed;
}
.win-5 {
width: 550px;
padding: 0;
left: 1483px;
position: fixed;
}
img {
padding: 1.2px;
}
#img-1{
width: 150px;
height: 150px;
}
#img-2 {
width: 150px;
height: 150px;
}
#img-3{
width: 150px;
height: 150px;
}
#img-4{
width: 150px;
height: 150px;
}
#img-5{
width: 150px;
height: 150px;
}
@media screen and (max-width: 1024px){
media screen {
left: -595px;
top: -82px;
}
.container {
width: 1600px;
margin-left: -283px;
}}
@media screen and (min-width: 1124px) and (max-width: 1980px){
.container {
width: 2000px;
margin-left: -160px;
}
</style>
<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div>
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div>
</div>
</div>
</div>
</div>
</div>
<meta charset="utf-8">
<title>Windows 10</title>
<link href=style/main.css rel=stylesheet>
</head> <body>
<h1>WINDOWS 10</h1>
<div id="container" class="container" >
<ul id="scene" class="scene border fill">
<li class="layer expand-width" data-depth="1.00"> <div class="win-1">
<a href="https://www.mozilla.org/id/firefox/new/" target="_blank">
<img class="aspect" id="img-4"src="https://sites.google.com/site/sule2010s/icon/Firefox-M2010.png"></a>
<a href="https://line.me/id/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Line-M2010.png"></a>
<a href="https://www.google.com/chrome/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Chrome-M2010.png"></a>
<a href="https://drive.google.com/"target="_blank">
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/Drive-M2010.png"></a>
<a href="https://www.origin.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/origins-m2010.png"></a>
<a href="https://github.com/" target="_blank">
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/Github-M2010.png"></a>
<a href="https://facebook.com/" target="_blank">
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/facebook-M2010.png"></a>
<a href="https://dribbble.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/dribbble-m2010.png"></a>
<a href="http://www.deviantart.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Deviant-art-M2010.png"></a>
<a href="https://www.instagram.com/myscript2010/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Instagram-M2010.png"></a>
<a href="https://twitter.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/twitter-M2010.png"></a>
<a href="https://www.behance.net/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Behance-M2010.png"></a>
<a href="https://id.pinterest.com/myscript2010/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Pinterest-M2010.png"></a>
<a href="https://www.tumblr.com/blog/myscript2010s" target="_blank">
<img class="aspect" id="img-3"src="https://sites.google.com/site/sule2010s/icon/Tumblr-M2010.png"></a>
<a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank">
<img class="aspect" id="img-2"src="https://sites.google.com/site/sule2010s/icon/g-plus-m2010.png"></a>
<a href="http://www.picnik.com/" target="_blank">
<img class="aspect" id="img-1"src="https://sites.google.com/site/sule2010s/lagu/Picnik-M2010.png"></a>
</div>
</li>
<li class="layer expand-width" data-depth="1.00">
<div class="win-2">
<a href="https://www.periscope.tv/w/1RDGlRElzYmxL?channel=trump-protests" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Periscope-M2010.jpg"></a>
<a href="https://www.nytimes.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Times-M2010.png"></a>
<a href="http://www.foxnews.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/FoxNews-M2010.png"></a>
<a href="https://telegram.org/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Telegram-Mobile-M2010.png"></a>
<a href="https://www.rss.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/rss-m2010.png"></a> <a href="https://gplusrss.com/entries" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Gplus-to-rss-M2010.png"></a>
<a href="https://www.google.com/bookmarks/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Bookmarks-M2010.png"></a>
<a href="https://web.telegram.org/#/login" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Telegram-web-M2010.png"></a>
</div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-3">
<a href="https://www.evernote.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/evernote-m2010.png"></a>
<a href="http://www.flaticon.com"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Flaticon_m2010.png"></a>
<a href="https://www.snapchat.com/download" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Snapchat-Download-M2010.png"></a>
<a href="https://accounts.snapchat.com/accounts/login" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Snapchat-Login-M2010.png"></a>
<a href="http://www.bluestacks.com/id/index.html" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Bluestacks-M2010.png"></a> <a href="http://www.rdio.com" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Rdio-M2010.png"></a>
<a href="https://vine.co/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Vine-M2010.png"></a>
<a href="https://www.lightwave3d.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Lightwave-M2010.png"></a>
</div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-4">
<a href="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Mylogo-M2010s.png"></a>
<a href="https://www.wikipedia.org/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/wikipedia-m2010.png"></a>
<a href="http://www.fastpictureviewer.com/downloads/"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Fast-Picture-M2010s.png"></a> <a href="https://www.mediafire.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/MediaFire-M2010.png"></a>
<a href="http://www.crunchyroll.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Crunchyroll-M2010.png"></a>
<a href="https://www.spotify.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Spotify-M2010.png"></a>
<a href="https://www.dropbox.com" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Dropbox-M2010.png"></a>
<a href="http://fontawesome.io/icons/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/The-Icon-M2010.png"></a>
<a href="https://mail.google.com/tasks/canvas?pli=1" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Tasks-M2010.png"></a>
<a href="https://www.blogger.com/about/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Blogger-M2010.png"></a>
<a href="https://flipboard.com/" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Flipboard-M2010.png"></a>
<a href="http://www.ubuntu.com/" target="_blank">
<img class="aspect" src="https://lh5.googleusercontent.com/8JmuxZUtHLC6cmZm7CQW6-yQLFUsrHFBLDQpEM5x5w=s150-no"></a> </div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-5">
<a href="http://www.iminfo.in/post/how-to-generate-create-barcode-using-jquery-plugin"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Iminfo-M2010.png"></a>
<a href="https://api.jqueryui.com/"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Jquery.png"></a>
<a href="https://www.yahoo.com/" target="_blank">
<img class="aspect" src="https://lh3.googleusercontent.com/-8U0UC08oOsY/VFnrWp8TxlI/AAAAAAAADqA/rq5yvMma-hk/s150-no/Yahoo.png"></a>
<a href="https://developers.google.com/speed/libraries/#jquery"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Developers-M2010.png"></a>
<a href="https://www.iconfinder.com" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Icon-M2010.png"></a>
<a href="http://sule-lagu.blogspot.co.id/2016/12/audio-mp3-playlist.html"target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Music-M2010.png"></a>
<a href="https://www.dropbox.com" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Codepen-M2010.png"></a>
<a href="http://sule-lagu.blogspot.co.id/p/newspaper-style-text.html" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Seo-M2010.png"></a>
<a href="https://www.youtube.com/user/myscript2010s" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Youtube-M2010.png"></a>
<a href="https://translate.google.co.id/?hl=id&tab=wT#id/en/M-2010" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Translate-M2010.png"></a>
<a href="http://sule-lagu.blogspot.co.id/p/statis-home.html" target="_blank">
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Sitemap-M2010.png"></a>
<a href="http://www.mobomarket.co.id/" target="_blank">
<img class="aspect" id="img-5"src="https://sites.google.com/site/sule2010s/lagu/Mobomarket-apk-M2010.png"></a> </div>
</li>
</ul>
</div>
</body>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar"> <h2>
<span style="color:#f00; font-size:11pt"> <div class="Liplop">
Myscript2010</div>
</a> </h2>
</header>
<h3 class="M2010-textshadow">
<div class="text-bawah">
</div>
<div class="text-bawah1">
<a href="https://www.timeanddate.com/" target="_blank" title="Timeanddate">
<span style="color: #fff; font-size: 26px;">☠</a></div>
<div class="text-bawah2">
<a href="http://sule-parallax.blogspot.co.id/p/wind.html"title="Mari Belajar">
<span style="color: #fff; font-size: 26px;"> <span style="cursor:move">☠</a></div>
</h3>
<h3 class="M2010-textshadow">
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> </div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="https://codepen.io/Myscript2010/pen/QdJgJp" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2017 </a> CODEPEN </a> </div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/man349719/song/Axel-Rudi-P-Crest4-glory-night-Instru-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <music> <link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <link Audio mp3> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'> </script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script> <script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js"> </script>
<script>
/*!
* Animations - Windows 10
* Code css - Parallax.prototype
* Source by. All Sources
* Edited by. M2010
* Copyright @ 2017
* Visit : http://sample-mys2010.blogspot.co.id
*/
;(function(window, document, undefined)
{
// Strict Mode
'use strict';
// Constants
var NAME = 'Parallax';
var MAGIC_NUMBER = 30;
var DEFAULTS = {
relativeInput: false,
clipRelativeInput: false,
calibrationThreshold: 100,
calibrationDelay: 500,
supportDelay: 500,
calibrateX: true,
calibrateY: true,
invertX: true,
invertY: true,
limitX: false,
limitY: false,
scalarX: 35.0,
scalarY: 0.0,
frictionX: 0.1,
frictionY: 0.1,
originX: 0.5,
originY: 0.5
};
function Parallax(element, options)
{
// DOM Context
this.element = element;
this.layers = element.getElementsByClassName('layer');
// Data Extraction
var data = {
calibrateX: this.data(this.element, 'calibrate-x'),
calibrateY: this.data(this.element, 'calibrate-y'),
invertX: this.data(this.element, 'invert-x'),
invertY: this.data(this.element, 'invert-y'),
limitX: this.data(this.element, 'limit-x'),
limitY: this.data(this.element, 'limit-y'),
scalarX: this.data(this.element, 'scalar-x'),
scalarY: this.data(this.element, 'scalar-y'),
frictionX: this.data(this.element, 'friction-x'),
frictionY: this.data(this.element, 'friction-y'),
originX: this.data(this.element, 'origin-x'),
originY: this.data(this.element, 'origin-y')
};
// Delete Null Data Values
for (var key in data) {
if (data[key] === null) delete data[key];
}
// Compose Settings Object
this.extend(this, DEFAULTS, options, data);
// States
this.calibrationTimer = null;
this.calibrationFlag = true;
this.enabled = false;
this.depths = [];
this.raf = null;
// Element Bounds
this.bounds = null;
this.ex = 0;
this.ey = 0;
this.ew = 0;
this.eh = 0;
// Element Center
this.ecx = 0;
this.ecy = 0;
// Element Range
this.erx = 0;
this.ery = 0;
// Calibration
this.cx = 0;
this.cy = 0;
// Input
this.ix = 0;
this.iy = 0;
// Motion
this.mx = 0;
this.my = 0;
// Velocity
this.vx = 0;
this.vy = 0;
// Callbacks
this.onMouseMove = this.onMouseMove.bind(this);
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
this.onOrientationTimer = this.onOrientationTimer.bind(this);
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
this.onAnimationFrame = this.onAnimationFrame.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);
// Initialise
this.initialise();}
Parallax.prototype.extend = function()
{
if (arguments.length > 1) {
var master = arguments[0];
for (var i = 1, l = arguments.length; i < l; i++) {
var object = arguments[i];
for (var key in object) {
master[key] = object[key];
}
}
}
};
Parallax.prototype.data = function(element, name) {
return this.deserialize(element.getAttribute('data-'+name));
};
Parallax.prototype.deserialize = function(value) {
if (value === "true") {
return true;
} else if (value === "false") {
return false;
} else if (value === "null") {
return null;
} else if (!isNaN(parseFloat(value)) && isFinite(value)) {
return parseFloat(value);
} else {
return value;
}
};
Parallax.prototype.camelCase = function(value) {
return value.replace(/-+(.)?/g, function(match, character){
return character ? character.toUpperCase() : '';
});
};
Parallax.prototype.transformSupport = function(value) {
var element = document.createElement('div');
var propertySupport = false;
var propertyValue = null;
var featureSupport = false;
var cssProperty = null;
var jsProperty = null;
for (var i = 0, l = this.vendors.length; i < l; i++) {
if (this.vendors[i] !== null) {
cssProperty = this.vendors[i][0] + 'transform';
jsProperty = this.vendors[i][1] + 'Transform';
} else {
cssProperty = 'transform';
jsProperty = 'transform';
}
if (element.style[jsProperty] !== undefined) {
propertySupport = true;
break;
}
}
switch(value) {
case '2D':
featureSupport = propertySupport;
break;
case '3D':
if (propertySupport) {
var body = document.body || document.createElement('body');
var documentElement = document.documentElement;
var documentOverflow = documentElement.style.overflow;
if (!document.body) {
documentElement.style.overflow = 'hidden';
documentElement.appendChild(body);
body.style.overflow = 'hidden';
body.style.background = '';
}
body.appendChild(element);
element.style[jsProperty] = 'translate3d(1px,1px,1px)';
propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
documentElement.style.overflow = documentOverflow;
body.removeChild(element);
}
break;
}
return featureSupport;
};
Parallax.prototype.ww = null;
Parallax.prototype.wh = null;
Parallax.prototype.wcx = null;
Parallax.prototype.wcy = null;
Parallax.prototype.wrx = null;
Parallax.prototype.wry = null;
Parallax.prototype.portrait = null;
Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
Parallax.prototype.motionSupport = !!window.DeviceMotionEvent;
Parallax.prototype.orientationSupport = !!window.DeviceOrientationEvent;
Parallax.prototype.orientationStatus = 0;
Parallax.prototype.transform2DSupport = Parallax.prototype.transformSupport('2D');
Parallax.prototype.transform3DSupport = Parallax.prototype.transformSupport('3D');
Parallax.prototype.propertyCache = {};
Parallax.prototype.initialise = function()
{
// Configure Context Styles
if (this.transform3DSupport) this.accelerate(this.element);
var style = window.getComputedStyle(this.element);
if (style.getPropertyValue('position') === 'static') {
this.element.style.position = 'relative';
}
// Setup
this.updateLayers();
this.updateDimensions();
this.enable();
this.queueCalibration(this.calibrationDelay);
};
Parallax.prototype.updateLayers = function()
{
// Cache Layer Elements
this.layers = this.element.getElementsByClassName('layer');
this.depths = [];
// Configure Layer Styles
for (var i = 0, l = this.layers.length; i < l; i++) {
var layer = this.layers[i];
if (this.transform3DSupport) this.accelerate(layer);
layer.style.position = i ? 'absolute' : 'relative';
layer.style.display = 'block';
layer.style.left = 0;
layer.style.top = 0;
// Cache Layer Depth
this.depths.push(this.data(layer, 'depth') || 0);
}
};
Parallax.prototype.updateDimensions = function() {
this.ww = window.innerWidth;
this.wh = window.innerHeight;
this.wcx = this.ww * this.originX;
this.wcy = this.wh * this.originY;
this.wrx = Math.max(this.wcx, this.ww - this.wcx);
this.wry = Math.max(this.wcy, this.wh - this.wcy);
};
Parallax.prototype.updateBounds = function() {
this.bounds = this.element.getBoundingClientRect();
this.ex = this.bounds.left;
this.ey = this.bounds.top;
this.ew = this.bounds.width;
this.eh = this.bounds.height;
this.ecx = this.ew * this.originX;
this.ecy = this.eh * this.originY;
this.erx = Math.max(this.ecx, this.ew - this.ecx);
this.ery = Math.max(this.ecy, this.eh - this.ecy);
};
Parallax.prototype.queueCalibration = function(delay) {
clearTimeout(this.calibrationTimer);
this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
};
Parallax.prototype.enable = function() {
if (!this.enabled) {
this.enabled = true;
if (this.orientationSupport) {
this.portrait = null;
window.addEventListener('deviceorientation', this.onDeviceOrientation);
setTimeout(this.onOrientationTimer, this.supportDelay);
} else {
this.cx = 0;
this.cy = 0;
this.portrait = false;
window.addEventListener('mousemove', this.onMouseMove);
}
window.addEventListener('resize', this.onWindowResize);
this.raf = requestAnimationFrame(this.onAnimationFrame);
}
};
Parallax.prototype.disable = function() {
if (this.enabled) {
this.enabled = false;
if (this.orientationSupport) {
window.removeEventListener('deviceorientation', this.onDeviceOrientation);
} else {
window.removeEventListener('mousemove', this.onMouseMove);
}
window.removeEventListener('resize', this.onWindowResize);
cancelAnimationFrame(this.raf);
}
};
Parallax.prototype.calibrate = function(x, y) {
this.calibrateX = x === undefined ? this.calibrateX : x;
this.calibrateY = y === undefined ? this.calibrateY : y;
};
Parallax.prototype.invert = function(x, y) {
this.invertX = x === undefined ? this.invertX : x;
this.invertY = y === undefined ? this.invertY : y;
};
Parallax.prototype.friction = function(x, y) {
this.frictionX = x === undefined ? this.frictionX : x;
this.frictionY = y === undefined ? this.frictionY : y;
};
Parallax.prototype.scalar = function(x, y) {
this.scalarX = x === undefined ? this.scalarX : x;
this.scalarY = y === undefined ? this.scalarY : y;
};
Parallax.prototype.limit = function(x, y) {
this.limitX = x === undefined ? this.limitX : x;
this.limitY = y === undefined ? this.limitY : y;
};
Parallax.prototype.origin = function(x, y) {
this.originX = x === undefined ? this.originX : x;
this.originY = y === undefined ? this.originY : y;
};
Parallax.prototype.clamp = function(value, min, max) {
value = Math.max(value, min);
value = Math.min(value, max);
return value;
};
Parallax.prototype.css = function(element, property, value) {
var jsProperty = this.propertyCache[property];
if (!jsProperty) {
for (var i = 0, l = this.vendors.length; i < l; i++) {
if (this.vendors[i] !== null) {
jsProperty = this.camelCase(this.vendors[i][1] + '-' + property);
} else {
jsProperty = property;
}
if (element.style[jsProperty] !== undefined) {
this.propertyCache[property] = jsProperty;
break;
}
}
}
element.style[jsProperty] = value;
};
Parallax.prototype.accelerate = function(element) {
this.css(element, 'transform', 'translate3d(0,0,0)');
this.css(element, 'transform-style', 'preserve-3d');
this.css(element, 'backface-visibility', 'hidden');
};
Parallax.prototype.setPosition = function(element, x, y) {
x += 'px';
y += 'px';
if (this.transform3DSupport) {
this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
} else if (this.transform2DSupport) {
this.css(element, 'transform', 'translate('+x+','+y+')');
} else {
element.style.left = x;
element.style.top = y;
}
};
Parallax.prototype.onOrientationTimer = function(event) {
if (this.orientationSupport && this.orientationStatus === 0) {
this.disable();
this.orientationSupport = false;
this.enable();
}
};
Parallax.prototype.onCalibrationTimer = function(event) {
this.calibrationFlag = true;
};
Parallax.prototype.onWindowResize = function(event) {
this.updateDimensions();
};
Parallax.prototype.onAnimationFrame = function() {
this.updateBounds();
var dx = this.ix - this.cx;
var dy = this.iy - this.cy;
if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
this.queueCalibration(0);
}
if (this.portrait) {
this.mx = this.calibrateX ? dy : this.iy;
this.my = this.calibrateY ? dx : this.ix;
} else {
this.mx = this.calibrateX ? dx : this.ix;
this.my = this.calibrateY ? dy : this.iy;
}
this.mx *= this.ew * (this.scalarX / 100);
this.my *= this.eh * (this.scalarY / 100);
if (!isNaN(parseFloat(this.limitX))) {
this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
}
if (!isNaN(parseFloat(this.limitY))) {
this.my = this.clamp(this.my, -this.limitY, this.limitY);
}
this.vx += (this.mx - this.vx) * this.frictionX;
this.vy += (this.my - this.vy) * this.frictionY;
for (var i = 0, l = this.layers.length; i < l; i++) {
var layer = this.layers[i];
var depth = this.depths[i];
var xOffset = this.vx * depth * (this.invertX ? -1 : 1);
var yOffset = this.vy * depth * (this.invertY ? -1 : 1);
this.setPosition(layer, xOffset, yOffset);
}
this.raf = requestAnimationFrame(this.onAnimationFrame);
};
Parallax.prototype.onDeviceOrientation = function(event) {
if (!this.desktop && event.beta !== null && event.gamma !== null)
{
this.orientationStatus = 1;
var x = (event.beta || 0) / MAGIC_NUMBER; // -90 :: 90
var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180
var portrait = this.wh > this.ww;
if (this.portrait !== portrait) {
this.portrait = portrait;
this.calibrationFlag = true;
}
if (this.calibrationFlag) {
this.calibrationFlag = false;
this.cx = x;
this.cy = y;
}
this.ix = x;
this.iy = y;
}
};
Parallax.prototype.onMouseMove = function(event) {
var clientX = event.clientX;
var clientY = event.clientY;
if (!this.orientationSupport && this.relativeInput) {
if (this.clipRelativeInput) {
clientX = Math.max(clientX, this.ex);
clientX = Math.min(clientX, this.ex + this.ew);
clientY = Math.max(clientY, this.ey);
clientY = Math.min(clientY, this.ey + this.eh);
}
this.ix = (clientX - this.ex - this.ecx) / this.erx;
this.iy = (clientY - this.ey - this.ecy) / this.ery;
} else {
this.ix = (clientX - this.wcx) / this.wrx;
this.iy = (clientY - this.wcy) / this.wry;
}
};
window[NAME] = Parallax;
})(window, document);
;(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script>
$(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mejsPlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mejs-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mejs:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mejsPlayNext(currentPlayer) {
if ($('.mejs-list li.current').length > 0) {
var current_item = $('.mejs-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mejs-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
Code by. All Sources
Edited by. M-2010 in codepen
DEMOSHOWEdited by. M-2010 in codepen
If you want to directly copy and paste you canDownload Here Menu Drop Down styles
