◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › › › › Added Animated Header Background by Jakob E

Added Animated Header Background by Jakob E

Follow This Blog
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
Loading...
XAdded Animated Header Background by Jakob E
Membuat animasi header awan berputar dan burung terbang agar blog lebih atraktif.
Subscribe my posts Register For Free!
, , , , , ✎

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE