setelah saya melihat beberapa postingan di grup facebook , dan ada beberapa percakapan tentang website bernama rafi.rpl.web.id yang bisa dibilang bagus, dengan Jquery,Css + Slider.
Demikian tutorial dari saya, mungkin bisa menambah ilmu maupun memperjelas desain anda sebagai sebuah inspirasi,terimakasih
dan saya juga ucapkan terimakasih untuk om rafi yang buat websitenya, saya sedikit meniru untuk bisa dipelajari dan dibagikan untuk para desainer lainnya.
seperti inilah contoh screennya
disini kita akan menggunakan tools notepad++.
pertama, silahkan unduh file Javascript + Jquery nya disini
buatlah file dengan susunan
/index.html
/library/jquery-1.11.0.min.js
/library/slide.js
setelah itu buka notepad, dan buatlah file baru extensi HTML dengan nama index.html
ini adalah script memanggil javascript
<script src="library/jquery-1.11.0.min.js"></script> <script src="library/slide.js"></script>
dan ini adalah script cascading stylesheet
<style>
body{
background: #35b5f7;
height: 3496px;
}
.load{
position: fixed;
width: 100%;
top:250px;
}
.dot{
width: 20px;
height: 20px;
position: absolute;
right:0;
border-radius:50%;
background: #fff;
overflow: hidden;
text-align: center;
box-sizing:border-box;
border:5px solid #fff;
}
#hello{
font-size: 32px;
color:#ccc;
font-family: arial;
border-radius:50%;
opacity: 0;
}
.yellow{
position: absolute;
background: #f9b90c;
width: 0;
height: 0;
left: 50%;
top: 50%;
text-align: center;
overflow: hidden;
}
.yellow h1{
font-size: 20px;
color:#fff;
font-family: arial;
opacity: 0;
}
</style>
diatas adalah style untuk websitenya, anda bisa merubah sesuai dengan keinginan anda, bisa warna maupun font sizenya. untuk full script seperti dibawah ini
<html>
<head>
<title>Contoh Slider Point</title>
<script src="library/jquery-1.11.0.min.js"></script>
<style>
body{
background: #35b5f7;
height: 3496px;
}
.load{
position: fixed;
width: 100%;
top:250px;
}
.dot{
width: 20px;
height: 20px;
position: absolute;
right:0;
border-radius:50%;
background: #fff;
overflow: hidden;
text-align: center;
box-sizing:border-box;
border:5px solid #fff;
}
#hello{
font-size: 32px;
color:#ccc;
font-family: arial;
border-radius:50%;
opacity: 0;
}
.yellow{
position: absolute;
background: #f9b90c;
width: 0;
height: 0;
left: 50%;
top: 50%;
text-align: center;
overflow: hidden;
}
.yellow h1{
font-size: 20px;
color:#fff;
font-family: arial;
opacity: 0;
}
</style>
</head>
<body>
<div class="load">
<div class="dot">
<h1 id="hello">Hello World!</h1>
<div class="yellow"><h1 id="yeTit">By Raka Adi Nugroho Blog, Thanks JRAG</h1></div>
</div>
</div>
<script src="library/slide.js"></script>
</body>
</html>
Demikian tutorial dari saya, mungkin bisa menambah ilmu maupun memperjelas desain anda sebagai sebuah inspirasi,terimakasih
regards
Raka Adi Nugroho
codepen.io
ReplyDelete