Kembali Jika Tidak DitemukanKlik Pada Judul Kode Teks Marquee dan Teks Animasi
Showing posts with label Kode Teks Marquee dan Teks Animasi. Show all posts
Showing posts with label Kode Teks Marquee dan Teks Animasi. Show all posts

Kode Teks Marquee dan Teks Animasi

Memasang Kode Teks Marquee dan Teks Animasi
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
<style type="text/css">  
body {);color:aqua;height:100%;overflow:hidden;}
body {
  background: rgba(1, 2, 2, 2.5);
}
body {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXPr0JTi7UjtONEmMZRdhMA-_l4HHdkOVUP4dNj-5TBuSYpEoCK93kpFc4vKBw99m0tLuduNOkRfwRfYxDGKMyqx9HL9XUfH5MHSKNunfx6Zxk3hLZG3bWSe_pqo_4Dm51dqcdT0PI8U/s1600/belajar-menurut-mys2010.gif");
    background-repeat: no-repeat;
background-size: 300px 260px;
background-attachment: fixed;
    background-position: center; 
}
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: 0;
  width: 100%; 
background: -moz-linear-gradient(top,  #444 2%, #111  70%);
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 67px;
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;
text-shadow: 0px 0px blue;  
font-size:  11px;
background:  #fff;
border-top: 2px solid #FF0000;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 10%, transparent 60%); 
background: linear-gradient(transparent 10%, #333 10%, transparent 60%); 
}

.mys2010 {
  width: 850px;
  margin: 80px auto;
}
.mys2010 ul li {
  float: left;
  list-style: none;
  width: 160px;
  transition: all 1s;
  position: relative;
  overflow: hidden;
  border-left: 1px solid #FFD700;
  border-left-width: 2px;
  box-shadow: 0px 0px 17px  #f0f;
}
.mys2010 ul li a {
  color: #FFD700;
  text-decoration: none;
}
.mys2010 ul:hover li {
  width: 32px;
  -webkit-filter: grayscale(0.8);
  filter: grayscale(0.8);
  transition: all 2s;
}
.mys2010 ul li:hover {
  width: 640px;
  -webkit-filter: grayscale(0) hue-rotate(300deg);
  filter: grayscale(0) hue-rotate(300deg);
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #FF69B4 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 50px;
  height: 1.4em;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  color: rgba(255, 255, 255, 0.55);
  font-family: agency fb, helvetica neue, sans serif;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .35em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: opacity infinite 12s;
          animation: opacity infinite 12s;
}
h1 span {
  display: block;
  position: absolute;
  top: 0;
}
h1 span:nth-child(1) {
  right: 100%;
  margin-right: -.4em;
}
h1 span:nth-child(2) {
  left: 100%;
}
h1::before, h1::after {
  display: block;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #FFD700;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background:  #00008B;
  content: '';
}
h1::before {
  left: 18px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}
h1::after {
  right: 18px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:150px;top:210px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}

.player {    
    width: 210px;
    height: 5px; 
    border-radius: 10px;
    padding: 0px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 7px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 7px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ff0;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 300px; /*marquee height */
overflow: hidden;
padding: 2px;
padding-right: 1114px;
}

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}</style>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZb1jZBgnGnZ9e-CYzEJl90VyvzGCQBr2sDEfwRnb7CZ8Vt0GUgNyRp_kjPyrue8oxnNO0Yx3gfb068TM2OeuU1djzdDjS0R8HZD4d4eA8vQSVIpZ593L9kPVuh0Uj8IZjJEpwSRFExnc/s1600/lampu-mys2010.gif" height="49" name="e902" width="38" /> 

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<font size="4" color="aqua"face="script mt bold">
<p align="right">
Mari Belajar 
Belajar : Menurut Para Ahli </font>
<font size="4" color="aqua"face="agency fb">
<p align="right">
Howard L. Kingsley dalam Dantes (1997)
Belajar adalah suatu proses bukan produk. 
Proses dimana sifat dan tingkah laku 
ditimbulkan dan diubah melalui praktek dan latihan.<p align="right">All Sources 
edited by. Myscript2010 
Cibeber Cimahi
</font></a>

<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Mari-Belajar-Mys2010.css"title="Myscript2010s"> 
<h2>
<font size="1" color="GREEN"face="arial"> DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Guru-tersayang-mys2010.mp3" type="audio/mpeg">
</audio>
</div>
</header>
<h1>
<span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"><b>Mys2010</b></a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effects"><b>Effects</b></a></span></h1> 

<div id="tested">
<font size="3" color="#FF69B4"face="vivaldi"> &nbsp; &nbsp; &nbsp; &nbsp; Edited by . <a href="http://demoshow-mys2010.blogspot.co.id/2016/05/popup-mari-belajar.html" title="Home Page"> Myscript2010 &nbsp; </a> Home Page </a> 

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script>
var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };

}

var player = new Player('player');
player.init();

</script>

<script>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",50)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
Text Animated by. Michiel Bijl
Text Marquee code by. Dynamicdrive
Audio Mp3 Code by. Cartoonist arif
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Teks Marquee Full Code
See also code popup and little new UI with effect hoverClick Here To see the code

Category:
Subscribe to: Posts (Atom)