Sharing Teknologi – Membuat Running Text 3D Di WordPress. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Running Text 3D Di WordPress dengan bermodal CSS dan JavaScript.
Apabila Sobat ingin mempercantik tampilan website dengan animasi dengan bermodal CSS dan JavaScript. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.
Dengan hanya bermodal HTML dan style CSS serta tambahan JavaScript bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.
Tanpa plugin dengan bermodalkan CSS dan JavaScript yang cukup sederhana dan simple maka rekan-rekan bisa Membuat Teks Berjalan 3D
Ada 2 cara atau metode agar bisa membuat animasi di web yaitu dengan menggunakan CSS atau JavaScript. Jika disuruh memilih maka perlu untuk menyesuaikan dengan kebutuhan efek yang ingin dibuat.
Apabila ingin efek yang sederhana atau transisi satu kali maka bisa menggunakan CSS. Namun apabila ingin yang lebih komplek seperti efek memutar, memantul, berhenti, jeda, dll maka bisa menggunakan JavaScript.
Membuat animasi menggunakan JavaScript memang terkesan lebih kompleks dan rumit jika dibandingkan menggunakan CSS, namun dengan JavaScript akan memberikan lebih banyak pilihan efek yang bisa dipilih.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..
Di kesempatan kali ini, kami akan berbagi tutorial Membuat Teks Berjalan 3D Dengan Hanya Menggunakan CSS dan tambahan Javascript.
NB: kami menggunakan tambahan CSS dari bootstrap.
Panduan Membuat Running Text 3D
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode yang bisa dipasang atau diletakkan di functions.php agar lebih mudah untuk dipasang dimanapun nantinya. Silakan nanti bisa disesuaikan dengan kebutuhan.
function marque_3d() {
ob_start(); ?>
<div class="bg-light bg-gradient position-relative px-3 py-5 marque3d-frame">
<div class="space-3d">
<div class="role">
</div>
</div>
</div>
<!--style CSS-->
<style>
.marque3d-frame {
min-height: 400px;
}
.marque3d-frame .role {
width: 0px;
height: 0px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
transform-style: preserve-3d;
animation: role 10s infinite linear;
}
@keyframes role {
0% {
transform: rotateX(-5deg) rotateY(0deg);
}
100% {
transform: rotateX(-5deg) rotateY(360deg);
}
}
.marque3d-frame .block::-webkit-scrollbar {
display: none;
}
.marque3d-frame .block p {
white-space: nowrap;
}
@media screen and (max-width: 600px) {
.marque3d-frame {
overflow-x: auto;
}
.marque3d-frame .space-3d {
width: 900px !important;
}
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$(function () {
String.prototype.Blength = function () {
var arr = this.match(/[^\x00-\xff]/ig);
return arr == null ? this.length : this.length + arr.length;
}
for (i = 0; i < 6; i++) {
$('.marque3d-frame .role').append('<div class="block"><p></p></div>')
$('.marque3d-frame .block:nth-of-type(' + (i + 1) + ')').css({
'background-color': 'rgba(' + (Math.random() * 255) + ',' + (Math.random() * 255) + ',' + (Math.random() * 255) + ', .5)'
})
}
let text = [
'VisitKlatenCom',
'Media Iklan',
'Peta Pariwisata',
'Di Klaten',
'VisitKlaten.Com',
'Visit Klaten❤'
]
let fz = 60//font-size
let fzh = fz / 2
let bw = 300 //blockwidth
$('.marque3d-frame .space-3d').css({
'position': 'relative',
'width': '100%',
'height': '100%',
'transform': 'perspective(800px) translateY(50px)',
'perspective': '1700px',
'perspective-origin': '50% 50%'
})
$('.marque3d-frame .block').css({
'position': 'absolute',
'width': bw + 'px',
'height': '150px',
'line-height': '150px',
'font-size': fz + 'px',
'overflow-x': 'scroll'
})
let len = []
for (i = 0; i < 6; i++) {
$('.marque3d-frame .block:nth-of-type(' + (i + 1) + ') p').text(text[i])
len[i] = text[i].Blength() * fzh + 50
$('.marque3d-frame .block:nth-of-type(' + (i + 1) + ') p').css({
'position': 'absolute',
'right': '-' + len[i] + 'px',
}).animate({
'right': bw + 'px'
}, 3000, 'linear', function () {
for (j = 0; j <= i; j++) {
b(j)
}
})
console.log(len[i])
}
console.log(len)
function b(k) {
$('.marque3d-frame .block:nth-of-type(' + (k + 1) + ') p').css({
'position': 'absolute',
'right': '-' + len[k] + 'px',
}).animate({
'right': bw + 'px'
}, 3000, 'linear', function () {
b(k)
})
}
let tx = bw / 2
let tz = bw * Math.sqrt(3) / 2
console.log(tz)
for (i = 0; i < 6; i++) {
$('.marque3d-frame .block:nth-of-type(' + (i + 1) + ')').css({ 'transform': 'translateX(-' + tx + 'px) rotateY(' + (-60 * i) + 'deg) translateZ(' + tz + 'px) ' })
}
})
});
</script>
<?php return ob_get_clean();
}
add_shortcode('marque3d', 'marque_3d');
Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.
[*marque3d*] //hilangkan tanda bintang
Namun jika berupa tag HTML atau php maka bisa menggunakan dibawah ini
<?php echo do_shortcode('[*marque3d*]') ;?> //hilangkan tanda bintang
Tampilannya kurang lebih bisa dilihat dibawah ini. Silakan geser jika tampilan tertutup
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar