1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.php dan tuliskan syntax dasar html
3. Buat style.css untuk membuat rancangan tampilan seperti pada gambar
Langsung saja tuliskan syntax dibawah ini
7. Kemudian buat div cont-l untuk wadah cont-up
10. Buat div untuk footer, tutup div pagewrep, body dan htmlnya
Yap.. sekian dulu tutorial kali ini, cukup menarik kan untuk dibuat, semoga bermanfaat untuk kalian yang pengin coba-coba buat website. See ya later..
<html>
<head>
<title>Layout, Marquee, Animation dan Video dengan HTML dan CSS</title>
</head>
<body>
</body>
</html>3. Buat style.css untuk membuat rancangan tampilan seperti pada gambar
body{
background: #171a21;
color: white;
}
#pagewrep{
width: 960px; margin: 10px auto; width: 100%;
}
#header{
width: 100%; height: 50px; color:
black;
font-size: 15px;
color:white; background-color: visible;
margin-bottom: 10px; margin-top: -10px;
}
.tgljam{
width: 125px;
background-color: #14324a; height: 50px; text-align: center; float: left;
}
#tgl{
line-height: 30px;
}
#jam{
line-height: 10px;
}
.judul{
width:100%;
height: 50px; background-color: #173b56; text-align: center; line-height: 50px;
}
#cont-l{
width-max: 340px;
height: auto; background: linear-gradient(#0b151e,#173b56); float: right;
color: white;
}
#cont-up{
width: 320px;
height: auto; background-color: visible; margin :0 10px 10px 10px;
}
#cont-lsml{
width: 340px;
height: auto; background: linear-gradient(#0b151e,#173b56); float : right;
margin-top : 10px; color: white;
}
#cont-bot{
width: 325px;
height: 120px; background-color: visible;
}
.cont-botl{
width:
162.5px height :150px; float: left; padding-left: 10px; background-color: visible;
}
.cont-botr{
width:
162.5px height :150px; float: right; margin-right: -10px; background-color:
visible;
}
#cont-m{
width-max: 960px;
height: auto; background: linear-gradient(#0b151e,#173b56); float: left;
padding: 10px 10px;
}
.cont-marq{
width:960px;
height: 30px; background-color: #14324a; font-size: 18px; font-family: calibri;
color: white;
line-height:
25px;
}
.cont-video{
margin-top:
-20px; margin-bottom: -30px; max-width: 960px; width: 100%;
}
#footer{
width: 100%; height: 50px; background-color:
#173b56; float: left; text-align: center; color:white; margin-top: 10px;
margin-bottom: 5px;
line-height: 50px;
}
4. Kembali ke index.html, buat tanggal dan jam menggunakan function dengan menuliskan syntax dibawah. Sisipkan syntax tersebut pada bagian head
<script>
function startTime() {
var today = new
Date();
var h =
today.getHours();
var m =
today.getMinutes();
var s =
today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('jam').innerHTML =
h + ":" + m + ":" + s;
var t =
setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i =
"0" + i}; // add zero in front
of numbers < 10
return i;
}
</script>
5. Pada bagian body, berikan onload="startTime()" untuk menggunakan function. Buat div id pagewrep dan header untuk tgljam dan judul
<body onload="startTime()">
<div
id="pagewrep">
<div id="header">
<div
class="tgljam">
<div
id="tgl"></div>
<div
id="jam"></div>
<script>
var d = new Date();
document.getElementById('tgl').innerHTML
= d.toDateString();
</script>
</div>
<div
class="judul"><h3>Dota2 - The International
8</h3></div>
</div>
6. Buat div cont-m sebagai wadah cont-marq dan cont-video
<div id="cont-m">
<div
class="cont-marq">
<marquee>Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec euismod cursus maximus. Morbi
imperdiet est magna, nec condimentum ante mattis sed. Vestibulum at porta
neque. Sed pellentesque odio augue, in commodo mi scelerisque quis. Sed
accumsan tincidunt commodo. Sed ultricies massa vitae odio viverra, ac
fermentum metus pretium. Etiam rhoncus ante in posuere aliquet. Sed feugiat
purus turpis, et iaculis urna iaculis nec.
</marquee>
</div>
<div
class="cont-video">
<video
width="960px" height="600px" autoplay loop>
<source
src="Dota 2 - 101% (Pro player montage).mp4"
type="video/mp4">
</video>
</div>
</div>7. Kemudian buat div cont-l untuk wadah cont-up
<div id="cont-l"><h4
align="center">Schedule High-Bracket</h4>
<div
id="cont-up">
<marquee
behavior="scroll" direction="up" scrollamount="4"
loop="infinit" height="350px">
<div
class="cont-menu"><img src="cont1.jpg"
alt="smile"></br></div>
<div
class="cont-menu"><img src="cont2.jpg"
width="320px" height="60px"</br></div>
<div
class="cont-menu"><img src="cont3.jpg"
width="320px" height="60px"</br></div>
<div
class="cont-menu"><img src="cont4.jpg"
width="320px" height="60px"</br></div>
<div
class="cont-menu"><img src="cont5.jpg"
width="320px" height="60px"</br></div>
<div
class="cont-menu"><img src="cont6.jpg"
width="320px" height="60px"</br></div>
<div
class="cont-menu"><img src="cont7.jpg"
width="320px" height="60px"</br></div>
</marquee>
</div>
</div>
8.Buat cont-lsml untuk menampung cont-botl dan cont-botr, pada cont-botl berisikan animasi bergerak ke bawah dan cont-botr berisi animasi bergerak ke atas.
<div id="cont-lsml">
<div id="cont-bot">
<div
class="cont-botl">
<div
id="slider"> <!-- Slider
container -->
<div
id="mask"> <!-- Mask
-->
<ul>
<li
id="first" class="firstanimation"><
a href="#"> <img
src="img1.png" width="157.5px" height="100px"/>
</a>
</li>
<li id="second"
class="secondanimation">
<a href="#">
<img src="img2.png" width="157.5px"
height="100px"/> </a>
</li>
<li id="third"
class="thirdanimation">
<a href="#">
<img src="img3.png" width="157.5px"
height="100px"/> </a>
</li>
<li id="fourth"
class="fourthanimation">
<a href="#">
<img src="img4.png" width="157.5px"
height="100px"/> </a>
</li>
<li id="fifth"
class="fifthanimation">
<a href="#">
<img src="img5.png" width="157.5px"
height="100px"/> </a>
</li>
</ul>
</div> <!-- End Mask -->
</div> <!-- End Slider Container -->
</div>
<div
class="cont-botr">
<div
id="slider"> <!-- Slider
container -->
<div
id="mask"> <!-- Mask
-->
<ul>
<li
id="first" class="firstanim">
<a href="#">
<img src="img6.png" width="157.5px" height="100px"/>
</a>
</li>
<li id="second"
class="secondanim">
<a href="#">
<img src="img7.png" width="157.5px" height="100px"/>
</a>
</li>
<li id="third"
class="thirdanim">
<a href="#">
<img src="img8.png" width="157.5px" height="100px"/>
</a>
</li>
<li id="fourth"
class="fourthanim">
<a href="#">
<img src="img9.png" width="157.5px" height="100px"/>
</a>
</li>
<li id="fifth"
class="fifthanim">
<a href="#">
<img src="img10.png" width="157.5px" height="100px"/> </a>
</li>
</ul>
</div> <!-- End Mask -->
</div> <!-- End Slider Container -->
</div>
</div>
</div>
9. Sisipkan syntax animasi slider ke dalam style.css
#slider {
height: 100px;
width: 157.5px;
margin: 10px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 100px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 157.5px; /* Width Image */
height: 100px; /* Height Image */
position: absolute;
top: -100px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider li.firstanimation {
animation: cycle 20s linear infinite;
}
#slider li.secondanimation {
animation: cycletwo 20s linear infinite;
}
#slider li.thirdanimation {
animation: cyclethree 20s linear infinite;
}
#slider li.fourthanimation {
animation: cyclefour 20s linear infinite;
}
#slider li.fifthanimation {
animation: cyclefive 20s linear infinite;
}
@keyframes cycle {
0% { top: 0px; } /* When you
start the slide, the first image is already visible */
4% { top: 0px; } /* Original
Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3
seconds the image is visible */
20% { top: 100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1
second exit image */
21% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original
Position */
92% { top: -100px; opacity: 0; z-index: 0; }
96% { top: -100px; opacity: 0; } /* From 96% to 100% = for 1 second
enter image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: -100px; opacity: 0; }
/* Original Position */
16% { top: -100px; opacity: 0; }/* Starts moving after 16% to this
position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /*
From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the
image is visible */
40% { top: 100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1
second exit image */
41% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: -100px; opacity: 0; }
36% { top: -100px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 100px; opacity: 0; z-index: 0; }
61% { top: -100px; opacity: 0; z-index: -1; }
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: -100px; opacity: 0; }
56% { top: -100px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 100px; opacity: 0; z-index: 0; }
81% { top: -100px; opacity: 0; z-index: -1; }
100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: -100px; opacity: 0; }
76% { top: -100px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 100px; opacity: 0; z-index: 0; }
}
#slider li.firstanim {
animation: cycle1 15s linear infinite;
}
#slider li.secondanim {
animation: cycle2 15s linear infinite;
}
#slider li.thirdanim {
animation: cycle3 15s linear infinite;
}
#slider li.fourthanim {
animation: cycle4 15s linear infinite;
}
#slider li.fifthanim {
animation: cycle5 15s linear infinite;
}
@keyframes cycle1 {
0% { top: 0px; } /* When you
start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position
*/
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3
seconds the image is visible */
20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1
second exit image */
21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original
Position */
92% { top: 100px; opacity: 0; z-index: 0; }
96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter
image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycle2 {
0% { top: 100px; opacity: 0; } /*
Original Position */
16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this
position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /*
From 20% to 24% = for 1 second enter image*/
36% {
top: 0px; opacity: 1; z-index: 0; } /*
From 24% to 36 % = for 3 seconds the image is visible */
40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1
second exit image */
41% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle3 {
0% { top: 100px; opacity: 0; }
36% { top: 100px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: -100px; opacity: 0; z-index: 0; }
61% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle4 {
0% { top: 100px; opacity: 0; }
56% { top: 100px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: -100px; opacity: 0; z-index: 0; }
81% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycle5 {
0% { top: 100px; opacity: 0; }
76% { top: 100px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: -100px; opacity: 0; z-index: 0; }
}
#slider-contup {
height: 240px;
width: 320px;
margin: 10px auto 0;
overflow: visible;
position: relative;
}
#mask1 {
overflow: hidden;
height: 60px;
}
#slider-contup ul {
margin: 0;
padding: 0;
position: relative;
}
#slider-contup li {
width: 320px; /* Width Image */
height: 60px; /* Height Image */
position: absolute;
top: -100px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider-contup li.firstanimation {
animation: cycleup1 20s linear infinite;
}
#slider-contup li.secondanimation {
animation: cycleup2 20s linear infinite;
}
#slider-contup li.thirdanimation {
animation: cycleup3 20s linear infinite;
}
#slider-contup li.fourthanimation {
animation: cycleup4 20s linear infinite;
}
#slider-contup li.fifthanimation {
animation: cycleup5 20s linear infinite;
}
@keyframes cycleup1 {
0% { top: 0px; } /* When you
start the slide, the first image is already visible */
4% { top: 0px; } /* Original
Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3
seconds the image is visible */
20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1
second exit image */
21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original
Position */
92% { top: 100px; opacity: 0; z-index: 0; }
96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter
image*/
100%{ top: 0px; opacity: 1; }
}
@keyframes cycleup2 {
0% { top: 100px; opacity: 0; } /*
Original Position */
16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this
position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /*
From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the
image is visible */
40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1
second exit image */
41% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup3 {
0% { top: 100px; opacity: 0; }
36% { top: 100px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: -100px; opacity: 0; z-index: 0; }
61% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup4 {
0% { top: 100px; opacity: 0; }
56% { top: 100px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: -100px; opacity: 0; z-index: 0; }
81% { top: 100px; opacity: 0; z-index: -1; }
100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cycleup5 {
0% { top: 100px; opacity: 0; }
76% { top: 100px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: -100px; opacity: 0; z-index: 0; }
}10. Buat div untuk footer, tutup div pagewrep, body dan htmlnya
<div
id="footer">Copyright © 2017, Himawan Ari Dwi Laksono. All rights
reserved</div>
</div>
</body>
</html>
11. Buka browser yang akan digunakan untuk melihat hasil
0 komentar:
Posting Komentar