Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

21 Februari 2015

UNTITLED

21 Februari 2015

2 Komentar WTF
Salah satu cara mengakali jikalau di dalam template kita sudah kehabisan lahan untuk menampilkan sesuatu adalah dengan membuat si accordion Ada banyak sih, tetapi karena tema post yang akan AA sampaikan adalah cara membuat accordion image dengan CSS3. Akordion jenis ini sangat cocok untuk menampilkan banner iklan, screenshot blog teman, atau apapun soalnya pakai gambar :DImage-Accordion-with-CSS3Original posted by codrops.
.cont-accr {
position: relative;
width: 400px;
margin: 5px auto;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.6);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
}
.accr-panel {
top: 0;
left: 40px;
margin: 0;
width: 240px;
height: 361px;
line-height: 361px;
position: absolute;
transition: 0.3s ease-in-out;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cont-accr > .accr-panel {
position: relative;
left: 0;
}
.accr-image {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accr-tab {
top: 0;
width: 40px;
height: 100%;
opacity: 0;
z-index: 100;
cursor: pointer;
position: absolute;
}
.accr-tab:checked {
right: 0;
width: 0;
}
.accr-tab:checked ~ .accr-panel {
left: 240px;
transition: 0.7s ease-in-out;
}
.accr-capt {
width: 100%;
height: 100%;
top: 0;
position: absolute;
transition: 0.2s linear;
background: rgba(47, 79, 79, 0.25);
}
.accr-capt span {
position: absolute;
top: 40%;
margin-top: -20px;
left: 20px;
right: 20px;
text-align: center;
line-height: 10px;
font-size: 17px;
opacity: 0;
letter-spacing: 1px;
font-weight: 700;
padding: 20px;
color: #fff;
background: rgba(47, 79, 79, 0.25);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.accr-tab:checked + .accr-capt {
background: rgba(47, 79, 79, 0.25);
}
.accr-tab:checked + .accr-capt span {
opacity: 1;
top: 50%;
transition: 0.4s ease-in-out 0.5s;
}
.accr-tab:hover + .accr-capt {
background: rgba(47, 79, 79, 0.1);
}

<div class="cont-accr">
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 1</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 2</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set" checked="checked"/>
<div class="accr-capt">
<span>CAPTION 3</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 4</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab accr-tab-last" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 5</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jika sobat ingin menambahkan kolom/area, sobat tinggal buat taging baru seperti ini
<div class="accr-panel">
 <img class="accr-image" src="LINK-GAMBAR" alt=""/>
  <input class="accr-tab" type="radio" name="radio-set"/>
 <div class="accr-capt">
<span>CAPTION</span>
</div>
Letakan tepat di bawah setelah penutup tag </div> pada CAPTION 5. Jangan lupa juga tambahkan tagging penutupnya </div> Untuk kemulusan kerja, ada bijaknya width, height, margin and padding ditentukan terlebih dahulu agar sreug bergejew brow dengan template anda :))

The other interesting sources:
  • Making a CSS Only Accordion Image Slider
  • Pure CSS3 Accordion Image effect
  • Image Accordion Effect
  • CSS sliding multi-level accordion
  • Multi-Level Accordion Menu
Bonus:

Single input 3D form - Pure CSS Spiral Text Thingy - Smooth Page Scrolling in jQuery - Lettering.js Button Hover States - Pure CSS Emoji Faces - Pure CSS iOS Icons - CSS Unicode Range Generator - 111 Single Div Pure CSS Flags - Pure CSS selected layer - sin(k) on [s,e] - Simple CSS text animation - WebSlides - Table of Contents - The swinging polaroid - color palette distribution for different color spaces - Article list concept with background image - Image Mask Effect

Bay :-h

11 Komentar WTF
Salah satu cara untuk mempercepat tampilnya sebuah halaman blogsite adalah dengan mengatur apa-apa saja yang harus di load terlebih dahulu! Pada umumnya konten bergambar adalah satu faktor yang mempengaruhi terhadap speed page render :P Sobat mungkin pernah mendengar tentang lazy loading images? Teknik pintar menahan load gambar untuk tidak tampil terlebih dahulu, alias di tahan sementara waktu! Berikut 2 link source penjelasan Lazy Loading Images & Simple Image Lazy Load and Fade.

AA Koben akan berbagi tips serupa namun dengan technique yg sedikit berbeda. Itung-itung jalan alternatif yg tidak mau pasang lazy-load :D Cara tercepat untuk menahan laju load-image yaitu dengan tidak menampilkannya, melainkan kasih saja link URL agar di buka sendiri pada tab browser baru ini adalah gambar ;))
I. Cara pertama datang dari pen by Shaw dengan judul Basic Image Replacement Concept.
Snippet jQuery sederhana dengan menggantikan tampilan gambar di area postingan dengan gambar default. Gambar asli akan terbuka jika di klik/sorot.
Simpan seonggok script berikut di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
var tempSVG = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{w}} {{h}}'/>"; // Simplest possible SVG

var iconSVG = "<svg xmlns='http://www.w3.org/2000/svg' xmlns: xlink='http://www.w3.org/1999/xlink' viewBox='0 0 {{w}} {{h}}'><defs><symbol id='a' viewBox='0 0 90 66' opacity='0.3'><path d='M85 5v56H5V5h80m5-5H0v66h90V0z'/><circle cx='18' cy='20' r='6'/><path d='M56 14L37 39l-8-6-17 23h67z'/></symbol></defs><use xlink:href='#a' width='20%' x='40%'/></svg>"; // Basic 'picture' icon

$('.image-replacement').each(function(){
  var $this = $(this),
      data = $this.data(), // Get all the data attributes
      $img = $('<img />').attr({
                width: data.width,
                height: data.height,
            // Set src to temporary SVG with proper viewBox
                src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(iconSVG.replace(/{{w}}/g,data.width).replace(/{{h}}/g,data.height)),
            class: 'image-replacer', // Class for styling the temporary image
                title: 'Click to load' // Title attribute to encourage interaction
              })
              .appendTo($this)
        // Load image on click
              .on('mouseover touchmove click',function(){
          $img
                  .off('mouseover touchmove click')
                  .attr({
                   src: data.src, // Set the src to the real image
                    class: '', title: '', // clear out our temporary attributes
                 });
          });
});
//]]></script>
Sobat bisa delete tulisan mouseover touchmove kalau mau hasilnya di klik!
Planing HTML<figure class="image-replacement" data-src="LINK-IMAGE" data-width="width" data-height="height">
</figure>
Tag figure bisa digantikan dengan div
II. Cara ke dua.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".run-img1").click(function () {
    var imgUrl = $(this).data('rel');
    $(".area-img1").html("<a href='" + imgUrl + "' target='_blank'><img alt='Img' src='" + imgUrl + "' title='Previw Data'/></a>");
});
});
//]]></script>
Markup HTML<button class="run-img1" data-rel="LINK-IMAGE" title="Click for display image">W T F</button>
<div class="area-img1"></div>
Cara ke-2 ini sedikit ribet, soalnya kalau mau menampilkan gambar lebih dari satu pada area postingan, harus buat script serupa dengan unik-id yg berbeda pula #-o Kecuali anda tahu cara mengakalinya bagaimana :D
III. Cara ke tiga.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.change').click(function(event){
 var img=$(this).data('img');
  $(this).children('img').attr('src', img);
});
});
//]]></script>
Syntax HTML<div class="change" data-img="LINK-IMAGE">
<img src="about:blank" alt="Click" />
</div>
Kode CSSimg[alt]:before {
color: #333;
font-family: Roboto,Arial,sans-serif;
font-weight: bold;
content: attr(alt);
}
img[alt]:after {
color: #000;
content: ' \21D4 to display image';
}
.change {
cursor: pointer;
}
Itulah ketiga cara bagaimana cara menyembunyikan gambar pada area post untuk render page lebih cepat. Rumusan tersebut masih berupa konsep dan belum diberikan CSS style! Silahkan sobat berkreasi dengan ramuan itu. Cool man :-bd

Bonus

FontSelector 2.0 Find the best font - Scrolling half by half pure #CSS by @Kseso - 3D Social Media Animated Links - Zoom iMage with scale - Simple Vertical Slider - Donuts CSS Project - PopUp overlay animation - Responsive Image Comparison Slider - Image Comparison Slider - Responsive CSS3 Slider - Say Hello to world! - Glitch effect strobocops - Dynamic selection highlight with SVG Vignette - Content Loading Placeholder

Ooops...ada yg kelupaan, agar lebih ngabret rendering imagenya, lakukan terlebih dahulu compress terhadap image sebelum melakukan upload ke hostingan. Nih comot apps kompres gbr, it's good one created by Xkeshi image-compressor.

Bay...:-h

3 Komentar WTF
Berbicara tentang "animation" sudah pasti berkaitan erat dengan yang namanya pergerakan. Intinya ada sesuatu yang bergerak-gerak! Mau itu sedikit atau banyak gerakannya, pokoknya gerak-gerak :D Untuk mempercantik tampilan blog, khususnya pada bagian header, AA Koben punya satu rekomendasi untuk membuat header blog sobat menjadi lebih atraktif! Jika kepengen tau bagaimana hasil akhirnya silahkan kunjungi halaman jakob-e on CodePen.
Kalau mau yg keren dan sudah jadi tinggal comot bumbunya, absolutely come from Codrops.

jakob-eAnimasi header karya master Jakob E ini, di bangun dengan beberapa gambar utama, yaitu: 2 gambar awan, burung dan balon udara! Untuk balon udara gue tidak pakai. Ambil dan save link gambar burung pada halaman sumber yg sudah berupa data URI base64
Gambar: clouds3 - clouds4

Kode CSS
.content-jakob-e {
position: relative;
overflow: hidden;
max-height: 300px;
height: 100vh;
width: 75%;
margin: 9px auto;
}
.content-jakob-e:before, .content-jakob-e:after {
-webkit-animation-duration: 195s;
animation-duration: 195s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
content: '';
position: absolute;
display: block;
width: 75vw;
min-height: 62.5vw;
top: 50%;
left: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: 80%;
pointer-events: none;
}
.content-jakob-e:before {
background-image: url(LINK-IMAGE/clouds4.jpg);
-webkit-animation-name: cloud1;
animation-name: cloud1;
z-index: 1;
}
.content-jakob-e:after {
background-image: url(LINK-IMAGE/clouds3.png);
-webkit-animation-name: cloud2;
animation-name: cloud2;
z-index: 3;
}

@-webkit-keyframes cloud1 {
0% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
20% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
}
40% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
60% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
}
80% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
}

@keyframes cloud1 {
0% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
20% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
}
40% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
60% {
-webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
transform: translate(-50%, -50%) scale(1.4) rotate(-5deg);
}
80% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
}
}
@-webkit-keyframes cloud2 {
0% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
20% {
-webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
}
40% {
-webkit-transform: translate(-50%, -38%) scale(1.05);
transform: translate(-50%, -38%) scale(1.05);
}
60% {
-webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
}
80% {
-webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
}
100% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
}
@keyframes cloud2 {
0% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
20% {
-webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
transform: translate(-48%, -33%) scale(1.45) rotate(3deg);
}
40% {
-webkit-transform: translate(-50%, -38%) scale(1.05);
transform: translate(-50%, -38%) scale(1.05);
}
60% {
-webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
transform: translate(-40%, -40%) scale(1.45) rotate(-3deg);
}
80% {
-webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
transform: translate(-52%, -30%) scale(1.35) rotate(13deg);
}
100% {
-webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
transform: translate(-50%, -30%) scale(1.35) rotate(-8deg);
}
}
@-webkit-keyframes zep {
0% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
50% {
-webkit-transform: translate(50%, -75%);
transform: translate(50%, -75%);
}
75% {
-webkit-transform: translate(-30%, -51%);
transform: translate(-30%, -51%);
}
100% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
}
@keyframes zep {
0% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
50% {
-webkit-transform: translate(50%, -75%);
transform: translate(50%, -75%);
}
75% {
-webkit-transform: translate(-30%, -51%);
transform: translate(-30%, -51%);
}
100% {
-webkit-transform: translate(-10%, -51%);
transform: translate(-10%, -51%);
}
}
[class*=bird] {
position: absolute;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAADICAYAAADhnmEjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUYxQTcyQTdFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUYxQTcyQThFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRjFBNzJBNUVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRjFBNzJBNkVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuTJfGkAAAT3SURBVHja7JpvaFdVGMfv3fqzVqhtMtN0lJpoNHqRSFOi0BdhhBbR/Ef4whBNhN671fRFgUG9EETBaEJSvtCUJJ0GBZFCooX/0DlmrU2JaepQ11r68/vs9z36/M7O7957JhOxc+CD/sY933vPuef53uc898a5XC66kxYHgTsXiIoIjFG8DDrB3+ACeA6U3+pLgRg8CMpADfiNnARn5VjFIfAxqNYCovgZ6AH/qoPbKSJideARMA38JcJaYDn4yTqTMLnIyBtAqxbocXTeAiqKCDwP5mqBTtXxOtgKHs50AxwCf3BSM93BEv5/pPp7E4W81sECsAR0eK8hCoziotkNHvARCNEYBIbU0lwWtwFcZiiPp7mUZBEQT9gEzjHItoMvwQwwzKz7sWApmKM6PgSWgY3KmeaDLh47V7yjfw7iOD6DH09ZZ75CP3yUPhnxBOKTr4NGcNUMwXZe+T3VZxK1I13I3FkJnFcCzw7mNv4M/gMtg10HL4LNnKQ4BFMQuPuO5Nkmgf1yUoNPE2f6ExzVArLuV4JK0Ms46GNIlzDAJF94AjQz7N9Gx6tG1X6Ui/NUg7X8fZ2BJpwGC5U7JbYP6Q03lE8s0RGcNgeSNz4OfuBwxJF/BxNtgbASg8D9lOKowBjFxGGz4xE3AuzRx+v9gmkzwSvgBXqAbjXMjxKvQCcZB60901f5wwuvwBaQs/+jRE4wV5KndrekPWlDOGZttqaAnWA4hWvtEdgC4oHf2HcKlNLmjqbNgenQpIYhRrofrLCPdw3BTOQuXrLJUmu5ty7NcgURD5SN+A4Kyt75F/BM2l2w29OyeHgVE2SCbYEQjUHg3vREiYHRXLrl1qGfSmSmRaOYyatgNndyuhnhxCt40pXSsG3M4omTlSe204mlvclUpztNoJmZmbmKbgq8y9+1aXOwwPJJ2R/P4ib0MBPNxDkoVyme4Ro4ABa7PLGYIzWwQKeH877cZh9LK+MlJ3piUtVK7kYry2NvcT46QjQGgf+JqaY1qaHt80kw7PaJhHmSQBlxVXJWGZtLsrTj4CL42soXK1SO+GvSHOgsdYs6bBH/tk2ytaQhvGf54besJcrLiy+cJ3VMYo3yRC22NKuA9sQBeaKPgDNPDJvvIBAE7hFXFmuTl7hdJu31EagCR1TiddBHYDTLAcadFhpvzCJQoTo3Rvm3G7eGbwusY/XiAC/3VHT77ccNFiujJIFqZqtTaOuS4l7mDn45N+AFAmElBoEgEARM6983xnHqK0bJkeqZL0qR4lKUf2nRleVzCfHENeA1MIx/k1LA9n7HsoZgvsepi25/j9Om3HgeK7tVhcaY7ziORtoTFb6cySmxaueTifviTdHAz2mE1amPNlay2xydP8j0bER7A3yvOm51VrETBB4DH9H/f3TUkEIsBIEgcFdSXZewKsC+xCjtZMZ2WFc20zxxKv/VJiOp7l5boJgn9lmeWEOvGG4LeHuiLbCeaW1mT7QFrjg6N2TZZ7i+BrrGJ1HkI9CrBNp8djr294nywHxnMALm+0SpVkz0EQjRGASG1NLsVk8i5841w679GKnKKiCe2E4D1UbTwhLhAAHxxLGsm15SXmj84RCFplP4OzBTC4xJ8MQ1jiHJy5sO2xPPetha4jfbmZPMJIGmrEvAFKZ30s6MP+71XUgyiZ/z7HVefdU6qOTtGuEjEMI5im4KMAAuxrvFQhwucwAAAABJRU5ErkJggg==") no-repeat;
width: 20px;
height: 16px;
display: block;
-webkit-animation: bird-move 79s infinite, bird-flap 0.8s steps(10) infinite;
animation: bird-move 79s infinite, bird-flap 0.8s steps(10) infinite;
z-index: 2;
opacity: 0.7;
left: -2vw;
}
.bird-1 {
top: 38%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.bird-2 {
top: 51%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.bird-3 {
top: 40%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.bird-4 {
top: 43%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
.bird-5 {
top: 48%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.bird-6 {
top: 50%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
@-webkit-keyframes bird-flap {
100% {
background-position: 0 -200px;
}
}
@keyframes bird-flap {
100% {
background-position: 0 -200px;
}
}
@-webkit-keyframes bird-move {
0% {
left: -2vw;
}
100% {
left: 102vw;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
@keyframes bird-move {
0% {
left: -2vw;
}
100% {
left: 102vw;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
Gantikan tulisan "LINK-IMAGE/clouds4.jpg" & "LINK-IMAGE/clouds3.png" dengan link image.
Atur nominal width & margin kalau perlu!
Markup HTML
<div class="content-jakob-e">
<div class="bird-1"></div>
<div class="bird-2"></div>
<div class="bird-3"></div>
<div class="bird-4"></div>
<div class="bird-5"></div>
<div class="bird-6"></div>
</div>
DEMO

Bonus

Quote hovering - Shake Effect - 3D Rotating Carousel with CSS and JavaScript - Simple On-click Search Field Interaction (Pure CSS) - CSS-Only Nested Dropdown Navigation (ARIA) - Javascriptless Before/After Slider - CSS images with Costum Properties - Profile Image Hover Effect - Collage Parallax - Neon Button - Direction Aware Tiles using clip-path Pure CSS - Share Icons With Hover Effects (All CSS) - Pop-Up Overlay - Animated Search Box - floating animation - Venetian Blinds - Morphing tab button with list

4 Komentar WTF
Koben in the net, ingin berbagi tutorial dari website dynamicdrive (sebuah tempat untuk mendapatkan DHTML & Javascript gratis dan asli untuk meningkatkan situs web!) Original posted title is "jQuery Full Screen Image Viewer" Setelah melihat, ternyata trik untuk menampilkan gambar secara mandiri itu di buat dengan menggunakan 2 buah plugin jQuery! fullscreen image viewer dan zoomio. Jika anda tertarik memasang trick jQuery ini, maka kita akan mendapatkan 2 gaya dalam menampilkan image? Yang pertama, gambar akan ditampilkan dengan metode klik dan akan tampak secara full, lalu bisa zoom with hover! Yang ke dua, gambar akan ditampilkan dengan gaya zoom saja!
Dengan kelebihan URL link gambar hasil upload hostingan blogspot, cocok sekali trik ini ;) Seperti biasa, saya di sini hanya melakukan optimalisasi kode & script. Dan membantu (kalau terbantu) menerangkan cara pemakaiannya saja :D Masukan seluruh kode CSS di tempat biasa

/* ddfullscreenimageviewer */
body.revealviewer {
overflow: hidden;
}
#fullscreencanvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: white;
z-index: 9000;
pointer-events: none;
display: block;
transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#fullscreencanvas img {
position: relative;
cursor: pointer;
transition: all .5s;
}
div#closeviewer {
/* Large x close button */
width: 35px;
height: 35px;
overflow: hidden;
display: block;
position: fixed;
cursor: pointer;
text-indent: -1000px;
z-index: 100000;
top: 10px;
right: 10px;
}
div#closeviewer::before, div#closeviewer::after {
/* render large cross inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: black;
top: 50%;
opacity: 0;
margin-top: -3px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
}
body.revealviewer div#closeviewer::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 1;
}
/* Loading DIV CSS */
#fullimageloadingdiv, #zoomioloadingdiv {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: hidden;
overflow: hidden;
display: flex;
pointer-events: none;
z-index: 10000;
align-items: center;
justify-content: center;
background: white;
}
#fullimageloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* zoomio */
#zoomiocontainer {
/* container containing enlarged image (native sized image) */
position: absolute;
z-index: 9999;
overflow: hidden;
background: white;
visibility: visible;
}
#zoomiocontainer img {
/* image inside zoom container */
width: auto;
height: auto !important;
position: absolute !important;
display: block !important;
cursor: move;
}
.disablepointer {
pointer-events: none;
}
#zoomiocontainer.mobileclass {
/* CSS class added to zoom container on mobile OS */
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* opsional */
.thumbnails {
cursor: zoom-in;
}
Kemudian download dan lakukan host javascript berikut jangan lupa di masukan ke template :P:
  1. ddfullscreenimageviewer.js
  2. www.dynamicdrive.com/dynamicindex4/fullscreenimageviewer/ddfullscreenimageviewer.js
  3. zoomio.js
  4. www.dynamicdrive.com/dynamicindex4/zoomio/zoomio.js
Sisipkan seonggok script berikut sebelum tag </body>
<script>//<![CDATA[
jQuery(function () {
    $('img.thumbnails').fullscreenimage({
        scale: 2
    })
    $('.zoomio').zoomio({
        fadeduration: 500
    })
    $('.nolargeimg').zoomio({
        w: '500px',
        h: '400px'
    })
})
//]]></script>
SAVE.

Ketika memosting nanti syntax URL img harus dituliskan dengan aturan main sbb!

Untuk jQuery Full Screen Image Viewer<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" alt="" />

<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" data-scale="3" alt="" />
Untuk Zoomio<img class="zoomio nolargeimg" src="URL-GAMBAR" width="300" alt="" />

<img class="zoomio" src="URL-GAMBAR-UKURAN-KECIL" data-largesrc="URL-GAMBAR-UKURAN-BESAR" />

DEMO
codepen.io/beben-koben/full/NvWgVv/


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE